/* ============================================================
   NotiYa — capa de diseño Stripe (2026-08-13)
   Sustituye al manual de marca v1.0 (marino, 2px, nada redondeado).
   Se carga DESPUÉS de notiya.css y redefine tokens y componentes.
   Los nombres de clase no cambian: las 33 vistas siguen igual.
   ============================================================ */

:root{
  /* superficies */
  --bg:#f6f8fa;
  --surface:#ffffff;
  --surface-2:#f7fafc;
  --surface-3:#eef2f7;

  /* texto: azul-gris muy oscuro, nunca negro puro */
  --text:#0B0D14;
  --text-2:#0B0D14;
  --muted:#0B0D14;

  /* líneas de 1px */
  --border:rgba(0,0,0,.26);
  --border-strong:rgba(0,0,0,.42);

  /* acento, racionado */
  --accent:#635bff;
  --accent-hover:#7a73ff;
  --accent-press:#5449e0;
  --accent-soft:#f0efff;
  --accent-line:#d7d4ff;

  /* semánticos */
  --green:#0e7c5a; --green-soft:#e6f5ef; --green-line:#bfe6d7;
  --amber:#8a5a00; --amber-soft:#fdf3e0; --amber-line:#f0dcb4;
  --red:#a4262c;   --red-soft:#fdeded;   --red-line:#f5c9c9;
  --blue:#0055bc;  --blue-soft:#e8f1fd;  --blue-line:#c3dcf7;

  /* sombras: 1px, nunca más */
  --sh-1:0 1px 2px rgba(0,0,0,.06);
  --sh-2:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  --sh-pop:0 4px 12px rgba(26,31,54,.10), 0 0 0 1px rgba(0,0,0,.06);
  --ring:0 0 0 3px rgba(99,91,255,.28);

  /* radios */
  --r-sm:8px; --r:10px; --r-md:14px; --r-lg:18px;

  /* Puentes con los tokens viejos: las reglas heredadas siguen
     funcionando, pero ya pintan con la paleta nueva. */
  --marino:var(--text);
  --acento:var(--accent);
  --azul-claro:#a8a3ff;
  --azul-palido:var(--accent-soft);
  --fondo:var(--bg);
  --tinta:var(--text);
  --blanco:#ffffff;
  --regla:var(--border);
  --ground:var(--bg);
  --texto:var(--text);
  --superficie:var(--surface);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1117;
    --surface:#171a21;
    --surface-2:#1d212a;
    --surface-3:#252a35;
    --text:#F7F9FE;
    --text-2:#F7F9FE;
    --muted:#EAEEF8;
    --border:rgba(255,255,255,.28);
    --border-strong:rgba(255,255,255,.44);
    --accent:#8b85ff;
    --accent-hover:#a29dff;
    --accent-press:#6f68f0;
    --accent-soft:#241f4d;
    --accent-line:#3d3670;
    --green:#5ed3a6; --green-soft:#10291f; --green-line:#1f4d3a;
    --amber:#f0c07a; --amber-soft:#2b2113; --amber-line:#4d3c1d;
    --red:#f28b8b;   --red-soft:#2c1618;   --red-line:#5a2a2c;
    --blue:#7fb4f5;  --blue-soft:#12213a;  --blue-line:#2a4a75;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
    --sh-pop:0 4px 14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
    --ring:0 0 0 3px rgba(139,133,255,.32);
    --marino:var(--text);
    --azul-claro:#8b85ff;
    --azul-palido:var(--accent-soft);
    --fondo:var(--bg);
    --tinta:var(--text);
    --blanco:#ffffff;
    --regla:var(--border);
    --ground:var(--bg);
    --texto:var(--text);
    --superficie:var(--surface);
  }
}

