/* ===========================================================================
   CRM WhatsApp - estilos mínimos

   Provisional a propósito. Lo justo para que el sistema se pueda usar y
   probar mientras se define la librería de diseño definitiva.
   =========================================================================== */

:root {
    --verde:        #128c7e;
    --verde-claro:  #25d366;
    --tinta:        #111b21;
    --texto:        #3b4a54;
    --suave:        #667781;
    --borde:        #e4e6e8;
    --fondo:        #f7f8fa;
    --panel:        #ffffff;
    --propio:       #d9fdd3;
    --rojo:         #c0392b;
    --ambar:        #b7791f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--texto);
    background: var(--fondo);
}

a { color: var(--verde); }

/* --- Estructura --------------------------------------------------------- */

.aplicacion { display: flex; min-height: 100vh; }

.barra-lateral {
    width: 210px;
    flex-shrink: 0;
    background: var(--tinta);
    color: #e9edef;
    display: flex;
    flex-direction: column;
}

.marca {
    padding: 18px 20px;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.barra-lateral nav { flex: 1; padding: 10px 0; }

.barra-lateral nav a {
    display: block;
    padding: 11px 20px;
    color: #aebac1;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.barra-lateral nav a:hover { background: rgba(255,255,255,.05); color: #e9edef; }

.barra-lateral nav a.activo {
    color: #fff;
    background: rgba(255,255,255,.07);
    border-left-color: var(--verde-claro);
}

.pie-lateral {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pie-lateral .usuario { color: #8696a0; }
.pie-lateral .salir { color: #aebac1; text-decoration: none; }
.pie-lateral .salir:hover { color: #fff; }

.contenido { flex: 1; padding: 24px 28px; min-width: 0; }

h1 { font-size: 19px; margin: 0 0 4px; color: var(--tinta); }
h2 { font-size: 15px; margin: 0 0 12px; color: var(--tinta); }
.subtitulo { color: var(--suave); margin: 0 0 20px; }

/* --- Paneles y tablas --------------------------------------------------- */

.panel {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--borde); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); }
tbody tr:last-child td { border-bottom: none; }

.vacio {
    padding: 40px 20px;
    text-align: center;
    color: var(--suave);
}

/* --- Formularios -------------------------------------------------------- */

.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--tinta); }
.campo .ayuda { display: block; margin-top: 4px; font-size: 12px; color: var(--suave); }

input[type=text], input[type=password], textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font: inherit;
    background: #fff;
}

input:focus, textarea:focus { outline: 2px solid var(--verde-claro); outline-offset: -1px; }

.boton {
    display: inline-block;
    padding: 9px 18px;
    border: none;
    border-radius: 6px;
    background: var(--verde);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.boton:hover { background: #0f7a6d; }
.boton.peligro { background: var(--rojo); }
.boton.peligro:hover { background: #a5322a; }
.boton.secundario { background: #fff; color: var(--texto); border: 1px solid var(--borde); }

/* --- Avisos ------------------------------------------------------------- */

.aviso {
    padding: 11px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    border-left: 3px solid;
}

.aviso-exito  { background: #e8f8ef; border-color: var(--verde-claro); color: #1a6b4a; }
.aviso-error  { background: #fdecea; border-color: var(--rojo);        color: #922; }
.aviso-aviso  { background: #fdf6e3; border-color: var(--ambar);       color: #7a5b12; }
.aviso-info   { background: #eaf2fb; border-color: #3b82c4;            color: #2c5c8a; }

/* --- Etiquetas de estado ------------------------------------------------ */

.etiqueta {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
}

.etiqueta.verde  { background: #e8f8ef; color: #1a6b4a; }
.etiqueta.gris   { background: #eef0f2; color: var(--suave); }
.etiqueta.roja   { background: #fdecea; color: #922; }
.etiqueta.ambar  { background: #fdf6e3; color: #7a5b12; }

/* --- Bandeja ------------------------------------------------------------ */

.fila-conversacion { cursor: pointer; }
.fila-conversacion:hover { background: #fafbfc; }
.fila-conversacion a { text-decoration: none; color: inherit; display: block; }
.nombre-contacto { font-weight: 600; color: var(--tinta); }
.vista-previa { color: var(--suave); font-size: 13px; }

/* --- Conversación ------------------------------------------------------- */

.chat {
    background: #efeae2;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 16px;
    height: 430px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.burbuja {
    max-width: 62%;
    padding: 7px 11px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    word-wrap: break-word;
}

.burbuja.propia { align-self: flex-end; background: var(--propio); }
.burbuja .hora { display: block; font-size: 11px; color: var(--suave); margin-top: 3px; text-align: right; }

/* --- Túnel -------------------------------------------------------------- */

.interruptor { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.luz { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.luz.encendida { background: var(--verde-claro); box-shadow: 0 0 0 3px rgba(37,211,102,.2); }
.luz.apagada   { background: #cbd1d6; }

.url-publica {
    font-family: Consolas, "Courier New", monospace;
    background: #f0f2f4;
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: 10px 12px;
    word-break: break-all;
    display: block;
    margin: 6px 0 2px;
}

.registro {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    background: var(--tinta);
    color: #b9c4cb;
    border-radius: 6px;
    padding: 12px 14px;
    max-height: 210px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* --- Login -------------------------------------------------------------- */

.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tinta);
    padding: 20px;
}

.caja-login {
    background: #fff;
    border-radius: 10px;
    padding: 34px 30px;
    width: 100%;
    max-width: 340px;
}

.caja-login h1 { text-align: center; margin-bottom: 22px; }
.caja-login .boton { width: 100%; margin-top: 6px; }