/* NotiYa — tokens del manual de marca v1.0 */
:root{
  --marino:#14235C;
  --acento:#3F6AE8;
  --azul-claro:#7FA6FF;
  --azul-palido:#D6E2FF;
  --fondo:#F3F2F2;
  --tinta:#201E1D;
  --blanco:#FFFFFF;
  --regla:#201E1D;
  --ground:var(--fondo);
  --texto:var(--tinta);
  --superficie:var(--blanco);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:var(--marino);
    --texto:var(--blanco);
    --superficie:#0D1740;
    --regla:#2E3F79;
  }
}
:root[data-theme="dark"]{
  --ground:var(--marino); --texto:var(--blanco);
  --superficie:#0D1740;   --regla:#2E3F79;
}
:root[data-theme="light"]{
  --ground:var(--fondo);  --texto:var(--tinta);
  --superficie:var(--blanco); --regla:var(--tinta);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--texto);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  text-align:left;
}
h1,h2,h3{
  font-weight:700;
  letter-spacing:-0.04em;
  text-wrap:balance;
  margin:0 0 12px;
  text-align:left;
}
h1{font-size:clamp(28px,5vw,44px)}
h2{font-size:clamp(22px,3.4vw,30px)}
p{margin:0 0 14px;max-width:46ch}

a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
}

/* nada se redondea */
.btn,input,select,textarea,.tarjeta,.panel-lat{border-radius:0}

/* Botones: reglas robustas.
   Un <button> no hereda font-family ni color del documento, asi que hay que
   darselos explicitamente; si no, el navegador usa los suyos y la variante
   de linea acaba con el relleno de .btn y su propio color encima. Ese era
   el bug del boton "Subir imagen": marino sobre marino, ilegible. */
.btn{
  display:inline-block;
  padding:12px 20px;
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  border:2px solid var(--acento);
  background:var(--acento);
  color:var(--blanco);
  cursor:pointer;
  text-align:center;
  -webkit-appearance:none;
  appearance:none;
}
.btn:hover{background:var(--marino);border-color:var(--marino);color:var(--blanco);text-decoration:none}

/* La variante de linea repite background Y color juntos: si solo se declara
   uno de los dos, basta con que la otra regla gane para que queden colores
   del mismo tono uno sobre otro. */
.btn--linea,
.btn.btn--linea,
button.btn--linea,
a.btn--linea{
  background:transparent;
  background-color:transparent;
  color:var(--texto);
  border-color:var(--regla);
}
.btn--linea:hover,
.btn.btn--linea:hover,
button.btn--linea:hover,
a.btn--linea:hover{
  background:var(--acento);
  background-color:var(--acento);
  color:var(--blanco);
  border-color:var(--acento);
}

/* Botón pequeño, para barras y cabeceras de modal */
.btn-s{padding:8px 14px;font-size:13px}

label{display:block;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px}
input,select,textarea{
  width:100%;padding:11px 12px;font-size:15px;font-family:inherit;
  border:2px solid var(--regla);background:var(--superficie);color:var(--texto);
}

.aviso{border:2px solid var(--regla);padding:12px 14px;margin-bottom:16px;
  background:var(--azul-palido);color:var(--marino)}
