/* =====================================================================
   wa.css — WhatsApp Famex · v3 «verde petróleo»
   Inspiración: polpharmabiologics.com (04/11/2026), llevada a plano:
   verde petróleo + niebla clara, titulares grandes y apretados, píldoras,
   círculos planos y anillos finos (sus burbujas 3D, sin volumen),
   listas tipo «dato» con filetes de 1 px, acento coral.
   Regla de Óscar: sin sombras, sin degradados, sin biseles.
   Sora = titulares · Manrope = texto · JetBrains Mono = horas (las de Óscar,
   mismas que Core y ERP Bahía).
   La CSP no deja estilos en línea: todo por clase.
   ===================================================================== */

@font-face { font-family: 'Sora';           font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/sora-variable.woff2') format('woff2'); }
@font-face { font-family: 'Manrope';        font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/manrope-variable.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono';   font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/jetbrains-mono-variable.woff2') format('woff2'); }

:root {
  --fondo:    #f2f6f5;
  --panel:    #ffffff;
  --niebla:   #e5eeec;     /* el gris verdoso de sus tarjetas */
  --niebla2:  #d3e2df;
  --filete:   #dbe6e3;
  --teal:     #005453;     /* su color de texto y marca */
  --teal-osc: #003d3c;
  --teal-med: #2f7b77;
  --teal-cl:  #dcebe8;
  --texto:    #0e3230;
  --texto2:   #3b5b58;
  --tenue:    #6b8784;
  --tenue2:   #9fb4b1;
  --coral:    #f2605a;     /* su «Contact» */
  --coral-cl: #fde6e4;

  --verde:  #1d8456;  --verde-cl: #e0f2e8;
  --ambar:  #a9640d;  --ambar-cl: #f9ecd8;
  --rojo:   #c23b34;  --rojo-cl:  #fbe3e1;

  --r:   22px;
  --r-s: 14px;
  --pildora: 999px;
  --f-tit:  'Sora', -apple-system, 'Segoe UI', sans-serif;
  --f-txt:  'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --barra-h: 72px;
  --ease-m: var(--ease-smooth-out, cubic-bezier(.22, 1, .36, 1));
  --ease-b: var(--ease-bounce, cubic-bezier(.34, 1.36, .64, 1));

  /* lo que el kit de transiciones deja al proyecto */
  --tabs-bar-bg: var(--niebla);
  --tabs-pill-bg: var(--teal);
  --tabs-text-muted: var(--texto2);
  --tabs-text-active: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; min-height: 100%; background: var(--fondo); color: var(--texto); font: 500 17px/1.55 var(--f-txt); -webkit-font-smoothing: antialiased; }