:root[data-theme="dark"]{
  --bg:#0f1117;
  --surface:#171a21;
  --surface-2:#1d212a;
  --surface-3:#252a35;
  --text:#F7F9FE;
  --text-2:#F7F9FE;
  --muted:#EAEEF8;
  --border:rgba(255,255,255,.28);
  --border-strong:rgba(255,255,255,.44);
  --accent:#8b85ff;
  --accent-hover:#a29dff;
  --accent-press:#6f68f0;
  --accent-soft:#241f4d;
  --accent-line:#3d3670;
  --green:#5ed3a6; --green-soft:#10291f; --green-line:#1f4d3a;
  --amber:#f0c07a; --amber-soft:#2b2113; --amber-line:#4d3c1d;
  --red:#f28b8b;   --red-soft:#2c1618;   --red-line:#5a2a2c;
  --blue:#7fb4f5;  --blue-soft:#12213a;  --blue-line:#2a4a75;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  --sh-pop:0 4px 14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  --ring:0 0 0 3px rgba(139,133,255,.32);
  --marino:var(--text);
  --azul-claro:#8b85ff;
  --azul-palido:var(--accent-soft);
  --fondo:var(--bg);
  --tinta:var(--text);
  --blanco:#ffffff;
  --regla:var(--border);
  --ground:var(--bg);
  --texto:var(--text);
  --superficie:var(--surface);
}

/* ---------------- Base ---------------- */

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  color:var(--text);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.25;
}
h1{font-size:24px;margin:0 0 6px}
h2{font-size:18px;margin:0 0 6px}
h3{font-size:15px;margin:0 0 6px}
p{color:var(--text-2);margin:0 0 12px;max-width:70ch}

a{color:var(--accent)}
a:hover{color:var(--accent-press);text-decoration:underline}

/* El foco de Stripe es un halo, no un contorno duro */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:var(--r-sm);
}

/* Se recupera el redondeo que el manual viejo prohibía */
.btn,input,select,textarea,.tarjeta,.aviso,.tabla-scroll{border-radius:var(--r)}

/* ---------------- Botones ---------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  height:34px;
  font-family:inherit;
  font-weight:500;
  font-size:14px;
  line-height:1;
  border:1px solid transparent;
  background:var(--accent);
  color:#fff;
  box-shadow:var(--sh-1);
  transition:background .12s ease, box-shadow .12s ease;
}
.btn:hover{background:var(--accent-hover);border-color:transparent;color:#fff;text-decoration:none}
.btn:active{background:var(--accent-press)}

.btn--linea,
.btn.btn--linea,
button.btn--linea,
a.btn--linea{
  background:var(--surface);
  background-color:var(--surface);
  color:var(--text-2);
  border-color:var(--border-strong);
  box-shadow:var(--sh-1);
}
.btn--linea:hover,
.btn.btn--linea:hover,
button.btn--linea:hover,
a.btn--linea:hover{
  background:var(--surface-2);
  background-color:var(--surface-2);
  color:var(--text);
  border-color:var(--border-strong);
}

.btn-s{height:28px;padding:0 10px;font-size:13px}

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

label{
  display:block;
  font-size:13px;
  font-weight:500;
  text-transform:none;      /* el versalita del manual viejo gritaba */
  letter-spacing:normal;
  color:var(--text-2);
  margin-bottom:5px;
}
input,select,textarea{
  width:100%;
  padding:8px 11px;
  font-size:14px;
  font-family:inherit;
  color:var(--text);
  border:1px solid var(--border-strong);
  background:var(--surface);
  box-shadow:var(--sh-1);
  transition:box-shadow .12s ease, border-color .12s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:var(--ring);
  outline:none;
}
input::placeholder,textarea::placeholder{color:var(--muted)}

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

.aviso{
  border:1px solid var(--blue-line);
  background:var(--blue-soft);
  color:var(--text);
  padding:11px 13px;
  margin-bottom:14px;
  font-size:14px;
  box-shadow:none;
}
.aviso--error{
  background:var(--red-soft);
  border-color:var(--red-line);
  color:var(--text);
}

/* ---------------- Autenticación ---------------- */

.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:var(--bg);
}
.auth__caja{
  width:100%;
  max-width:400px;
  padding:32px 28px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);
}
.auth__logo{margin-bottom:24px}
.auth__logo img{width:140px;height:auto}
.campo{margin-bottom:14px}