.aviso--error{background:#FFE8E6;border-color:#8C1D18;color:#8C1D18}
.aviso--ok{background:#E4F3EA;border-color:#136B3C;color:#136B3C}

/* Campo de contraseña con el botón de ver/ocultar dentro */
.clave{position:relative;display:flex;align-items:center}
.clave input{width:100%;padding-right:46px}
.clave-ver{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:calc(100% - 6px);
  border:0;background:none;cursor:pointer;color:var(--texto);opacity:.62;padding:0;
}
.clave-ver:hover{opacity:1}
.clave-ver svg{width:19px;height:19px;display:block}
.clave-ver svg[hidden]{display:none}
.campo__pista{font-size:12.5px;opacity:.72;margin:5px 0 0}
.campo select{
  width:100%;font:inherit;font-size:15px;padding:10px 12px;
  border:2px solid var(--regla);background:var(--superficie);color:var(--texto);
  border-radius:0;
}


/* Layout de autenticación */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 0}
.auth__caja{width:100%;max-width:420px;padding:48px 24px}
.auth__logo{margin-bottom:32px}
.auth__logo img{width:170px;height:auto}
.campo{margin-bottom:18px}

/* Layout del panel — menú vertical a la izquierda, estilo Stripe */
.app{display:grid;grid-template-columns:1fr;min-height:100vh}
@media (min-width:900px){ .app{grid-template-columns:248px 1fr} }

.panel-lat{
  background:var(--marino);color:var(--blanco);
  padding:20px 16px;display:flex;flex-direction:column;gap:4px;
}
@media (min-width:900px){ .panel-lat{position:sticky;top:0;height:100vh} }
.panel-lat__logo img{width:150px;height:auto;margin-bottom:24px}
.menu__enlace{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;color:var(--azul-palido);font-size:14px;font-weight:400;
}
.menu__enlace:hover{background:#1B2E6F;color:var(--blanco);text-decoration:none}
.menu__enlace.activo{background:var(--acento);color:var(--blanco);font-weight:700}
.menu__enlace svg{width:18px;height:18px;flex:none}

.saldo{margin-top:auto;border-top:2px solid #2E3F79;padding-top:16px}
.saldo__cifra{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.saldo__etq{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--azul-claro)}

.contenido{padding:28px 20px 64px;max-width:1040px}
@media (min-width:900px){ .contenido{padding:40px 32px 80px} }

.tarjeta{border:2px solid var(--regla);background:var(--superficie);padding:22px}
.vacio{border:2px dashed var(--regla);padding:40px 24px;background:transparent}

.idiomas{display:flex;gap:8px;margin-top:18px}
.idiomas a{font-size:11px;font-weight:700;letter-spacing:.16em;
  padding:4px 8px;border:2px solid var(--regla);color:var(--texto)}
.idiomas a.activo{background:var(--acento);border-color:var(--acento);color:var(--blanco)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* Tablas de datos */
.tabla-scroll{overflow-x:auto;border:2px solid var(--regla)}
.tabla{width:100%;border-collapse:collapse;min-width:520px;background:var(--superficie)}
.tabla th,.tabla td{padding:10px 12px;text-align:left;border-bottom:2px solid var(--regla)}
.tabla th{
  font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  background:var(--azul-palido);color:var(--marino);
}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--azul-palido)}


/* Buzon de WhatsApp */
.buzon{display:grid;gap:0;border:2px solid var(--regla);grid-template-columns:1fr;align-items:stretch}
@media(min-width:820px){.buzon{grid-template-columns:280px 1fr}}
.buzon__lista{border-bottom:2px solid var(--regla);max-height:340px;overflow-y:auto;background:var(--superficie)}
@media(min-width:820px){
  /* Sin max-height fijo: con una altura tope, cuando el hilo crecia mas que
     la lista quedaba un hueco a la izquierda SIN el borde derecho, y la
     linea negra del recuadro se veia cortada a media caja.
     Ahora la lista estira hasta donde llegue la fila del grid y hace su
     propio scroll dentro. */
  .buzon__lista{
    border-bottom:0;border-right:2px solid var(--regla);
    max-height:none;height:100%;
  }
}
.buzon__item{display:block;padding:11px 13px;border-bottom:2px solid var(--regla);color:var(--texto)}
.buzon__item:hover{background:var(--azul-palido);text-decoration:none}
.buzon__item.activo{background:var(--azul-palido);border-left:4px solid var(--acento)}
.buzon__cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.buzon__pill{background:var(--acento);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;
  font-variant-numeric:tabular-nums}
.buzon__prev{font-size:13px;opacity:1;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buzon__meta{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:1;margin-top:3px}
.buzon__chat{display:flex;flex-direction:column;min-height:380px;background:var(--superficie)}
.buzon__titulo{padding:12px 14px;border-bottom:2px solid var(--regla);display:flex;gap:10px;
  align-items:baseline;flex-wrap:wrap}
.buzon__hilo{flex:1;padding:14px;overflow-y:auto;max-height:440px;display:flex;flex-direction:column;gap:9px}
.msj{max-width:78%;padding:9px 12px;border:2px solid var(--regla)}
.msj--suyo{align-self:flex-start;background:var(--fondo)}
.msj--mio{align-self:flex-end;background:var(--azul-palido);border-color:var(--acento)}
.msj__txt{font-size:14px;line-height:1.45}
.msj__hora{font-size:10px;opacity:1;margin-top:3px;font-variant-numeric:tabular-nums}
.buzon__form{display:flex;gap:8px;padding:12px 14px;border-top:2px solid var(--regla);align-items:flex-end}
.buzon__form textarea{flex:1;resize:vertical}
.buzon__nota{font-size:12px;padding:0 14px 12px;margin:0;opacity:1}


/* Botón de Google: colores fijos, no heredados del tema.
   Con los tokens quedaba marino sobre marino y no se leía. */
.btn--google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 18px;margin-bottom:18px;
  background:#FFFFFF;color:#201E1D;border:2px solid #201E1D;
  font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;
}
.btn--google:hover{background:#F3F2F2;color:#201E1D;text-decoration:none}
.btn--google svg{flex:none}

/* En tema oscuro el botón sigue siendo claro: es la guía de marca de Google
   y además garantiza contraste sobre el fondo marino. */
@media (prefers-color-scheme: dark){
  .btn--google{background:#FFFFFF;color:#201E1D;border-color:#FFFFFF}
  .btn--google:hover{background:#E8ECF7}
}
:root[data-theme="dark"] .btn--google{background:#FFFFFF;color:#201E1D;border-color:#FFFFFF}
:root[data-theme="dark"] .btn--google:hover{background:#E8ECF7}

.auth__o{
  display:flex;align-items:center;gap:12px;
  margin:0 0 18px;font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;opacity:1;
}
.auth__o::before,.auth__o::after{
  content:"";flex:1;height:2px;background:var(--regla);opacity:1;
}


/* Centro de ayuda */
.ayuda-rejilla{
  display:grid;gap:16px;margin:24px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.ayuda-tarjeta{
  display:block;padding:20px;border:2px solid var(--regla);
  background:var(--superficie);color:var(--texto);
}
.ayuda-tarjeta:hover{background:var(--azul-palido);text-decoration:none;border-color:var(--acento)}
.ayuda-tarjeta svg{width:26px;height:26px;color:var(--acento);margin-bottom:12px;display:block}
.ayuda-tarjeta h2{font-size:17px;margin:0 0 6px;letter-spacing:-0.03em}
.ayuda-tarjeta p{font-size:14px;margin:0 0 12px;max-width:none;opacity:1}
.ayuda-min{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--acento);font-weight:700;
}

.ayuda-guia{max-width:64ch;margin-top:26px}
.ayuda-bloque{padding-bottom:22px;margin-bottom:22px;border-bottom:2px solid var(--regla)}
.ayuda-bloque:last-child{border-bottom:0}
.ayuda-bloque h2{font-size:19px;margin:0 0 10px;letter-spacing:-0.03em}
.ayuda-bloque p{max-width:64ch;margin:0 0 10px}
.ayuda-bloque code{
  background:var(--azul-palido);color:var(--marino);
  padding:1px 6px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ayuda-pasos{margin:12px 0 0;padding-left:0;list-style:none;counter-reset:paso}
.ayuda-pasos li{
  counter-increment:paso;position:relative;
  padding:0 0 12px 40px;max-width:62ch;
}
.ayuda-pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:var(--marino);color:#fff;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.ayuda-pie{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;
  padding-top:22px;border-top:2px solid var(--regla)}


/* Botón flotante de WhatsApp. Verde de marca de WhatsApp, no de NotiYa:
   es el color que la gente reconoce y por eso funciona. */
.wa-flotante{
  position:fixed;right:20px;bottom:20px;z-index:900;
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;background:#25D366;color:#fff;
  border:2px solid #128C7E;font-weight:700;font-size:15px;
  text-decoration:none;
}
.wa-flotante:hover{background:#128C7E;color:#fff;text-decoration:none}
.wa-flotante:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.wa-flotante svg{width:24px;height:24px;flex:none}
/* En móvil solo el icono: el texto taparía media pantalla. */
@media (max-width:640px){
  .wa-flotante{right:14px;bottom:14px;padding:14px;gap:0}
  .wa-flotante__txt{display:none}
}
@media print{.wa-flotante{display:none}}


/* Estadisticas */
.periodos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.periodos a{
  padding:7px 14px;border:2px solid var(--regla);color:var(--texto);
  font-size:13px;font-weight:700;
}
.periodos a:hover{background:var(--azul-palido);text-decoration:none}
.periodos a.activo{background:var(--acento);border-color:var(--acento);color:#fff}

.kpis{display:grid;gap:14px;margin-bottom:24px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{border:2px solid var(--regla);background:var(--superficie);padding:14px}
.kpi b{display:block;font-size:24px;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.kpi span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:1}

.barra-fila{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.barra-etq{font-size:13px;min-width:140px}
.barra{flex:1;height:12px;background:var(--fondo);border:2px solid var(--regla);
  display:block;position:relative}
.barra__in{display:block;height:100%}
.barra-val{font-size:13px;min-width:58px;text-align:right}

/* Grafico de barras hecho a mano: sin librerias, sin JS bloqueante */
.grafico{display:flex;align-items:flex-end;gap:3px;height:170px;
  border:2px solid var(--regla);background:var(--superficie);
  padding:12px 12px 0;margin-bottom:26px;overflow-x:auto}
.grafico__col{flex:1 0 22px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%}
.grafico__barra{width:100%;background:var(--acento);display:block;min-height:3px}
.grafico__dia{font-size:9px;opacity:1;margin-top:5px;white-space:nowrap;
  transform:rotate(-45deg);transform-origin:center;height:22px}

.etiqueta{font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  background:var(--marino);color:#fff;padding:2px 7px;margin-left:7px}


/* Selector de canales de la campana omnicanal */
.canales{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:14px}
.canal-op{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:14px;border:2px solid var(--regla);background:var(--superficie);
  cursor:pointer;position:relative;
}
.canal-op:hover{background:var(--azul-palido)}
.canal-op.activo{border-color:var(--acento);background:var(--azul-palido)}
.canal-op input{width:17px;height:17px;accent-color:var(--acento);margin:0 0 4px}
.canal-op svg{width:22px;height:22px;color:var(--acento)}
.canal-op__nom{font-weight:700;font-size:15px}
.canal-op__precio{font-size:12px;opacity:1;font-variant-numeric:tabular-nums}

.check-linea{
  display:flex;align-items:center;gap:9px;margin-bottom:7px;
  text-transform:none;letter-spacing:0;font-weight:400;font-size:15px;cursor:pointer;
}
.check-linea input{width:auto;margin:0}

.wa-preview{
  border:2px solid var(--regla);background:var(--fondo);
  padding:12px 14px;margin:0 0 14px;font-size:14px;white-space:pre-wrap;
  max-width:56ch;
}

.sms-cuenta{font-size:13px;margin:6px 0 0;font-variant-numeric:tabular-nums;opacity:1}
.sms-cuenta--alto{color:#8C1D18;font-weight:700;opacity:1}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{
  background:var(--azul-palido);color:var(--marino);
  padding:3px 9px;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}


/* ---------------------------------------------------------- Biblioteca */
.bib-barra{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 18px;
}
.bib-buscar{flex:1 1 220px;max-width:340px;margin:0}
.bib-buscar input{width:100%;margin:0}
.bib-uso{font-size:13px;opacity:1;font-variant-numeric:tabular-nums}

.bib-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.bib-card{
  margin:0;border:2px solid var(--regla);background:var(--fondo);
  display:flex;flex-direction:column;
}
.bib-card img{
  width:100%;height:150px;object-fit:contain;cursor:zoom-in;
  background:repeating-conic-gradient(#0000 0 25%, rgba(128,128,128,.10) 0 50%) 0 0/16px 16px;
  border-bottom:2px solid var(--regla);
}
.bib-card figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.bib-card strong{
  font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bib-card .num{font-size:12px;opacity:1;font-variant-numeric:tabular-nums}
.bib-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.bib-acciones button{
  background:none;border:0;padding:0;font:inherit;font-size:12px;
  color:var(--texto);opacity:1;cursor:pointer;text-decoration:underline;
}
.bib-acciones button:hover{opacity:1}
.bib-acciones .peligro{color:#8C1D18;opacity:1}
.bib-acciones form{margin:0}
.bib-acciones .etiqueta{font-size:11px;opacity:1;text-transform:uppercase;letter-spacing:.08em}

.bib-lightbox{
  display:none;position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.82);align-items:center;justify-content:center;
  padding:32px;cursor:zoom-out;
}
.bib-lightbox img{max-width:100%;max-height:100%;object-fit:contain}

/* Modal de biblioteca dentro del editor */
.bib-modal{
  position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.6);
  align-items:center;justify-content:center;padding:24px;
}
.bib-modal__caja{
  background:var(--superficie);border:2px solid var(--regla);
  width:min(860px,100%);max-height:82vh;display:flex;flex-direction:column;
}
.bib-modal__cab{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:2px solid var(--regla);
}
.bib-modal__cab input[type=search]{flex:1 1 160px;margin:0;min-width:0}
.bib-modal__x{
  background:none;border:0;font-size:26px;line-height:1;cursor:pointer;
  color:var(--texto);padding:0 4px;
}
.bib-modal__grid{
  overflow-y:auto;padding:16px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.bib-modal__item{
  background:none;border:2px solid transparent;padding:6px;cursor:pointer;
  display:flex;flex-direction:column;gap:6px;font:inherit;color:var(--texto);
}
.bib-modal__item:hover,.bib-modal__item:focus-visible{border-color:var(--acento)}
.bib-modal__item img{width:100%;height:96px;object-fit:contain}
.bib-modal__item span{
  font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;
}

/* Pares de campo propio en la ficha de contacto */
.campo-par{display:flex;gap:10px;margin-bottom:8px}
.campo-par input{margin:0}
.campo-par input:first-child{flex:0 0 34%}
.campo-par input:last-child{flex:1}
.check-linea{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:15px}
.check-linea input{margin:0;width:auto}

/* SunEditor: que respete el ancho del panel y no desborde en movil */
.sun-editor{max-width:100%}
.sun-editor .se-wrapper{background:#fff}

@media (max-width:640px){
  .bib-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .bib-card img{height:112px}
  .campo-par{flex-direction:column;gap:6px}
  .campo-par input:first-child{flex:1}
}


/* El sidebar del panel es SIEMPRE marino, en tema claro y en oscuro. Los
   botones de linea que viven dentro no pueden usar var(--texto): en tema
   claro eso es tinta casi negra, y sobre marino daba 1.13:1 (invisible).
   Dentro del sidebar el texto es blanco y punto. */
.panel-lat .btn--linea,
.panel-lat a.btn--linea,
aside .btn--linea{
  color:var(--blanco);
  border-color:var(--azul-claro);
  background:transparent;
  background-color:transparent;
}
.panel-lat .btn--linea:hover,
.panel-lat a.btn--linea:hover,
aside .btn--linea:hover{
  background:rgba(127,166,255,.18);
  background-color:rgba(127,166,255,.18);
  color:var(--blanco);
  border-color:var(--azul-claro);
}


/* El modal usa var(--fondo) para su caja, y ese token NO cambia con el tema:
   es siempre el gris claro. En tema oscuro var(--texto) es blanco, asi que
   el boton y la X quedaban blancos sobre gris claro (1.12:1). La caja pasa a
   var(--superficie), que si sigue al tema, y aqui se fija el color del texto
   para que no dependa de en que tema se abra. */
.bib-modal__caja{color:var(--texto)}
.bib-modal__cab .btn--linea{
  color:var(--texto);
  border-color:var(--regla);
  background:transparent;
  background-color:transparent;
}
.bib-modal__cab .btn--linea:hover{
  background:var(--acento);
  background-color:var(--acento);
  color:var(--blanco);
  border-color:var(--acento);
}
.bib-modal__x{color:var(--texto)}
.bib-modal__x:hover{color:var(--acento)}


/* ------------------------------------------- Previsualizacion de campana */
.prev-modal{
  position:fixed;inset:0;z-index:960;background:rgba(0,0,0,.6);
  align-items:center;justify-content:center;padding:20px;
}
.prev-modal__caja{
  background:var(--superficie);color:var(--texto);
  border:2px solid var(--regla);
  width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;
}
.prev-modal__cab{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:2px solid var(--regla);
}
.prev-modal__cab .num{margin-left:auto;font-size:13px;opacity:1;font-variant-numeric:tabular-nums}
.prev-modal__x{
  background:none;border:0;font-size:26px;line-height:1;cursor:pointer;
  color:var(--texto);padding:0 4px;
}
.prev-modal__x:hover{color:var(--acento)}
.prev-modal__cuerpo{overflow-y:auto;padding:16px;flex:1}
.prev-modal__pie{
  border-top:2px solid var(--regla);padding:14px 16px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;
}

.prev-para{margin:0 0 12px;font-size:15px}
.prev-para .num{font-variant-numeric:tabular-nums;opacity:1}
.prev-asunto{
  padding:10px 12px;margin-bottom:12px;
  border:2px solid var(--regla);background:var(--ground);font-size:15px;
}
/* El correo del cliente se ve sobre blanco siempre: es como llega a la
   bandeja de entrada, no como se ve en el panel. */
.prev-html{
  width:100%;min-height:300px;border:2px solid var(--regla);
  background:#FFFFFF;display:block;
}
.prev-texto{
  white-space:pre-wrap;word-break:break-word;margin:0;
  padding:14px;border:2px solid var(--regla);background:var(--ground);
  font-family:inherit;font-size:15px;line-height:1.5;
}
.prev-modal__cuerpo .num{font-size:13px;opacity:1;margin-top:8px}

.prev-prueba{flex:1 1 260px;min-width:220px}
.prev-prueba__et{display:block;font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:6px;opacity:1}
.prev-prueba__fila{display:flex;gap:8px}
.prev-prueba__fila input{margin:0;flex:1;min-width:0}
.prev-prueba__ayuda{font-size:12px;opacity:1;margin:6px 0 0;max-width:46ch}

@media (max-width:640px){
  .prev-modal{padding:0}
  .prev-modal__caja{max-height:100vh;width:100%;border:0}
  .prev-modal__pie{flex-direction:column}
  .prev-modal__pie .btn{width:100%}
  .prev-prueba{width:100%}
}


/* ---------- Barra de impersonacion (superadmin viendo como cliente) ----------
   Ambar, no marino: tiene que romper con la paleta del panel para que no se
   lea como un elemento mas de la interfaz. Empuja el contenido con
   padding-bottom en .contenido en vez de flotar encima, porque tapando el
   pie escondia botones de guardar. */
.barra-imperso{
  position:fixed;left:0;right:0;bottom:0;z-index:940;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:12px 18px;
  background:#8A5A00;color:#fff;
  border-top:3px solid #FFC400;
  font-size:14px;font-weight:700;
}
.barra-imperso__txt{color:#fff}
.barra-imperso__btn{
  display:inline-block;
  padding:8px 16px;
  background:#fff;color:#8A5A00;
  border:2px solid #fff;
  font-weight:700;font-size:13px;line-height:1.2;
  text-decoration:none;
}
.barra-imperso__btn:hover,
.barra-imperso__btn:focus-visible{
  background:#FFC400;border-color:#FFC400;color:#201E1D;text-decoration:none;
}
/* Con la barra puesta, el contenido necesita hueco al final para que su
   ultimo boton no quede debajo, y el globo de WhatsApp sube para no
   solaparse con ella. */
body.con-imperso .contenido{padding-bottom:96px}
body.con-imperso .wa-flotante{bottom:92px}
@media (max-width:520px){
  .barra-imperso{font-size:13px;padding:10px 14px;gap:10px}
  body.con-imperso .contenido{padding-bottom:130px}
  body.con-imperso .wa-flotante{bottom:124px}
}
@media print{.barra-imperso{display:none}}


/* ---------- Buzon: numero que atiende y adjuntos (2026-08-11) ---------- */

/* Que numero recibe aqui. Sin esto el cliente no sabe a cual decirle a su
   gente que escriba para que le llegue a este buzon. */
.buzon__numero{
  margin:-6px 0 16px;font-size:14px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.buzon__numero strong{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.buzon__numero--sin{color:#8A5A00}

/* Adjuntos dentro del hilo */
.msj__img{display:block;max-width:100%;height:auto;border:2px solid var(--regla);margin-bottom:6px}
.msj__audio{display:block;width:min(260px,100%);margin-bottom:6px}
.msj__video{display:block;max-width:100%;border:2px solid var(--regla);margin-bottom:6px}
.msj__doc{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;margin-bottom:6px;
  border:2px solid var(--regla);background:var(--superficie);
  font-size:13px;font-weight:700;text-decoration:none;color:var(--texto);
  word-break:break-word;
}
.msj__doc:hover{background:var(--azul-palido);text-decoration:none}
.msj__doc svg{width:18px;height:18px;flex:none}

/* El clip de adjuntar: el input nativo es feo e inconsistente entre
   navegadores, asi que se oculta y la etiqueta hace de boton. */
.buzon__clip{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 13px;
  border:2px solid var(--regla);background:var(--superficie);
  font-size:13px;font-weight:700;cursor:pointer;
  white-space:nowrap;margin:0;
  text-transform:none;letter-spacing:normal;
}
.buzon__clip:hover{background:var(--azul-palido)}
.buzon__clip:focus-within{outline:3px solid var(--acento);outline-offset:2px}
.buzon__clip svg{width:17px;height:17px;flex:none}
.buzon__clip input[type=file]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* En movil el clip se queda solo con el icono para que quepa el envio. */
@media (max-width:520px){
  .buzon__clip-txt{display:none}
  .buzon__clip{padding:11px}
}

/* Confirmacion de que el archivo entro */
.buzon__archivo{
  margin:0;padding:8px 14px 12px;
  font-size:13px;font-weight:700;
  border-top:0;
}
.buzon__archivo{color:var(--texto)}


/* ---------- Campana de mensajes sin leer (2026-08-11) ---------- */
.barra-sup{display:flex;justify-content:flex-end;align-items:center;
  gap:10px;margin:-6px 0 14px;min-height:34px}

.campana{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border:2px solid var(--regla);background:var(--superficie);
  color:var(--texto);text-decoration:none;
}
.campana:hover,.campana:focus-visible{background:var(--azul-palido);text-decoration:none}
.campana svg{width:20px;height:20px}

/* Con mensajes pendientes la campana deja de ser decorativa */
.campana--con{border-color:var(--acento);color:var(--acento)}

.campana__num{
  position:absolute;top:-9px;right:-9px;
  min-width:20px;height:20px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--acento);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
  border:2px solid var(--superficie);
}
/* Ambar cuando ademas la ventana de 24h sigue abierta: es lo que urge,
   porque responder ahi todavia no cuesta. */
.campana__num--urge{background:#8A5A00}

@media print{.barra-sup{display:none}}


/* ============ Mesa de ayuda: buzón ampliado (2026-08-11) ============ */

.buzon-cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.buzon-cab h1{margin-bottom:6px}
.buzon-cab__acc{display:flex;gap:8px}

/* --- Filtros --- */
.buzon-filtros{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:12px;margin-bottom:14px;
  border:2px solid var(--regla);background:var(--superficie);
}
.buzon-filtros input[type=search]{flex:2 1 220px;padding:8px 10px;font-size:14px}
.buzon-filtros select{flex:1 1 140px;padding:8px;font-size:13px;width:auto}
.buzon-filtros__chk{display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;text-transform:none;letter-spacing:normal;margin:0}
.buzon-filtros__chk input{width:auto}

/* --- La rejilla pasa a 3 columnas: lista, hilo y ficha --- */
@media (min-width:1100px){
  .buzon{display:grid;grid-template-columns:210px 1fr;gap:0}
}
.buzon__nada{padding:16px;font-size:13px;opacity:1}

.buzon__titulo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.buzon__titulo-acc{display:flex;gap:6px}

/* --- Barra de acciones de la conversación --- */
.buzon__barra{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:10px 14px;border-bottom:2px solid var(--regla);background:var(--fondo);
}
.buzon__mini{margin:0;display:inline-flex}
.buzon__mini select{padding:6px 8px;font-size:13px;width:auto;min-width:110px}

/* --- Estados --- */
.est{font-weight:700}
.est--abierta{color:var(--acento)}
.est--en_curso{color:#8A5A00}
.est--resuelta{opacity:1}

/* --- Etiquetas --- */
.buzon__etqs{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.etq{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;font-size:11px;font-weight:700;
  background:var(--acento);color:#fff;line-height:1.5;
}
.etq--btn{border:2px solid var(--regla);background:transparent;color:var(--texto);
  cursor:pointer;font-family:inherit;padding:4px 9px}
.etq--btn.etq--on{color:#fff;border-color:transparent}
.etq__x{background:none;border:0;color:inherit;cursor:pointer;font-size:14px;
  line-height:1;padding:0 0 0 3px}
.buzon__etiquetar{display:flex;gap:5px;flex-wrap:wrap;padding:9px 14px;
  border-bottom:2px solid var(--regla)}
.etqs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}

/* --- Mensajes: cita, autor, botón responder --- */
.msj__cita{
  border-left:3px solid var(--acento);padding:4px 8px;margin-bottom:6px;
  font-size:12px;opacity:1;background:rgba(0,0,0,.04);
}
.msj__pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.msj__autor{font-size:11px;font-weight:700;opacity:1}
.msj__responder{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;
  color:var(--acento);text-decoration:underline;
}
.msj--mio .msj__responder{color:inherit}

/* --- Cita activa sobre el formulario --- */
.buzon__cita-activa{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;border-top:2px solid var(--regla);
  background:var(--azul-palido);font-size:13px;
}
.buzon__cita-activa button{background:none;border:0;font-size:20px;
  line-height:1;cursor:pointer;color:inherit;padding:0 4px}

/* --- Iconos del formulario (emoji, rápidas) --- */
.buzon__icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;
  border:2px solid var(--regla);background:var(--superficie);
  color:var(--texto);cursor:pointer;
}
.buzon__icono:hover{background:var(--azul-palido)}
.buzon__icono svg{width:19px;height:19px}

/* --- Panel de emojis --- */
.panel-emoji{
  display:flex;flex-wrap:wrap;gap:2px;
  padding:10px 14px;max-height:180px;overflow-y:auto;
  border-top:2px solid var(--regla);background:var(--superficie);
}
/* display:flex pisaba al atributo hidden y el panel salia siempre abierto. */
.panel-emoji[hidden],
.panel-rapidas[hidden],
.buzon__cita-activa[hidden],
.buzon__archivo[hidden]{display:none !important}
.emoji{
  background:none;border:0;cursor:pointer;
  font-size:22px;line-height:1;padding:4px 5px;
}
.emoji:hover{background:var(--azul-palido)}

/* --- Panel de respuestas rápidas --- */
.panel-rapidas{
  border-top:2px solid var(--regla);background:var(--superficie);
  max-height:220px;overflow-y:auto;
}
.rapida{
  display:block;width:100%;text-align:left;
  padding:10px 14px;border:0;border-bottom:1px solid var(--regla);
  background:none;cursor:pointer;font-family:inherit;font-size:13px;
}
.rapida:hover{background:var(--azul-palido)}
.rapida strong{display:block;font-size:12px;color:var(--acento)}
.rapida span{opacity:1}
.rapida-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 0;border-bottom:2px solid var(--regla);font-size:13px}
.rapida-fila strong{min-width:90px}
.rapida-fila span{flex:1 1 220px;opacity:1}

/* --- Plantilla para retomar --- */
.buzon__plantilla{padding:14px;border-top:2px solid var(--regla)}
.buzon__plantilla h3{margin:0 0 6px;font-size:15px}
.buzon__plantilla-ayuda{font-size:13px;opacity:1;max-width:62ch;margin:0 0 12px}
.buzon__plantilla-prev{font-size:13px;padding:9px;margin:10px 0;
  border-left:3px solid var(--acento);background:var(--azul-palido);white-space:pre-wrap}

/* --- Notas internas --- */
.buzon__notas{padding:14px;border-top:2px solid var(--regla);background:#FFFDF5}
:root:not([data-theme="light"]) .buzon__notas{background:rgba(255,196,0,.06)}
.buzon__notas h3{margin:0 0 4px;font-size:15px}
.buzon__notas-ayuda{font-size:12px;opacity:1;margin:0 0 12px}
.nota{border-left:3px solid #8A5A00;padding:8px 10px;margin-bottom:9px;
  background:var(--superficie)}
.nota__txt{font-size:14px;line-height:1.45}
.nota__pie{font-size:11px;opacity:1;margin-top:4px;
  display:flex;align-items:center;gap:6px}
.nota__x{background:none;border:0;cursor:pointer;font-size:15px;
  line-height:1;color:inherit;opacity:1;padding:0}
.nota__form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.nota__form textarea{flex:1 1 240px;resize:vertical}

/* --- Ficha del contacto --- */
.buzon__ficha{
  border-left:2px solid var(--regla);padding:14px;
  font-size:13px;background:var(--fondo);
}
.buzon__ficha h3{margin:0 0 10px;font-size:14px;
  text-transform:uppercase;letter-spacing:.1em;opacity:1}
.ficha__nombre{font-weight:700;font-size:15px;margin:0 0 10px}
.ficha{margin:0 0 14px}
.ficha dt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  opacity:1;margin-top:9px;font-weight:700}
.ficha dd{margin:2px 0 0;word-break:break-word}
.ficha__sin{opacity:1}
.ficha__tel{font-weight:700}
@media (max-width:1099px){.buzon__ficha{border-left:0;border-top:2px solid var(--regla)}}

/* --- Equipo --- */
.equipo__pasos{padding-left:20px;max-width:74ch;font-size:14px;line-height:1.6}
.equipo__pasos li{margin-bottom:7px}
.equipo__nota{font-size:13px;opacity:1;margin:12px 0 0}
.tu{font-size:10px;font-weight:700;background:var(--acento);color:#fff;
  padding:1px 5px;margin-left:5px;text-transform:uppercase;letter-spacing:.06em}

/* --- Ajustes del buzón --- */
.ayuda{font-size:13px;opacity:1;max-width:74ch;line-height:1.55}
.sep{border:none;border-top:2px solid var(--regla);margin:20px 0}
.campo--chk label{display:flex;align-items:center;gap:8px;
  text-transform:none;letter-spacing:normal;font-size:14px}
.campo--chk input{width:auto}
.radio{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;
  text-transform:none;letter-spacing:normal;margin-bottom:6px}
.radio input{width:auto}
.opcion{display:grid;grid-template-columns:28px 1fr;gap:8px;
  align-items:start;margin-bottom:10px}
.opcion__n{display:flex;align-items:center;justify-content:center;
  height:42px;font-weight:700;background:var(--fondo);border:2px solid var(--regla)}
.opcion textarea{grid-column:2}
.fila-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.fila-form input[type=text]{flex:1 1 200px}
.fila-form input[type=color]{width:52px;height:42px;padding:3px;flex:none}

/* --- Métricas --- */
.cifras{display:grid;gap:12px;margin:16px 0 26px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cifra{border:2px solid var(--regla);padding:14px;background:var(--superficie)}
.cifra--ojo{border-color:#8A5A00}
.cifra__n{font-size:26px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cifra--ojo .cifra__n{color:#8A5A00}
.cifra__e{font-size:12px;opacity:1;margin-top:5px}
.horas{display:flex;align-items:flex-end;gap:3px;height:150px;
  padding:10px;border:2px solid var(--regla);background:var(--superficie)}
.hora{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%}
.hora__barra{width:100%;background:var(--acento);min-height:2px}
.hora__n{font-size:10px;opacity:1;margin-top:2px}
.hora__e{font-size:10px;opacity:1}


/* ---- Ficha del contacto: icono junto al numero (2026-08-11) ----
   Antes era una columna fija de 240px. Se llevaba sitio permanente para
   algo que se mira una vez, asi que pasa a un desplegable. */
.buzon__quien{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.buzon__titulo{position:relative}

.ficha-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;
  border:2px solid var(--regla);background:var(--superficie);
  color:var(--texto);cursor:pointer;padding:0;
}
.ficha-btn:hover,.ficha-btn:focus-visible{background:var(--azul-palido);border-color:var(--acento)}
.ficha-btn svg{width:16px;height:16px}
/* Ya guardado: verde discreto, para distinguirlo de "puedes guardarlo". */
.ficha-btn--si{border-color:#1F7A4D;color:#1F7A4D}
.ficha-btn--si:hover{background:rgba(31,122,77,.08)}

.ficha-caja{
  position:absolute;right:14px;top:calc(100% - 6px);z-index:30;
  width:min(300px,calc(100vw - 40px));
  padding:14px;
  border:2px solid var(--regla);background:var(--superficie);
  box-shadow:0 6px 22px rgba(0,0,0,.14);
  font-size:13px;
}
.ficha-caja[hidden]{display:none !important}
.ficha-caja .ficha__nombre{font-weight:700;font-size:15px;margin:0 0 10px}
.ficha-caja .ficha{margin:0 0 12px}
.ficha-caja .ficha__sin{margin:0 0 12px;opacity:1}
.ficha-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ficha-form select{flex:1 1 150px;padding:7px;font-size:13px}
.ficha__pie{font-size:11px;opacity:1;margin:8px 0 0;line-height:1.45}


/* ---- El buzón usa todo el ancho (2026-08-11) ----
   El resto del panel se queda en 1040px porque un párrafo de 200 caracteres
   por línea no se lee. Un hilo de conversación es lo contrario: cuanto más
   ancho, más mensajes se ven de una vez. */
body.pantalla-buzon .contenido{max-width:none}

/* Con todo el ancho disponible, la lista puede crecer y el hilo respira. */
@media (min-width:1400px){
  body.pantalla-buzon .buzon{grid-template-columns:238px 1fr}
}

/* ---- Botón flotante de WhatsApp: solo el icono ----
   Con texto competía con el contenido del panel y en el buzón se comía
   parte del hilo. El icono de WhatsApp ya se reconoce solo. */
.wa-flotante{
  width:56px;height:56px;padding:0;gap:0;
  border-radius:50%;
  justify-content:center;
}
/* En el buzon el globo se va a la izquierda: a la derecha esta el boton de
   Enviar y le tapaba media palabra. Arriba tampoco, que ahi va la campana.
   Y pegado al borde izquierdo tapaba "Cerrar sesion" del menu lateral, asi
   que se queda justo a su derecha. */
@media (min-width:900px){
  body.pantalla-buzon .wa-flotante{right:auto;left:266px}
}
@media (max-width:899px){
  /* En movil el menu lateral no esta fijo, asi que la esquina esta libre. */
  body.pantalla-buzon .wa-flotante{right:auto;left:14px;bottom:14px}
}
.wa-flotante__txt{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.wa-flotante svg{width:28px;height:28px}


/* ---- Escribir a un número nuevo (2026-08-11) ---- */
.nueva-conv{
  border:2px solid var(--acento);background:var(--superficie);
  padding:18px;margin-bottom:14px;
}
.nueva-conv[hidden]{display:none !important}
.nueva-conv h2{margin:0 0 6px;font-size:18px}
/* Sin max-width: el aviso ocupa el ancho de la caja en vez de partirse en
   una columna estrecha con saltos de linea que no vienen a cuento. */
.nueva-conv .ayuda{margin:0 0 16px;max-width:none}


/* ---- Menú lateral plegable (2026-08-11) ----
   En el buzón el menú no hace falta y se lleva 248px del hilo. Plegado deja
   solo los iconos: sigue navegable, pero ocupa una quinta parte. */

.panel-lat__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.panel-lat__plegar{
  display:none;   /* en móvil el menú no es fijo: plegar no aporta nada */
  align-items:center;justify-content:center;
  width:28px;height:28px;flex:none;
  background:transparent;border:2px solid #2E3F79;
  color:var(--azul-palido);cursor:pointer;padding:0;
}
.panel-lat__plegar:hover{background:#1B2E6F;color:var(--blanco)}
.panel-lat__plegar svg{width:15px;height:15px;transition:transform .15s ease}

@media (min-width:900px){
  .panel-lat__plegar{display:inline-flex}

  /* 68px: caben los iconos con su área de pulsación y nada más. */
  body.menu-plegado .app{grid-template-columns:68px 1fr}
  body.menu-plegado .panel-lat{padding:20px 10px}
  body.menu-plegado .panel-lat__logo{display:none}
  body.menu-plegado .panel-lat__cab{justify-content:center;margin-bottom:20px}
  body.menu-plegado .panel-lat__plegar svg{transform:rotate(180deg)}

  body.menu-plegado .menu__txt{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  body.menu-plegado .menu__enlace{justify-content:center;padding:11px 0}
  body.menu-plegado .menu__enlace svg{width:20px;height:20px}

  /* El saldo se esconde: ni la cifra ni "Recargar" caben en 68px, y el
     boton se salia del menu por la derecha. */
  body.menu-plegado .saldo__etq,
  body.menu-plegado .saldo__cifra,
  body.menu-plegado .saldo .btn{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  body.menu-plegado .saldo{border-top:2px solid #2E3F79;padding-top:12px}

  /* Con el menu plegado desaparece el globo de WhatsApp: quien pliega busca
     espacio, y el globo es lo primero que estorba. Sigue estando en el resto
     del panel y en el home. */
  body.menu-plegado .wa-flotante{display:none}
}

/* La transición hace evidente que el menú se pliega, en vez de parecer que
   la página saltó. Se respeta a quien pidió no ver animaciones. */
@media (prefers-reduced-motion: no-preference){
  .app{transition:grid-template-columns .16s ease}
}


/* ---- Escribir a un numero: variables y vista previa lado a lado ---- */
.nc-cols{display:grid;gap:20px;align-items:start;margin-top:4px}
@media (min-width:820px){
  /* Los campos ocupan la mitad del ancho que tenian: un campo de 900px para
     escribir "Camilo" no aporta nada, y deja sitio para ver el mensaje. */
  .nc-cols{grid-template-columns:minmax(280px,460px) minmax(300px,1fr)}
}
.nc-campos .campo{margin-bottom:12px}
.nc-vista__etq{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  opacity:1;margin:0 0 8px;
}

/* ---- Emulacion de la pantalla de WhatsApp ----
   No pretende ser un movil de verdad: lo que importa es que quien escribe
   vea el mensaje con el aspecto que tendra al llegar, con su encabezado en
   negrita y el pie en gris, que es donde mas se equivoca uno. */
.movil{
  border:2px solid var(--regla);background:#0B141A;
  width:100%;max-width:340px;overflow:hidden;
}
.movil__barra{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;background:#1F2C33;color:#E9EDEF;
  font-size:12px;font-weight:700;
}
.movil__punto{
  width:22px;height:22px;flex:none;border-radius:50%;
  background:#25D366;
}
.movil__quien{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.movil__pantalla{
  padding:14px 10px;min-height:150px;
  /* El fondo de WhatsApp es un beige con textura; aqui basta el tono. */
  background:#0B141A;
}

.globo{
  background:#005C4B;color:#E9EDEF;
  padding:8px 10px 6px;
  border-radius:8px 0 8px 8px;
  margin-left:auto;max-width:92%;
  font-size:13px;line-height:1.45;
  box-shadow:0 1px 1px rgba(0,0,0,.25);
  word-break:break-word;
}
.globo__header{font-weight:700;margin-bottom:5px;white-space:pre-wrap}
.globo__cuerpo{white-space:pre-wrap}
.globo__pie{
  margin-top:6px;font-size:11.5px;color:#8696A0;white-space:pre-wrap;
}
.globo__hora{
  display:flex;align-items:center;justify-content:flex-end;gap:3px;
  margin-top:3px;font-size:10.5px;color:#8696A0;
}
.globo__hora svg{width:14px;height:10px;color:#53BDEB}
.globo__header[hidden],.globo__pie[hidden]{display:none !important}

/* ---- Quien respondio cada mensaje ----
   Con varios agentes atendiendo, sin esto el hilo no dice quien dijo que. */
.msj__autor--yo{opacity:1}
.msj__autor--bot{
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:10px;opacity:1;
}


/* ---- Icono de ayuda, junto a la campana ---- */
.ayuda-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  border:2px solid var(--regla);background:var(--superficie);
  color:var(--texto);text-decoration:none;
}
.ayuda-btn:hover,.ayuda-btn:focus-visible{background:var(--azul-palido);text-decoration:none}
.ayuda-btn svg{width:20px;height:20px}

/* ---- Pagina de ayuda del buzon ---- */
.ayb__intro{font-size:16px;max-width:70ch;opacity:1;margin:-4px 0 26px}

.ayb__indice{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:12px;margin-bottom:32px;
  border:2px solid var(--regla);background:var(--superficie);
}
.ayb__indice a{
  padding:6px 11px;font-size:13px;font-weight:700;
  border:2px solid transparent;color:var(--texto);
}
.ayb__indice a:hover{border-color:var(--acento);color:var(--acento);text-decoration:none}

.ayb{margin-bottom:46px;scroll-margin-top:20px}
.ayb h2{
  font-size:22px;margin:0 0 12px;padding-bottom:8px;
  border-bottom:3px solid var(--acento);display:inline-block;
}
.ayb h3{font-size:15px;margin:0 0 6px}
.ayb > p{max-width:74ch;line-height:1.6}
.ayb__clave{
  font-weight:700;border-left:4px solid var(--acento);
  padding:2px 0 2px 14px;margin:14px 0;max-width:74ch;
}

.ayb__cajas{
  display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.ayb__caja{
  border:2px solid var(--regla);background:var(--superficie);padding:16px;
}
.ayb__caja p{margin:0;font-size:14px;line-height:1.55;opacity:1}

/* Linea de tiempo de la ventana de 24 h */
.linea-tiempo{margin:22px 0;border-left:3px solid var(--regla);padding-left:0}
.lt{display:grid;grid-template-columns:110px 22px 1fr;gap:10px;
  align-items:start;padding:14px 0 14px 0}
.lt__hora{font-size:12px;font-weight:700;opacity:1;text-align:right;
  font-variant-numeric:tabular-nums;padding-top:2px}
.lt__punto{width:14px;height:14px;margin-left:-11px;margin-top:3px;
  border-radius:50%;background:var(--acento);border:3px solid var(--fondo)}
.lt__punto--verde{background:#1F7A4D}
.lt__punto--ambar{background:#8A5A00}
.lt__txt{font-size:14px;line-height:1.55;max-width:62ch}

.ayb__nota{
  border:2px solid var(--regla);background:var(--azul-palido);
  color:var(--marino);padding:14px 16px;margin-top:18px;
  font-size:14px;line-height:1.55;max-width:78ch;
}
:root:not([data-theme="light"]) .ayb__nota{background:rgba(63,106,232,.12);color:inherit}

.ayb__aviso{
  border:2px solid #8A5A00;background:rgba(255,196,0,.08);
  padding:16px;margin-top:22px;max-width:78ch;
}
.ayb__aviso strong{color:#8A5A00;display:block;margin-bottom:6px}
.ayb__aviso p{margin:0;font-size:14px;line-height:1.55}

.ayb__tabla{width:100%;border-collapse:collapse;margin:16px 0}
.ayb__tabla th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  padding:9px 12px;border-bottom:3px solid var(--regla);
}
.ayb__tabla td{padding:12px;border-bottom:2px solid var(--regla);
  font-size:14px;line-height:1.5;vertical-align:top}
.ayb__gratis{background:rgba(31,122,77,.05)}

.pastilla{
  display:inline-block;padding:3px 9px;font-size:11px;font-weight:700;
  letter-spacing:.08em;background:#5A5654;color:#fff;white-space:nowrap;
}
.pastilla--verde{background:#1F7A4D}
.pastilla--caro{background:#8A5A00}

.ayb__lista{padding-left:22px;max-width:76ch;line-height:1.6}
.ayb__lista li{margin-bottom:11px}
.ayb__volver{margin:40px 0 0}


/* ---- Copia en la nube (2026-08-13) ---- */
.nubes__intro{max-width:74ch;margin:-6px 0 24px}

.nubes-estado{border:2px solid var(--acento);background:var(--superficie);
  padding:16px;margin-bottom:28px}
.nubes-estado .cifras{margin:0}

.nubes-lista{display:grid;gap:14px;margin-bottom:8px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.nube{border:2px solid var(--regla);background:var(--superficie);padding:16px;
  scroll-margin-top:20px}
.nube--on{border-color:#1F7A4D}
.nube__cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.nube__cab strong{font-size:15px}
.nube__ayuda{font-size:12.5px;opacity:1;line-height:1.5;margin:0 0 12px}
.nube__acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.nube__form .campo{margin-bottom:10px}
.nube__form input{font-size:14px}
.nube__prueba{font-size:12.5px;margin:0 0 10px;padding:7px 9px;line-height:1.45}
.nube__prueba.bien{background:rgba(31,122,77,.1);color:#1F7A4D}
.nube__prueba.mal{background:rgba(138,90,0,.1);color:#8A5A00;word-break:break-word}

.tarjeta--ojo{border-color:#8A5A00}
.tarjeta--ojo h2{color:#8A5A00}

/* --- Varios buzones por cliente (2026-08-13) --------------------------- */

/* Estado de un buzón que el cliente dejó de pagar: se lee, no se responde. */
.est--pausado{color:#8A5A00;font-size:12px;text-transform:uppercase;letter-spacing:.04em}

/* Cambiar de buzón desde el encabezado, sin volver al selector. */
.buzon-cambiar{padding:6px 8px;font-size:13px;max-width:220px}

/* Tarjetas del selector. Cada una lleva su color arriba: quien trabaja con dos
   pestañas abiertas distingue el buzón antes de leer el título. */
.buzon-tarjetas{
  display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.buzon-tarjeta{
  display:block;border:2px solid var(--regla);background:var(--superficie);
  padding:18px;text-decoration:none;color:inherit;
}
.buzon-tarjeta:hover{border-color:var(--acento)}
.buzon-tarjeta h2{margin:0 0 6px;font-size:17px}
.buzon-tarjeta__num{margin:0 0 8px;font-size:14px;font-weight:700}
.buzon-tarjeta__meta{margin:0;font-size:13px;opacity:1}
.buzon-tarjeta--todos{border-style:dashed}


/* -------------------------------------------- Copiar el numero del buzon */
.copiar{
  background:none;border:0;padding:4px;margin-left:6px;
  color:var(--texto);opacity:1;cursor:pointer;
  display:inline-flex;align-items:center;vertical-align:middle;
  border-radius:4px;
}
.copiar:hover{opacity:1;color:var(--acento)}
.copiar:focus-visible{outline:2px solid var(--acento);outline-offset:2px;opacity:1}
/* En movil el area tactil minima es 44px: con 17px de icono el dedo falla. */
@media (pointer:coarse), (max-width:760px){
  .copiar{
    padding:12px;margin-left:2px;
    min-width:44px;min-height:44px;
    justify-content:center;
  }
}

.copia-aviso{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:980;max-width:calc(100vw - 32px);
  padding:12px 20px;
  background:var(--marino);color:var(--blanco);
  border:2px solid var(--azul-claro);
  font-size:15px;font-weight:700;text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.copia-aviso[hidden]{display:none}

/* El aviso aparece desde abajo, salvo que el sistema pida menos movimiento. */
@media (prefers-reduced-motion: no-preference){
  .copia-aviso{animation:copiaEntra .18s ease-out}
  @keyframes copiaEntra{
    from{opacity:1;transform:translate(-50%,10px)}
    to{opacity:1;transform:translate(-50%,0)}
  }
}


/* El .buzon__numero se compone de texto + numero + boton de copiar. Sin
   esto el boton salta a la linea siguiente, separado de su numero. */
.buzon__numero{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.buzon__numero .copiar{margin-left:2px}


/* ============================================ Tablero de inicio del panel */
.tablero-cab{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:22px;
}
.tablero-cab h1{margin:0}
.tablero-sub{margin:4px 0 0;font-size:15px;opacity:1;max-width:58ch}

/* Los KPI del tablero llevan icono, cifra y una linea de contexto: una cifra
   sola no dice si esta bien o mal. Reusa .kpi para no tener dos sistemas. */
.tablero-kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tablero-kpis .kpi{display:flex;flex-direction:column;gap:2px;padding:15px 16px}
.tablero-kpis .kpi .kpi__k{
  display:flex;align-items:center;gap:7px;
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  opacity:1;font-weight:700;
}
.kpi__k svg{flex:none;opacity:.8}
.tablero-kpis .kpi b{font-size:28px;margin-top:4px}
.tablero-kpis .kpi .kpi__d{
  font-size:12.5px;opacity:1;font-weight:400;
  text-transform:none;letter-spacing:0;line-height:1.45;
}
.kpi__d .urge{color:#8C1D18;font-weight:700}

/* KPI que ademas es un enlace: se comporta como tal, con foco visible. */
.kpi--liga{text-decoration:none;color:var(--texto);transition:border-color .12s,background .12s}
.kpi--liga:hover{border-color:var(--acento);text-decoration:none}
.kpi--liga:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.kpi--atencion{border-color:#8C1D18}
.kpi--atencion b{color:#8C1D18}

.tablero-titulo{margin:30px 0 14px;font-size:16px}

.tablero-bloque{margin-bottom:26px;padding:0}
.tablero-bloque__cab{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:2px solid var(--regla);
}
.tablero-bloque__cab h2{margin:0;font-size:16px}
.tablero-bloque .tabla{min-width:560px}
.tablero-bloque .tabla tr:last-child td{border-bottom:0}
.tablero-menor{font-size:13px;opacity:1}
.tablero-tel{display:block;font-size:12px;opacity:1;font-variant-numeric:tabular-nums}
.num-col{text-align:right}

/* Etiquetas semanticas: cuatro lecturas, no siete colores. */
.etq--bien{background:#1B7F3B;color:#fff}
.etq--curso{background:#8A5A00;color:#fff}
.etq--mal{background:#8C1D18;color:#fff}
.etq--neutro{background:transparent;color:var(--texto);border:2px solid var(--regla)}
.etq--ojo{background:#8A5A00;color:#fff}

/* Accesos: lista de destinos, no tarjetas decorativas. La flecha se desplaza
   en hover para que se lea como "ir a", no como caja informativa. */
.tablero-accesos{
  display:grid;gap:12px;margin-bottom:28px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.acceso{
  display:flex;align-items:center;gap:12px;
  border:2px solid var(--regla);background:var(--superficie);
  padding:14px 15px;color:var(--texto);text-decoration:none;
  transition:border-color .12s,background .12s;
}
.acceso:hover{border-color:var(--acento);text-decoration:none}
.acceso:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.acceso__ico{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border:2px solid var(--regla);color:var(--acento);
}
.acceso__tx{min-width:0;flex:1}
.acceso__tx b{display:block;font-size:14.5px;line-height:1.3}
.acceso__tx i{display:block;font-style:normal;font-size:12.5px;opacity:1;margin-top:2px}
.acceso__ch{flex:none;opacity:.45;transition:transform .12s,opacity .12s}
.acceso:hover .acceso__ch{opacity:1;transform:translateX(3px)}
.acceso--pri{background:var(--acento);border-color:var(--acento);color:#fff}
.acceso--pri:hover{background:var(--marino);border-color:var(--marino)}
.acceso--pri .acceso__ico{border-color:rgba(255,255,255,.5);color:#fff}
.acceso--pri .acceso__tx i{opacity:1}
.acceso--pri .acceso__ch{opacity:.8}

/* Primeros pasos, para el cliente que entra por primera vez. */
.tablero-arranque{border:2px solid var(--regla);background:var(--superficie);padding:26px}
.tablero-arranque h2{margin:0 0 6px;font-size:19px}
.tablero-arranque > p{margin:0 0 20px;max-width:56ch;opacity:1}
.tablero-pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:grid;gap:14px}
.tablero-pasos li{
  display:grid;gap:3px 14px;align-items:start;
  grid-template-columns:auto 1fr auto;
  padding-top:14px;border-top:2px solid var(--regla);
}
.tablero-pasos li::before{
  counter-increment:paso;content:counter(paso);
  grid-row:span 2;
  display:grid;place-items:center;width:30px;height:30px;
  border:2px solid var(--regla);font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;
}
.tablero-pasos b{font-size:15px}
.tablero-pasos span{font-size:13.5px;opacity:1;grid-column:2}
.tablero-pasos .btn{grid-row:span 2;align-self:center;white-space:nowrap}

@media (max-width:640px){
  .tablero-cab{flex-direction:column;gap:12px}
  .tablero-kpis{grid-template-columns:1fr 1fr}
  .tablero-kpis .kpi b{font-size:22px}
  .tablero-accesos{grid-template-columns:1fr}
  .tablero-pasos li{grid-template-columns:auto 1fr}
  .tablero-pasos .btn{grid-column:2;grid-row:auto;justify-self:start;margin-top:6px}
}


/* Un item de grid no baja de su contenido salvo que se le permita: con
   min-width:auto una tabla ancha empuja la columna entera y aparece scroll
   horizontal en toda la pagina. El .tabla-scroll ya sabe desplazarse solo;
   solo necesitaba que el contenedor le dejara encogerse. */
.app > .contenido,
.app > main{min-width:0}
.tablero-bloque,
.tablero-bloque .tabla-scroll{min-width:0;max-width:100%}

@media (max-width:640px){
  /* En movil la tabla se desplaza dentro de su caja, no arrastra la pagina. */
  .tablero-bloque .tabla{min-width:480px}
}


/* Texto a plena opacidad: el gris lavado se pidio en negro. La jerarquia
   la marcan el tamano, el peso y las mayusculas, no un texto medio borrado. */
.tablero-sub,.kpi__d,.acceso__tx i,.tablero-menor,.tablero-tel,
.buzon__prev,.buzon__meta,.msj__hora,.msj__autor,.bib-uso,
.prev-prueba__ayuda,.canal-op__precio{opacity:1}

/* El marcador de posicion tambien se leia como texto real a medias. */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.62}


/* El texto de "sin imagenes" es un item mas de la rejilla: sin esto cae en
   una columna de 140px y se parte en tres lineas. */
.bib-modal__vacio{grid-column:1/-1;padding:18px;margin:0}

/* Barra de colores de tabla del editor. */
.tabla-color{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 12px;margin-top:-1px;
  border:1px solid var(--regla);border-radius:0 0 var(--r-md,10px) var(--r-md,10px);
  background:var(--ground);
}
.tabla-color[hidden]{display:none}
.tabla-color__t{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.tabla-color__c{display:inline-flex;align-items:center;gap:7px;font-size:13px}
.tabla-color__c input[type=color]{
  width:34px;height:26px;padding:0;border:1px solid var(--regla);
  border-radius:6px;background:none;cursor:pointer;
}
.tabla-color__n{font-size:12px;color:var(--acento);font-weight:700}