/* 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}

/* 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}
@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){.buzon__lista{border-bottom:0;border-right:2px solid var(--regla);max-height:620px}}
.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:.75;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buzon__meta{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.6;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:.6;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:.7}


/* 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:.65;
}
.auth__o::before,.auth__o::after{
  content:"";flex:1;height:2px;background:var(--regla);opacity:.35;
}


/* 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:.85}
.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:.7}

.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:.6;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:.75;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:.8}
.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:.7;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:.65;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:.75;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:.55;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:.75;
}

/* 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:.7;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:.8}
.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:.7;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:.8}
.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:.7;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%}
}