a { color: var(--teal); text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--f-tit); font-weight: 400; color: var(--teal); margin: 0; line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: 34px; }
h2 { font-size: 22px; }
h1 em, h2 em { font-style: normal; font-weight: 300; }
p { margin: 0; }
code, .mono { font-family: var(--f-mono); font-size: .86em; }
code { background: var(--niebla); padding: 2px 8px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oculto { display: none !important; }
.icono { flex: none; stroke-width: 1.7; }
.dim { color: var(--tenue); }
.chico { font-size: 14px; }
.ayuda { color: var(--tenue); font-size: 15.5px; margin: 8px 0; line-height: 1.55; }
.en-linea { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
/* «• WHAT WE DO»: punto coral + versalitas pequeñas */
.kicker { display: inline-flex; align-items: center; gap: 9px; font: 600 12.5px/1 var(--f-txt); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   Botones: píldoras. Al pasar, un relleno barre de izquierda a derecha
   (el ::before va encima del fondo y debajo del texto: isolation).
   --------------------------------------------------------------------- */
.btn { --btn-bg: var(--niebla); --btn-tx: var(--teal); --btn-fill: var(--teal); --btn-tx-h: #fff;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border: 0; border-radius: var(--pildora); background: var(--btn-bg); color: var(--btn-tx);
  font: 600 16px/1.2 var(--f-txt); cursor: pointer; transition: color var(--duration-fast, 250ms) var(--ease-m), scale var(--duration-quick, 150ms) var(--ease-b); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--btn-fill); scale: 0 1; transform-origin: 0 50%; transition: scale var(--duration-slow, 400ms) var(--ease-m); }
.btn:not(:disabled):hover { color: var(--btn-tx-h); }
.btn:not(:disabled):hover::before { scale: 1 1; }
.btn:not(:disabled):active { scale: .97; }
.btn .icono { transition: translate var(--duration-fast, 250ms) var(--ease-b); }
.btn:not(:disabled):hover .icono { translate: 4px 0; }
.btn:disabled, .btn.cargando { opacity: .5; cursor: wait; }
.btn-primario { --btn-bg: var(--teal); --btn-tx: #fff; --btn-fill: var(--coral); }
.btn-peligro { --btn-bg: var(--rojo-cl); --btn-tx: var(--rojo); --btn-fill: var(--rojo); }
.btn-grande { width: 100%; padding: 17px 24px; font-size: 17px; }
.btn-chico { padding: 9px 16px; font-size: 14.5px; }
.ico-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--texto2); cursor: pointer; flex: none; transition: background-color .2s, color .2s, scale var(--duration-quick, 150ms) var(--ease-b); }
.ico-btn:hover { background: var(--niebla); color: var(--teal); }
.ico-btn:active { scale: .88; }
.ico-btn:hover .icono { animation: empuje var(--duration-slow, 400ms) var(--ease-b); }
.ico-btn:disabled { opacity: .35; cursor: not-allowed; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s; }
.enlace:hover { color: var(--coral); }

.campo-et { display: block; font: 600 12.5px/1 var(--f-txt); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin: 18px 0 9px; }
.campo-in { width: 100%; padding: 14px 18px; border: 1px solid var(--filete); border-radius: var(--r-s); background: var(--fondo); color: var(--texto); font: 500 17px/1.3 var(--f-txt); outline: 3px solid transparent; transition: border-color .2s, background-color .2s, outline-color .2s; }
.campo-in:focus { border-color: var(--teal); background: #fff; outline-color: var(--teal-cl); }
.campo-in::placeholder { color: var(--tenue2); }
.campo-chico { padding: 10px 14px; font-size: 15.5px; }
select.campo-in { appearance: none; padding-right: 40px; background: var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23005453' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; }
textarea.campo-in { resize: none; }
.t-input.is-error { border-color: var(--rojo); }
.t-error-msg { color: var(--rojo); font-size: 14.5px; margin-top: 6px; min-height: 1em; }

.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 13px 18px; border-radius: var(--r-s); background: var(--rojo-cl); color: var(--rojo); font-size: 15.5px; margin: 0 0 18px; }
.alerta-ok { background: var(--verde-cl); color: var(--verde); }
.alerta-info { background: var(--teal-cl); color: var(--teal); }
.msg { min-height: 1.4em; margin-top: 14px; font-size: 15px; color: var(--tenue); text-align: center; }
.msg-error { color: var(--rojo); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--pildora); background: var(--niebla); color: var(--texto2); font: 600 12.5px/1.5 var(--f-txt); }
.tag-ink { background: var(--teal-cl); color: var(--teal); }

/* ---------------------------------------------------------------------
   Círculos planos (sus burbujas, sin volumen). Los <span> de .orbes.
   --------------------------------------------------------------------- */
.orbes { position: absolute; inset: 0; pointer-events: none; }
.orbes span { position: absolute; border-radius: 50%; animation: flota 9s ease-in-out infinite alternate; }
.acceso-lado .orbes span:nth-child(1) { width: 640px; height: 640px; left: -220px; bottom: -300px; background: #0a6361; animation-duration: 12s; }
.acceso-lado .orbes span:nth-child(2) { width: 420px; height: 420px; right: -120px; bottom: 40px; border: 1px solid rgba(255, 255, 255, .22); animation-delay: -3s; }
.acceso-lado .orbes span:nth-child(3) { width: 170px; height: 170px; right: 120px; bottom: 230px; background: var(--niebla); animation-duration: 7s; }
.acceso-lado .orbes span:nth-child(4) { width: 46px; height: 46px; right: 250px; bottom: 120px; background: var(--coral); animation-duration: 5s; animation-delay: -2s; }

/* ---------------------------------------------------------------------
   Acceso: dos paneles
   --------------------------------------------------------------------- */
body.acceso { min-height: 100dvh; display: flex; flex-direction: column; background: var(--panel); }
body.acceso .wrap { flex: 1; display: grid; grid-template-columns: minmax(340px, 6fr) 6fr; }
.acceso-lado { position: relative; overflow: hidden; background: var(--teal); color: #d3e6e3; padding: 52px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.acceso-lado > div:first-child, .acceso-renglones { position: relative; z-index: 1; }
.acceso-lado .kicker { color: #9cc4bf; }
.acceso-lado h1 { color: #fff; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.04; letter-spacing: -.045em; margin-top: 26px; }
.acceso-lado h1 span, .acceso-lado h1 em { display: block; }
.acceso-lado h1 em { color: #9fd0c9; }
.acceso-lado p { max-width: 36ch; color: #bcd8d4; font-size: 17.5px; line-height: 1.6; margin-top: 24px; }
/* lista tipo «dato»: etiqueta chica arriba, valor abajo, filete fino */
.acceso-renglones { list-style: none; margin: 0; padding: 0; max-width: 300px; }
.acceso-renglones li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.acceso-renglones li span:first-child { font-size: 13.5px; color: #8fb9b4; }
.acceso-renglones li span:last-child { font-size: 19px; color: #fff; font-weight: 500; }

.acceso-cuerpo { position: relative; overflow: hidden; display: grid; place-items: center; padding: 48px 28px; }
/* el círculo de niebla gigante detrás de la tarjeta */
.acceso-cuerpo::before { content: ''; position: absolute; width: 760px; height: 760px; border-radius: 50%; background: var(--niebla); right: -260px; top: 50%; translate: 0 -50%; animation: entra-orbe 1.2s var(--ease-m) both; }
.card { position: relative; width: 100%; max-width: 470px; }
#login { padding: 40px 38px 30px; border-radius: 30px; background: var(--panel); border: 1px solid var(--filete); }
.cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.cabecera img { height: 46px; }
.titulo { font-size: 30px; margin-top: 10px; }
.lead { color: var(--texto2); margin-top: 10px; }
.saludo { font-size: 31px; line-height: 1.1; }
.sub { color: var(--tenue); font-size: 16.5px; margin: 10px 0 22px; }
.panel-paso form .btn-grande { margin-top: 20px; }

.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* tarjeta de método: al pasar, un círculo crece desde el icono y la tiñe */
.metodo { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 186px; padding: 22px; border: 0; border-radius: var(--r); background: var(--niebla); color: var(--texto); text-align: left; font: inherit; cursor: pointer; transition: color var(--duration-fast, 250ms), scale var(--duration-quick, 150ms) var(--ease-b); }
.metodo::before { content: ''; position: absolute; z-index: -1; left: 22px; top: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--teal); scale: 0; transition: scale 600ms var(--ease-m); }
.metodo:hover::before { scale: 9; }
.metodo:active { scale: .97; }
.metodo .ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); color: var(--teal); transition: rotate var(--duration-slow, 400ms) var(--ease-b); }
.metodo:hover .ico { rotate: -12deg; }
.metodo .txt { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.metodo .t { font: 500 19px/1.15 var(--f-tit); letter-spacing: -.02em; color: var(--teal); transition: color var(--duration-fast, 250ms); }
.metodo .d { font-size: 14.5px; color: var(--texto2); line-height: 1.4; transition: color var(--duration-fast, 250ms); }
.metodo:hover .t { color: #fff; }
.metodo:hover .d { color: #bcd8d4; }
.metodo .flecha { display: none; }
.metodo.sin-registrar::before { background: var(--niebla2); }
.metodo.sin-registrar:hover .t { color: var(--teal); }
.metodo.sin-registrar:hover .d { color: var(--texto2); }
.metodo.sin-registrar .ico { color: var(--tenue); }

.codigo { width: 100%; padding: 18px; border: 1px solid var(--filete); border-radius: var(--r-s); background: var(--fondo); text-align: center; font: 500 38px/1 var(--f-mono); letter-spacing: .4em; color: var(--teal); outline: 3px solid transparent; transition: border-color .2s, background-color .2s, outline-color .2s; }
.codigo:focus { border-color: var(--teal); background: #fff; outline-color: var(--teal-cl); }
.pie { margin-top: 22px; font-size: 15px; color: var(--tenue); }
.firma { padding: 16px 22px; font: 500 12.5px/1 var(--f-txt); color: var(--tenue2); text-align: right; }
body.acceso .firma { position: fixed; right: 0; bottom: 0; }
body.panel .firma { display: none; }
.acceso-ok { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 0 8px; font: 400 24px/1.2 var(--f-tit); letter-spacing: -.03em; color: var(--teal); text-align: center; }
.acceso-ok .t-success-check { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; }

/* páginas sueltas de acceso (403/404) */
body.acceso .wrap > .card { grid-column: 1 / -1; margin: auto; padding: 40px; border: 1px solid var(--filete); border-radius: 30px; background: var(--panel); }

/* entradas escalonadas */
.panel-paso > *, .acceso-ok > *, .acceso-lado > div:first-child > *, .hilo-vacio > :not(.orbes) { animation: sube var(--duration-very-slow, 500ms) var(--ease-m) both; }
.panel-paso > :nth-child(2), .acceso-lado > div:first-child > :nth-child(2), .hilo-vacio > :nth-child(2) { animation-delay: 70ms; }
.panel-paso > :nth-child(3), .acceso-lado > div:first-child > :nth-child(3), .hilo-vacio > :nth-child(3) { animation-delay: 140ms; }
.panel-paso > :nth-child(4) { animation-delay: 210ms; }
.acceso-lado h1 span, .acceso-lado h1 em { animation: sube 800ms var(--ease-m) both; }
.acceso-lado h1 em { animation-delay: 160ms; }
.metodos .metodo { animation: sube var(--duration-very-slow, 500ms) var(--ease-m) both; }
.metodos .metodo:nth-child(2) { animation-delay: 90ms; }

/* ---------------------------------------------------------------------
   Panel: barra superior con navegación en píldoras
   --------------------------------------------------------------------- */
body.panel { height: 100dvh; display: flex; flex-direction: column; }
.barra { height: var(--barra-h); flex: none; display: flex; align-items: center; gap: 28px; padding: 0 22px; background: var(--panel); border-bottom: 1px solid var(--filete); }
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--teal); font: 700 17px/1 var(--f-txt); letter-spacing: -.01em; }
.marca-sello { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; transition: rotate var(--duration-slow, 400ms) var(--ease-b), background-color .2s; }
.marca:hover .marca-sello { rotate: -14deg; background: var(--coral); }
.marca small { font: 500 12.5px/1 var(--f-mono); color: var(--tenue); margin-left: 6px; }
.tabs-nav { display: flex; align-items: center; gap: 6px; }
.tabs-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--pildora); background: var(--fondo); color: var(--texto2); font: 600 15px/1 var(--f-txt); transition: background-color .2s, color .2s, scale var(--duration-quick, 150ms) var(--ease-b); }
.tabs-nav a:hover { background: var(--niebla); color: var(--teal); }
.tabs-nav a:active { scale: .95; }
.tabs-nav a.is-activa { background: var(--teal); color: #fff; }
.barra-der { margin-left: auto; position: relative; }
.avatar { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--coral); color: #fff; font: 700 14px/1 var(--f-txt); cursor: pointer; transition: scale var(--duration-quick, 150ms) var(--ease-b), background-color .2s; }
.avatar:hover { background: var(--teal); }
.avatar:active { scale: .9; }
.menu { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; min-width: 250px; padding: 8px; border: 1px solid var(--filete); border-radius: var(--r); background: var(--panel); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-radius: var(--r-s); background: none; color: var(--texto); font: 500 15.5px/1.2 var(--f-txt); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.menu a:hover, .menu button:hover { background: var(--fondo); color: var(--teal); }
.menu-nombre { padding: 10px 14px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--filete); font: 500 17px/1.2 var(--f-tit); color: var(--teal); }
.menu-nombre small { display: block; margin-top: 4px; font: 500 12.5px/1.4 var(--f-mono); color: var(--tenue); }
.menu-label { display: block; padding: 8px 14px 4px; font-size: 14px; color: var(--tenue); }
.menu-label select { margin-top: 6px; }

.contenido { flex: 1; min-height: 0; overflow: auto; }

/* ---------------------------------------------------------------------
   Administración
   --------------------------------------------------------------------- */
.pagina { max-width: 1160px; margin: 0 auto; padding: 44px 26px 64px; }
.pagina-cab { display: flex; flex-direction: column; gap: 12px; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--filete); }
.pagina-cab h1 { font-size: 44px; }
.pagina-sub { color: var(--texto2); max-width: 70ch; font-size: 17px; }
.rejilla { display: grid; gap: 18px; }
.rejilla-2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.tarjeta { background: var(--panel); border: 1px solid var(--filete); border-radius: var(--r); padding: 26px; animation: sube var(--duration-very-slow, 500ms) var(--ease-m) both; }
.tarjeta + .tarjeta { margin-top: 18px; }
.rejilla > .tarjeta + .tarjeta { margin-top: 0; }
.rejilla > .tarjeta:nth-child(2) { animation-delay: 70ms; }
.rejilla > .tarjeta:nth-child(3) { animation-delay: 140ms; }
.rejilla > .tarjeta:nth-child(n+4) { animation-delay: 210ms; }
.tarjeta-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.tarjeta-titulo h2 { font-size: 22px; }
.tarjeta ul { margin: 0; padding-left: 18px; }
.tarjeta li + li { margin-top: 4px; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0 20px; margin: 0; font-size: 16.5px; }
.datos dt, .datos dd { padding: 11px 0; border-bottom: 1px solid var(--filete); line-height: 1.5; }
.datos dt { color: var(--tenue); font-size: 14.5px; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.datos dt:last-of-type, .datos dd:last-of-type { border-bottom: 0; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--filete); font-size: 16.5px; }
.lista-simple li form { margin-left: auto; }
.form-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.form-rejilla label { display: block; font: 600 12.5px/1.3 var(--f-txt); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); padding-top: 12px; }
.form-rejilla label input { margin-top: 8px; text-transform: none; letter-spacing: 0; }
.form-rejilla label.en-linea { display: inline-flex; align-self: end; padding-bottom: 8px; text-transform: none; letter-spacing: 0; font: 500 16px/1 var(--f-txt); color: var(--texto); }
.form-rejilla .modal-botones { grid-column: 1 / -1; }
.modal-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabla th { padding: 0 14px 12px; border-bottom: 1px solid var(--teal); text-align: left; font: 600 12.5px/1 var(--f-txt); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.tabla td { padding: 14px; border-bottom: 1px solid var(--filete); vertical-align: top; transition: background-color .15s; }
.tabla tbody tr:hover td { background: var(--fondo); }
.tabla-compacta td { padding: 9px 12px; font-size: 14.5px; }
.fila-error td { background: var(--rojo-cl) !important; }

/* ---------------------------------------------------------------------
   La bandeja
   --------------------------------------------------------------------- */
body.panel-bandeja .contenido { overflow: hidden; }
.bandeja { position: relative; display: grid; grid-template-columns: 400px minmax(0, 1fr); height: 100%; }
.bandeja:has(.col-ficha:not(.oculto)) { grid-template-columns: 400px minmax(0, 1fr) 320px; }

/* columna 1 */
.col-lista { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--filete); }
.lista-cab { display: grid; gap: 14px; padding: 24px 20px 16px; }
.lista-titulo { display: flex; align-items: center; justify-content: space-between; }
.lista-titulo h1 { font-size: 30px; }
.lista-titulo .cuenta-conv { padding: 6px 12px; border-radius: var(--pildora); background: var(--niebla); color: var(--teal); font: 600 13.5px/1 var(--f-txt); }
.linea-unica { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: var(--pildora); background: var(--fondo); font: 600 15px/1.2 var(--f-txt); color: var(--teal); }
.linea-unica small { margin-left: auto; font: 500 13px/1 var(--f-mono); color: var(--tenue); }
.lista-cab select.campo-in { border-radius: var(--pildora); }
.buscar { position: relative; }
.buscar .icono { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tenue2); }
.buscar input { padding-left: 44px; border-radius: var(--pildora); }
.filtros { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--pildora); font: 600 14.5px/1 var(--f-txt); }
.filtros::-webkit-scrollbar { display: none; }
.filtros .t-tab { flex: 1 0 auto; padding: 6px 10px; font: inherit; white-space: nowrap; }
.filtros .t-tabs-pill { border-radius: var(--pildora); }

.conversaciones { flex: 1; overflow-y: auto; margin: 0; padding: 6px 12px; list-style: none; border-top: 1px solid var(--filete); }
.conv { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 14px 12px; border-radius: var(--r); cursor: pointer; transition: background-color .2s; animation: sube var(--duration-slow, 400ms) var(--ease-m) both; }
.conv:nth-child(2) { animation-delay: 30ms; } .conv:nth-child(3) { animation-delay: 60ms; } .conv:nth-child(4) { animation-delay: 90ms; }
.conv:nth-child(5) { animation-delay: 120ms; } .conv:nth-child(6) { animation-delay: 150ms; } .conv:nth-child(n+7) { animation-delay: 180ms; }
.conv + .conv { margin-top: 2px; }
.conv:hover { background: var(--fondo); }
.conv.is-activa { background: var(--niebla); }
.conv-ini { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font: 700 15px/1 var(--f-txt); transition: scale var(--duration-fast, 250ms) var(--ease-b), background-color .25s, color .25s; }
.conv:hover .conv-ini { scale: 1.08; }
.conv-cuerpo { min-width: 0; align-self: center; }
.conv-l1, .conv-l2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.conv-l1 strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 17px/1.3 var(--f-txt); color: var(--texto); }
.conv-l1 time { flex: none; font: 500 13px/1 var(--f-txt); color: var(--tenue2); }
.conv-l2 { margin-top: 3px; }
.conv-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; color: var(--tenue); }
.conv.is-noleida .conv-l1 strong { color: var(--teal); }
.conv.is-noleida .conv-l1 time { color: var(--coral); font-weight: 700; }
.conv.is-noleida .conv-txt { color: var(--texto); font-weight: 600; }
.conv-badge { flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--pildora); background: var(--coral); color: #fff; font: 700 13px/1 var(--f-txt); animation: pop var(--duration-very-slow, 500ms) var(--ease-b) both; }
.conv-asig { display: inline-block; margin-top: 6px; font: 600 13px/1 var(--f-txt); color: var(--teal-med); }
.lista-vacia { padding: 52px 22px; text-align: center; color: var(--tenue); font-size: 16px; }
.lista-pie { padding: 14px 20px; border-top: 1px solid var(--filete); }
.lista-pie .btn { width: 100%; --btn-bg: var(--coral); --btn-tx: #fff; --btn-fill: var(--teal); }

/* tonos planos por contacto (los pone bandeja.js) */
.av-0 { background: #dcebe8; color: #005453; }
.av-1 { background: #fde6e4; color: #a83a34; }
.av-2 { background: #f6ead4; color: #855714; }
.av-3 { background: #e2e9f3; color: #2a4a7a; }
.av-4 { background: #e9e4f1; color: #4f3f7d; }
.av-5 { background: #e4ecd9; color: #4d6123; }
.conv.is-activa .conv-ini { background: var(--teal); color: #fff; }

/* columna 2: el hilo */
.col-hilo { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fondo); overflow: hidden; }
.hilo-vacio { position: relative; flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: var(--tenue); }
.hilo-vacio h2 { font-size: 36px; }
.hilo-vacio p { font-size: 17px; }
.orbes-vacio { position: relative; inset: auto; width: 260px; height: 200px; margin-bottom: 18px; }
.orbes-vacio span:nth-child(1) { width: 170px; height: 170px; left: 0; top: 20px; background: var(--niebla2); animation-duration: 8s; }
.orbes-vacio span:nth-child(2) { width: 170px; height: 170px; right: 0; top: 0; border: 1px solid var(--teal); animation-duration: 10s; animation-delay: -4s; }
.orbes-vacio span:nth-child(3) { width: 34px; height: 34px; left: 118px; top: 82px; background: var(--coral); animation-duration: 6s; }
.hilo-cab { position: relative; display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 12px 18px 12px 26px; background: var(--panel); border-bottom: 1px solid var(--filete); }
.hilo-quien { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hilo-quien strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 22px/1.15 var(--f-tit); color: var(--teal); letter-spacing: -.03em; }
.hilo-quien span { font: 500 13.5px/1.2 var(--f-mono); color: var(--tenue); }
.hilo-cab .menu { top: calc(100% - 6px); right: 14px; }
.ventana { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pildora); font: 600 14px/1 var(--f-txt); white-space: nowrap; }
.ventana::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ventana.is-abierta { background: var(--verde-cl); color: var(--verde); }
.ventana.is-abierta::before { animation: late 1.8s ease-in-out infinite; }
.ventana.is-cerrada { background: var(--ambar-cl); color: var(--ambar); }
.solo-movil, .solo-estrecho { display: none; }

.mensajes { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 28px 36px; }
.mensajes .msg { position: relative; max-width: min(580px, 78%); padding: 12px 17px 9px; border-radius: 24px; background: var(--panel); color: var(--texto); font-size: 16.5px; line-height: 1.5; text-align: left; margin: 0; animation: burbuja var(--duration-slow, 400ms) var(--ease-b) both; }
.mensajes .msg-in  { align-self: flex-start; border-bottom-left-radius: 6px; transform-origin: 0 100%; }
.mensajes .msg-out { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--teal); color: #e6f2f0; transform-origin: 100% 100%; }
.mensajes .msg-in + .msg-out, .mensajes .msg-out + .msg-in { margin-top: 12px; }
.mensajes .msg-api { outline: 1px dashed var(--teal-med); outline-offset: -1px; }
.mensajes .msg-out.msg-api { background: var(--teal-med); outline-color: rgba(255, 255, 255, .35); }
.mensajes .msg.is-fallido { background: var(--rojo-cl); color: var(--texto); }
.msg-tag { display: block; margin-bottom: 5px; font: 700 11.5px/1 var(--f-txt); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.msg-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-img img { display: block; max-width: 300px; max-height: 300px; margin: 2px 0 6px; border-radius: 16px; }
.msg-doc { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 9px 14px; border: 1px solid currentColor; border-radius: var(--pildora); color: inherit; font-size: 15px; }
.mensajes .msg audio, .mensajes .msg video { display: block; max-width: 100%; margin: 2px 0 6px; }
.msg-pie { display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin-top: 4px; font: 500 12.5px/1 var(--f-txt); opacity: .65; }
.mensajes .msg-out .msg-pie { opacity: .8; }
.msg-quien { font-weight: 700; }
.msg-estado { letter-spacing: -.12em; font-size: 13.5px; }
.est-read { color: #8fe0d4; }
.mensajes .msg-in .est-read { color: var(--teal-med); }
.est-failed { color: var(--rojo); }
.mensajes .msg-error { margin-top: 5px; font-size: 14px; color: var(--rojo); }

.redactar { padding: 14px 20px 18px; background: var(--panel); border-top: 1px solid var(--filete); }
.redactar .ayuda { margin: 4px 6px; }
.redactar-form { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border: 1px solid var(--filete); border-radius: 28px; background: var(--fondo); outline: 3px solid transparent; transition: border-color .2s, outline-color .2s; }
.redactar-form:focus-within { border-color: var(--teal); outline-color: var(--teal-cl); }
.redactar-form textarea { flex: 1; max-height: 160px; padding: 11px 8px; border: 0; background: transparent; font-size: 17px; }
.redactar-form textarea:focus { outline: 0; background: transparent; }
.redactar-form .btn-primario { width: 48px; height: 48px; padding: 0; border-radius: 50%; flex: none; }
.ventana-cerrada { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 11px 16px; border-radius: var(--r-s); background: var(--ambar-cl); color: var(--ambar); font-size: 15px; }
.ventana-cerrada .enlace { color: var(--ambar); font-weight: 700; }

/* columna 3: ficha con datos tipo «etiqueta arriba, valor abajo» */
.col-ficha { overflow-y: auto; padding: 26px 24px; background: var(--panel); border-left: 1px solid var(--filete); }
.col-ficha h2 { font-size: 24px; }
.col-ficha .datos { grid-template-columns: 1fr; }
.col-ficha .datos dt { padding: 14px 0 3px; border: 0; font-size: 13.5px; color: var(--tenue); }
.col-ficha .datos dd { padding: 0 0 14px; font-size: 18px; color: var(--teal); }

/* modales y toast (el kit mueve; aquí solo aspecto) */
.t-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(0, 61, 60, 0); pointer-events: none; transition: background var(--modal-open-dur, 250ms) ease; }
.t-backdrop:has(.t-modal.is-open) { background: rgba(0, 61, 60, .4); pointer-events: auto; }
.modal { width: 100%; max-width: 500px; max-height: 90dvh; overflow-y: auto; padding: 30px; border-radius: 30px; background: var(--panel); }
.modal-chico { max-width: 400px; }
.modal h2 { font-size: 26px; margin-bottom: 8px; }
.plantilla-vista { min-height: 2.6em; margin-top: 12px; padding: 13px 16px; border-radius: var(--r-s); background: var(--fondo); white-space: pre-wrap; font-size: 16px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; translate: -50% 0; padding: 14px 24px; border-radius: var(--pildora); background: var(--teal); color: #fff; font: 600 15.5px/1.3 var(--f-txt); pointer-events: none; }
.toast-error { background: var(--rojo); }

/* aviso «registra tu huella» (cuenta) */
.huella-aviso { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-bottom: 22px; padding: 22px 24px; border-radius: var(--r); background: var(--teal-cl); }
.huella-aviso .sello { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; }
.huella-aviso strong { display: block; font: 500 20px/1.2 var(--f-tit); color: var(--teal); }
.huella-aviso p { color: var(--texto2); font-size: 15.5px; margin-top: 4px; }
.sello { display: grid; place-items: center; }

@keyframes sube      { from { opacity: 0; translate: 0 var(--distance-medium, 12px); filter: blur(var(--blur-medium, 3px)); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes burbuja   { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes pop       { 0% { scale: 0; } 60% { scale: 1.25; } 100% { scale: 1; } }
@keyframes empuje    { 0%, 100% { translate: 0 0; } 40% { translate: 0 -3px; } }
@keyframes flota     { from { translate: 0 0; } to { translate: 0 -16px; } }
@keyframes late      { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.7; opacity: .45; } }
@keyframes entra-orbe { from { scale: .6; opacity: 0; } to { scale: 1; opacity: 1; } }

/* ---------------------------------------------------------------------
   Angosto
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .bandeja, .bandeja:has(.col-ficha:not(.oculto)) { grid-template-columns: 350px minmax(0, 1fr); }
  .col-ficha { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; display: none; z-index: 5; }
  .col-ficha.is-visible { display: block; }
  .solo-estrecho { display: flex; }
}
@media (max-width: 860px) {
  body.acceso .wrap { grid-template-columns: 1fr; }
  .acceso-lado { padding: 30px 24px 34px; gap: 18px; }
  .acceso-lado h1 { font-size: 38px; margin-top: 14px; }
  .acceso-lado p, .acceso-renglones, .acceso-lado .orbes span:nth-child(n+2) { display: none; }
  .acceso-lado .orbes span:nth-child(1) { width: 320px; height: 320px; left: auto; right: -120px; bottom: -200px; }
  .acceso-cuerpo { padding: 28px 18px 40px; }
  .acceso-cuerpo::before { width: 520px; height: 520px; right: -300px; }
  #login { padding: 30px 24px 24px; }
  .saludo { font-size: 28px; }
  body.acceso .firma { position: static; text-align: center; }
}
@media (max-width: 760px) {
  .barra { gap: 12px; padding: 0 12px; }
  .marca span { display: none; }
  .tabs-nav a { padding: 0 12px; font-size: 14px; height: 36px; }
  .bandeja, .bandeja:has(.col-ficha:not(.oculto)) { grid-template-columns: 1fr; }
  .col-hilo { display: none; }
  .bandeja.hilo-abierto .col-lista { display: none; }
  .bandeja.hilo-abierto .col-hilo { display: flex; }
  .solo-movil { display: inline-flex; }
  .mensajes { padding: 16px; }
  .mensajes .msg { max-width: 88%; }
  .hilo-quien strong { font-size: 20px; }
  .col-ficha { width: 100%; }
  .form-rejilla { grid-template-columns: 1fr; }
  .pagina { padding: 26px 16px 44px; }
  .pagina-cab h1 { font-size: 34px; }
  .metodos { grid-template-columns: 1fr; }
  .metodo { min-height: 0; flex-direction: row; align-items: center; }
  .metodo .txt { margin-top: 0; }
  .huella-aviso { grid-template-columns: auto 1fr; }
  .huella-aviso .btn { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}