:root{--fondo: #f3f6fa;--superficie: #ffffff;--superficie-alta: #f6f8fb;--borde: #e3e9f0;--borde-fuerte: #cfd9e5;--texto: #16233b;--texto-suave: #6b7a90;--texto-tenue: #9aa7b8;--marina: #16233b;--marina-clara: #22324f;--acento: #47b2e4;--acento-oscuro: #2e9bc9;--exito: #16a34a;--peligro: #e5484d;--aviso: #d97706;--radio: 12px;--radio-chico: 8px;--sombra: 0 1px 2px rgba(22, 35, 59, .04), 0 1px 3px rgba(22, 35, 59, .06)}*{box-sizing:border-box}body{margin:0;background:var(--fondo);color:var(--texto);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:var(--acento-oscuro);text-decoration:none}a:hover{text-decoration:underline}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.app>.contenido{min-width:0;overflow-x:hidden}.barra-lateral{background:var(--marina);color:#dbe3ee;padding:22px 16px 18px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;overflow-y:auto}.marca{display:inline-flex;align-items:center;background:var(--acento);color:#fff;font-weight:700;font-size:17px;letter-spacing:.5px;padding:7px 14px;border-radius:var(--radio-chico);align-self:flex-start}.marca span{color:#fff}.barra-lateral .campo{margin-bottom:0}.barra-lateral .campo label{color:var(--texto-tenue);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}.barra-lateral select{background:var(--marina-clara);border-color:#ffffff1f;color:#fff}.barra-lateral select:focus{border-color:var(--acento)}.barra-lateral .ayuda{color:var(--texto-tenue)}.nav{display:flex;flex-direction:column;gap:2px}.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radio-chico);color:#b9c5d6;font-weight:500;font-size:14.5px}.nav a:hover{background:var(--marina-clara);color:#fff;text-decoration:none}.nav a.activo{background:var(--marina-clara);color:#fff;box-shadow:inset 3px 0 0 var(--acento)}.nav a svg{flex:none;opacity:.85}.nav a.activo svg{opacity:1;color:var(--acento)}.nav .proximamente{opacity:.35;cursor:not-allowed}.nav-separador{height:1px;background:#ffffff14;margin:10px 2px}.usuario-bloque{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}.usuario-fila{display:flex;align-items:center;gap:10px;margin-bottom:12px}.avatar{width:34px;height:34px;border-radius:50%;background:var(--acento);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}.usuario-datos{min-width:0}.usuario-nombre{color:#fff;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.usuario-rol{color:var(--texto-tenue);font-size:12px}.boton-salir{width:100%;background:transparent;color:#b9c5d6;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;gap:8px}.boton-salir:hover:not(:disabled){background:var(--marina-clara);color:#fff}.contenido{padding:30px 34px 60px;max-width:1240px}.cabecera-pagina{margin-bottom:24px}.cabecera-pagina h1{margin:0 0 4px;font-size:27px;font-weight:600;letter-spacing:-.5px}.cabecera-pagina p{margin:0;color:var(--texto-suave)}.tarjeta{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);padding:22px;margin-bottom:18px;box-shadow:var(--sombra)}.tarjeta h2{margin:0 0 16px;font-size:16px;font-weight:600}.rejilla,.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}.metrica{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);padding:18px 20px;box-shadow:var(--sombra)}.metrica .etiqueta{color:var(--acento-oscuro);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}.metrica .valor{font-size:30px;font-weight:600;letter-spacing:-.8px;line-height:1.2}.tarjeta .metrica{border:none;box-shadow:none;padding:0;background:transparent}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--borde)}th{color:var(--texto-suave);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px}tbody tr:last-child td{border-bottom:none}.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.campo label{font-size:13.5px;color:var(--texto-suave);font-weight:500}.campo .ayuda{font-size:12.5px;color:var(--texto-tenue)}input,select,textarea{background:var(--superficie);border:1px solid var(--borde-fuerte);border-radius:var(--radio-chico);padding:10px 12px;color:var(--texto);font-size:14.5px;font-family:inherit;transition:border-color .15s,box-shadow .15s}input::placeholder,textarea::placeholder{color:var(--texto-tenue)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px #47b2e429}input[type=file]{padding:9px;background:var(--superficie-alta)}button{background:var(--acento);color:#fff;border:1px solid transparent;border-radius:var(--radio-chico);padding:10px 18px;font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:var(--acento-oscuro)}button:disabled{opacity:.45;cursor:not-allowed}button.secundario{background:var(--superficie);color:var(--texto);border-color:var(--borde-fuerte)}button.secundario:hover:not(:disabled){background:var(--superficie-alta);border-color:var(--texto-tenue)}button.enlace{background:none;border:none;color:var(--acento-oscuro);font-size:13.5px;font-weight:600;padding:4px;width:auto;align-self:center;text-decoration:underline}button.enlace:hover:not(:disabled){background:none;color:var(--marina)}button.peligro{background:var(--superficie);color:var(--peligro);border-color:var(--peligro)}button.peligro:hover:not(:disabled){background:var(--peligro);color:#fff}.acciones{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.aviso{padding:12px 15px;border-radius:var(--radio-chico);font-size:14px;margin-bottom:16px;border:1px solid}.aviso.error{background:#fdf2f2;color:#a5282c;border-color:#f5c6c8}.aviso.ok{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}.aviso.info{background:#eff8fd;color:#175f80;border-color:#c3e4f4}.etiqueta-estado{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle}.etiqueta-estado.pendiente{background:#fef3c7;color:#92400e}.etiqueta-estado.conectado{background:#dcfce7;color:#15803d}.etiqueta-estado.error{background:#fee2e2;color:#b91c1c}code{background:var(--superficie-alta);border:1px solid var(--borde);padding:2px 6px;border-radius:5px;font-size:13px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;word-break:break-all}.login{display:grid;place-items:center;min-height:100vh;padding:24px;background:var(--fondo)}.login-centro{width:100%;max-width:430px;text-align:center}.login .marca{font-size:21px;padding:9px 18px;margin-bottom:14px}.login .subtitulo{color:var(--texto-suave);font-size:15px;margin:0 0 26px}.login .caja{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);padding:28px;text-align:left;box-shadow:var(--sombra)}.login button[type=submit]{width:100%;padding:12px;font-size:15px;margin-top:4px}.login-pie{margin-top:24px;color:var(--texto-tenue);font-size:13px}.login-pie strong{color:var(--acento-oscuro);font-weight:600}.bandeja{display:grid;grid-template-columns:330px 1fr;gap:16px;height:calc(100vh - 200px);min-height:480px}.bandeja-lista{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);overflow-y:auto;box-shadow:var(--sombra)}.filtros{display:flex;gap:6px;padding:12px;position:sticky;top:0;background:var(--superficie);border-bottom:1px solid var(--borde);z-index:1}.filtros button{flex:1;padding:7px 4px;font-size:12px;border-radius:999px}button.conversacion{display:block;width:100%;text-align:left;background:transparent;color:var(--texto);border:none;border-bottom:1px solid var(--borde);border-radius:0;padding:13px 15px;cursor:pointer;font-weight:400}button.conversacion:hover:not(:disabled){background:var(--superficie-alta)}button.conversacion.activa,button.conversacion.activa:hover:not(:disabled){background:#eff8fd;box-shadow:inset 3px 0 0 var(--acento)}.conversacion-cabecera{display:flex;justify-content:space-between;align-items:center;gap:8px}.globo{background:var(--acento);color:#fff;border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;padding:0 6px}.conversacion-telefono{color:var(--texto-suave);font-size:12.5px;margin-top:2px}.conversacion-ultimo{color:var(--texto-suave);font-size:13px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversacion-pie{margin-top:8px}.bandeja-hilo{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sombra)}.hilo-vacio{display:grid;place-items:center;height:100%;color:var(--texto-tenue)}.hilo-cabecera{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--borde)}.hilo-mensajes{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:#f7f9fc}.burbuja{max-width:74%;border-radius:12px;padding:9px 13px;font-size:14px;box-shadow:0 1px 1px #16233b12}.burbuja.entrante{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}.burbuja.saliente{align-self:flex-end;background:#dcf8c6;border-bottom-right-radius:3px}.burbuja-texto{white-space:pre-wrap;word-break:break-word}.burbuja-plantilla{font-size:10.5px;color:var(--texto-suave);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.burbuja-pie{font-size:11px;color:var(--texto-suave);margin-top:5px;text-align:right}.burbuja-error{font-size:12px;color:var(--peligro);margin-top:5px}.hilo-responder{border-top:1px solid var(--borde);padding:13px 16px;background:var(--superficie)}.ventana-aviso{font-size:12.5px;color:var(--texto-suave);margin-bottom:8px}.columnas{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}.columna-principal{flex:1 1 380px;min-width:0}.columna-lateral{flex:0 1 360px;min-width:0;position:sticky;top:20px}.boton-menu,.velo-menu{display:none}@media(max-width:980px){.app{display:block}.contenido{margin-left:62px;max-width:none}.barra-lateral{position:fixed;top:0;left:0;bottom:0;width:62px;z-index:40;height:100%;overflow:hidden;padding:12px 0;align-items:center;transition:width .2s ease}.barra-lateral.abierta{width:248px;overflow-y:auto;padding:12px 14px;align-items:stretch;box-shadow:4px 0 18px #16233b47}.boton-menu{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#fff;padding:8px;margin-bottom:8px;align-self:flex-start}.boton-menu:hover:not(:disabled){background:#ffffff1f}.barra-lateral:not(.abierta) .marca span,.barra-lateral:not(.abierta) .campo,.barra-lateral:not(.abierta) .usuario-datos,.barra-lateral:not(.abierta) label,.barra-lateral:not(.abierta) .nav-separador{display:none}.barra-lateral:not(.abierta) .marca{font-size:22px;text-align:center;margin-bottom:14px}.barra-lateral:not(.abierta) .nav a{justify-content:center;padding:11px 0;font-size:0}.barra-lateral:not(.abierta) .nav a svg{width:19px;height:19px}.barra-lateral:not(.abierta) .usuario-bloque{padding:0;border:none}.barra-lateral:not(.abierta) .usuario-fila{justify-content:center}.barra-lateral:not(.abierta) .boton-salir{justify-content:center;padding:10px 0;font-size:0}.barra-lateral:not(.abierta) .boton-salir svg{width:17px;height:17px}.velo-menu{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#16233b66;z-index:35}.contenido{padding:18px 16px 44px}.bandeja{grid-template-columns:1fr;height:auto}.bandeja-lista{max-height:340px}.bandeja-hilo{min-height:440px}}@media(max-width:640px){.contenido{padding:14px 12px 40px}.columnas{gap:14px}.columna-principal,.columna-lateral{flex:1 1 100%}.columna-lateral{position:static}.cabecera-pagina h1{font-size:21px}.tarjeta{padding:14px;border-radius:10px}.rejilla,.metricas{grid-template-columns:repeat(2,1fr);gap:10px}.metrica{padding:12px}.metrica .valor{font-size:21px}.tarjeta table{display:block;overflow-x:auto;white-space:nowrap}.acciones{flex-wrap:wrap}.acciones button{flex:1 1 auto;min-height:42px}input,select,textarea{font-size:16px}.bandeja-lista{max-height:300px}.burbuja{max-width:88%}.hilo-cabecera{flex-wrap:wrap;gap:6px}.login-centro{padding:0 6px}.caja{padding:18px 16px}}.boton-menu{position:relative}@media(max-width:980px){.barra-lateral:not(.abierta) .nav a .globo-sinleer{position:absolute;top:2px;right:4px;margin:0}}