/* ---------------- Panel: menú lateral ---------------- */

.app{display:grid;grid-template-columns:1fr;min-height:100vh}
@media (min-width:900px){ .app{grid-template-columns:240px 1fr} }

/* El menú deja de ser un bloque marino: superficie clara con borde,
   como el de Stripe. El acento solo marca el ítem activo. */
.panel-lat{
  background:var(--surface);
  color:var(--text-2);
  border-right:1px solid var(--border);
  padding:16px 12px;
  gap:1px;
}
.panel-lat__logo img{width:126px;height:auto;margin-bottom:18px}

.menu__enlace{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border-radius:var(--r);
  color:var(--text-2);
  font-size:14px;
  font-weight:500;
}
.menu__enlace:hover{background:var(--surface-3);color:var(--text);text-decoration:none}
.menu__enlace.activo{
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:600;
}
.menu__enlace svg{width:16px;height:16px;flex:none;opacity:.8}
.menu__enlace.activo svg{opacity:1}

.saldo{
  margin-top:auto;
  border-top:1px solid var(--border);
  padding-top:14px;
}
.saldo__cifra{font-size:19px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.saldo__etq{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:500;
}

/* Dentro del menú los botones ya no van sobre marino: se anula
   el parche que los forzaba a blanco. */
.panel-lat .btn--linea,
.panel-lat a.btn--linea,
aside .btn--linea{
  color:var(--text-2);
  border-color:var(--border-strong);
  background:var(--surface);
  background-color:var(--surface);
}
.panel-lat .btn--linea:hover,
.panel-lat a.btn--linea:hover,
aside .btn--linea:hover{
  background:var(--surface-2);
  background-color:var(--surface-2);
  color:var(--text);
  border-color:var(--border-strong);
}

/* ---------------- Contenido, tarjetas, tablas ---------------- */

.contenido{padding:24px 16px 64px;max-width:1100px}
@media (min-width:900px){ .contenido{padding:32px 32px 80px} }

.tarjeta{
  border:1px solid var(--border);
  background:var(--surface);
  padding:18px;
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
.vacio{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--r-md);
  padding:36px 24px;
  box-shadow:var(--sh-1);
  color:var(--text-2);
}

.tabla-scroll{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--sh-1);
}
.tabla{width:100%;border-collapse:collapse;min-width:520px;background:var(--surface)}
.tabla th,.tabla td{
  padding:10px 14px;
  text-align:left;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.tabla th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  background:var(--surface-2);
  color:var(--muted);
  white-space:nowrap;
}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--surface-2)}

