/* ---------------------------------------------------------------- fuentes
   GARET y ACUMIN son comerciales y no se consiguieron los archivos. Estas son
   las alternativas libres más cercanas, servidas desde el propio servidor
   (el CSP sólo permite 'self', así que no se pueden traer de un CDN):
     · Jost  en lugar de Garet  — geométrica, mismo aire Futura, para títulos
     · Inter en lugar de Acumin — humanista neutra, para texto corrido
   Son VARIABLES: un archivo por familia cubre todos los pesos, por eso se
   declara el rango y no un peso fijo. */

@font-face{font-family:'Garet';src:url('fonts/Garet-Bold.woff2') format('woff2');
           font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Acumin';src:url('fonts/Acumin-Regular.woff2') format('woff2');
           font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --titulo:'Garet','Poppins','Century Gothic','Futura',system-ui,sans-serif;
  --texto :'Acumin','Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --papel:#faf9f7; --blanco:#fff; --borde:#e8e4de; --borde-2:#dcd6cc;
  --tinta:#1c1b1a; --suave:#8a837b; --marron:#6b5d4f; --alerta:#8a3b2f;
}
/* Le avisa al navegador de qué color pintar lo que dibuja él y no nosotros:
   barras de scroll, cursor de texto y el fondo amarillo del autocompletado, que
   en oscuro tapa el texto del campo. Ver la nota más larga en app.css. */
:root[data-tema="claro"] {color-scheme:light}
:root[data-tema="oscuro"]{color-scheme:dark}
*{scrollbar-color:var(--borde-2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--borde-2);border-radius:999px;
                          border:2px solid transparent;background-clip:content-box}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--texto);font-weight:400;background:var(--papel);color:var(--tinta);
     display:flex;align-items:center;justify-content:center;padding:20px;
     -webkit-font-smoothing:antialiased}

.caja{background:var(--blanco);border:1px solid var(--borde);border-radius:20px;
      padding:40px 36px;width:100%;max-width:380px;
      box-shadow:0 1px 3px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.04)}
h1{font-family:var(--titulo);font-weight:700;font-size:1.5rem;margin:0;letter-spacing:.01em}
.sub{color:var(--suave);font-weight:300;font-size:.88rem;margin:6px 0 28px}

label{display:block;font-size:.8rem;color:var(--suave);margin-bottom:6px;font-weight:400}
input{width:100%;padding:12px 16px;border:1px solid var(--borde-2);border-radius:12px;
      font-family:var(--texto);font-size:.95rem;background:var(--papel);color:var(--tinta);
      margin-bottom:18px}
input:focus{outline:none;border-color:var(--marron);background:var(--blanco)}

button{width:100%;padding:13px;border:1px solid var(--tinta);border-radius:999px;
       background:var(--tinta);color:var(--blanco);font-family:var(--texto);
       font-size:.95rem;cursor:pointer;transition:background .12s}
button:hover{background:#000}
button:disabled{opacity:.5;cursor:not-allowed}

.error{background:#f7ecea;border:1px solid #e5cdc7;color:var(--alerta);
       padding:10px 14px;border-radius:12px;font-size:.85rem;margin-bottom:18px}
.oculto{display:none}
.pie{color:var(--suave);font-weight:300;font-size:.78rem;text-align:center;margin:22px 0 0}

/* ------------------------------------------------------------ modo oscuro
   Mismo criterio que el claro: neutros cálidos y el marrón como único acento.
   No es un negro puro: #16..#23 cansa menos la vista en un mostrador. */
:root[data-tema="oscuro"]{
  --papel   :#171615;
  --blanco  :#211f1e;
  --hilo-bg :#131211;
  --borde   :#302c28;
  --borde-2 :#3d3833;
  --tinta   :#efece7;
  --tinta-2 :#c4bdb4;
  --suave   :#8f887f;
  --marron  :#b39775;
  --marron-c:#2b2620;
  --propio  :#332d26;
  --nota-bg :#2b2318;
  --nota-bd :#4a3d29;
  --alerta  :#d9a273;
}

/* ------------------------------------------------------------------ logo */
.logo{height:30px;width:auto;display:block}
/* el logo es trazo negro: en oscuro se invierte para que quede blanco */
:root[data-tema="oscuro"] .logo{filter:invert(1) brightness(1.15)}

/* --------------------------------------------------------- botón de tema */
.tema{display:inline-flex;align-items:center;justify-content:center;
      width:34px;height:34px;padding:0;border-radius:999px;color:var(--suave)}
.tema:hover{color:var(--marron)}
.tema .ico-sol{display:none}
:root[data-tema="oscuro"] .tema .ico-luna{display:none}
:root[data-tema="oscuro"] .tema .ico-sol{display:block}
body>.tema{position:fixed;top:18px;right:18px;background:var(--blanco);border:1px solid var(--borde)}
.caja .logo{height:84px;margin:0 auto 18px}