.idiomas a{
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-weight:500;
  letter-spacing:.04em;
  padding:3px 8px;
  background:var(--surface);
}
.idiomas a.activo{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------------- Buzón ---------------- */

.buzon{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--sh-1);
}
.buzon__lista{border-bottom:1px solid var(--border);background:var(--surface)}
@media(min-width:820px){
  .buzon__lista{border-bottom:0;border-right:1px solid var(--border)}
}
.buzon__item{
  padding:11px 13px;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
.buzon__item:hover{background:var(--surface-2);text-decoration:none}
.buzon__item.activo{
  background:var(--accent-soft);
  border-left:2px solid var(--accent);
}
.buzon__pill{
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:1px 7px;
  border-radius:999px;
}
.buzon__prev{color:var(--muted)}
.buzon__meta{color:var(--muted);letter-spacing:.06em}
.buzon__titulo{border-bottom:1px solid var(--border);padding:12px 14px}
.buzon__chat{background:var(--surface)}

/* Burbujas: la entrante es superficie neutra, la saliente lleva el acento
   en tono suave. Nunca el acento pleno, que a 14px cansa la vista. */
.msj{
  max-width:78%;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:none;
}
.msj--suyo{align-self:flex-start;background:var(--surface-2)}
.msj--mio{
  align-self:flex-end;
  background:var(--accent-soft);
  border-color:var(--accent-line);
}
.msj__hora{color:var(--muted);opacity:1;font-size:11px}
.buzon__form{border-top:1px solid var(--border);padding:12px 14px}
.buzon__nota{color:var(--muted);opacity:1}

/* ---------------- Arreglos de piezas que traían el estilo viejo ---------------- */

/* Botón de Google: el borde negro de 2px chocaba con la caja de auth.
   Se conserva el blanco de la guía de marca de Google, pero con el
   borde y el radio del resto de campos. */
.btn--google{
  padding:0 14px;
  height:38px;
  margin-bottom:14px;
  border:1px solid var(--border-strong);
  border-radius:var(--r);
  background:#fff;
  color:#3c4043;
  font-weight:500;
  font-size:14px;
  box-shadow:var(--sh-1);
}
.btn--google:hover{background:#f7f8f8;color:#3c4043}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn--google{
    background:#fff;color:#3c4043;border-color:rgba(0,0,0,.2);
  }
  :root:not([data-theme="light"]) .btn--google:hover{background:#f7f8f8}
}
:root[data-theme="dark"] .btn--google{background:#fff;color:#3c4043;border-color:rgba(0,0,0,.2)}
:root[data-theme="dark"] .btn--google:hover{background:#f7f8f8}

/* El separador "o" del login */
.auth__o{color:var(--muted);font-size:13px}

/* Campana de avisos */
.campana{
  width:34px;height:34px;
  border:1px solid var(--border-strong);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--text-2);
  box-shadow:var(--sh-1);
}
.campana:hover,.campana:focus-visible{background:var(--surface-2);color:var(--text)}
.campana svg{width:17px;height:17px}
.campana--con{border-color:var(--accent-line);color:var(--accent)}
.campana__num{
  top:-7px;right:-7px;
  min-width:18px;height:18px;
  border:2px solid var(--bg);
  border-radius:999px;
  background:var(--accent);
  font-weight:600;
}
.campana__num--urge{background:var(--amber);color:#fff}

/* Botón de plegar el menú: vivía sobre marino, ahora sobre superficie clara */
.panel-lat__plegar{
  width:26px;height:26px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--muted);
  box-shadow:none;
}
.panel-lat__plegar:hover{background:var(--surface-3);color:var(--text)}

/* El botón Recargar del menú: .btn ahora es flex, así que el ancho
   completo necesita declararse aquí para que el texto quede centrado. */
.saldo .btn{width:100%;margin-top:10px}

/* Cerrar sesión, al pie del menú */
.panel-lat__salir,
.saldo + a{color:var(--muted)}
.panel-lat__salir:hover{color:var(--text)}

/* Logo del menu: par claro/oscuro. En claro va el normal; el invertido
   solo aparece cuando el fondo del menu se oscurece. */
.panel-lat__logo .logo-oscuro{display:none}
.panel-lat__logo .logo-claro{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .panel-lat__logo .logo-claro{display:none}
  :root:not([data-theme="light"]) .panel-lat__logo .logo-oscuro{display:block}
}
:root[data-theme="dark"] .panel-lat__logo .logo-claro{display:none}
:root[data-theme="dark"] .panel-lat__logo .logo-oscuro{display:block}
:root[data-theme="light"] .panel-lat__logo .logo-claro{display:block}
:root[data-theme="light"] .panel-lat__logo .logo-oscuro{display:none}

/* Los botones de barra no parten el texto en dos lineas: con height fija
   el salto de linea los desalineaba respecto a sus vecinos. */
.buzon-barra .btn,
.buzon__acciones .btn,
.barra-sup .btn{white-space:nowrap}

/* Si la barra queda estrecha, que baje entera en vez de romper un boton */
.buzon-barra{flex-wrap:wrap;gap:8px}

/* El PNG invertido del logo trae fondo marino solido: sobre el menu oscuro
   se veia como un recuadro azul recortado. Se le quita el fondo mezclandolo
   con la superficie; el trazo claro del logo se conserva. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .panel-lat__logo .logo-oscuro{mix-blend-mode:screen}
}
:root[data-theme="dark"] .panel-lat__logo .logo-oscuro{mix-blend-mode:screen}