/* ══════════════════════════════════════════════════════════════════════
   Tema visual de Amira — «Lavanda»
   Se carga en todas las páginas DESPUÉS de su <style>, así que manda sobre él.
   Tres modos: claro, oscuro y según el sistema (lo decide tema.js con data-theme).
   Fuentes: Unbounded (títulos y marca, peso ligero) + Figtree (todo lo demás).
   Regla: ningún texto por debajo de 15 px y contraste suave pero legible.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --f-texto:'Figtree',system-ui,sans-serif;
  --f-titulo:'Unbounded','Figtree',sans-serif;

  /* Claro */
  --fondo:#f8f7fd; --superficie:#ffffff; --suave:#f1effb; --suave-2:#e9e6f8;
  --tinta:#2e2b4d; --tinta-2:#514e72; --tenue:#6f6c93;
  --borde:#ecebf6; --borde-2:#dedbf0;
  --lavanda:#7c6cf5; --lavanda-d:#5d4fd3; --lavanda-l:#f0eefe; --lavanda-t:#5d4fd3;
  --durazno:#ffa987; --durazno-l:#fff1ea; --durazno-d:#a1532f;
  --sombra:0 8px 28px rgba(46,43,77,.06);
  --side-bg:#f1effb; --side-tinta:#2e2b4d; --side-tenue:#6f6c93; --side-hover:#e8e5f8; --side-act:#dfdbf6; --side-borde:#e2dff4;

  /* Nombres que ya usan las páginas */
  --noche:var(--tinta); --noche-2:var(--suave-2); --noche-3:var(--borde-2);
  --cielo:var(--fondo); --cielo-2:var(--suave);
  --achiote:var(--lavanda); --achiote-d:var(--lavanda-t); --achiote-l:var(--lavanda-l);
  --oro:var(--durazno); --oro-l:var(--durazno-l); --oro-d:var(--durazno-d);
  --bg:var(--fondo); --card:var(--superficie); --panel:var(--superficie); --side:var(--side-bg);
  --line:var(--borde); --line2:var(--borde-2);
  --ink:var(--tinta); --ink2:var(--tinta-2); --muted:var(--tenue);
  --violet:var(--lavanda); --violet-d:var(--lavanda-t); --lav:var(--lavanda-l);
  --rose:var(--durazno-l); --gold:var(--durazno); --gold-soft:var(--durazno-l);
  --accent:var(--lavanda); --accent-d:var(--lavanda-t); --accent-l:var(--lavanda-l);
  --user:var(--lavanda); --code:var(--suave);
  --ok:#2a8a5f; --bad:#c8475f; --danger:#c8475f;
}
/* Oscuro */
:root[data-theme="oscuro"]{
  --fondo:#17162d; --superficie:#201f3a; --suave:#272546; --suave-2:#302e55;
  --tinta:#ebe9fb; --tinta-2:#c8c5e6; --tenue:#a19ec8;
  --borde:#2d2b4e; --borde-2:#3b3962;
  --lavanda:#7566ee; --lavanda-d:#6556de; --lavanda-l:#2b2852; --lavanda-t:#b9b0ff;
  --durazno:#ffb497; --durazno-l:#3a2b33; --durazno-d:#ffc4ab;
  --sombra:0 8px 28px rgba(0,0,0,.28);
  --side-bg:#1b1a33; --side-tinta:#e4e2f8; --side-tenue:#a19ec8; --side-hover:#26244a; --side-act:#302d5c; --side-borde:#2d2b4e;
  --ok:#6fd3a3; --bad:#ff8aa0; --danger:#ff8aa0;
  color-scheme:dark;
}

html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-texto);font-size:17px;line-height:1.55;color:var(--tinta);background:var(--fondo);-webkit-font-smoothing:antialiased}
h1,h2,h3,.font-d{font-family:var(--f-titulo);font-weight:500;letter-spacing:-.015em;color:var(--tinta)}
button,input,select,textarea{font-family:var(--f-texto);color:var(--tinta)}
input,select,textarea{background:var(--superficie)}
a{color:var(--lavanda-t)}
:focus-visible{outline:3px solid rgba(124,108,245,.35);outline-offset:2px}
::placeholder{color:var(--tenue);opacity:.85}

/* Botones */
.btn{border-radius:999px;padding:12px 22px;font-size:16px;font-weight:600;border:1px solid var(--borde-2);background:var(--superficie);color:var(--tinta);
     box-shadow:none;transition:background .15s,border-color .15s;cursor:pointer}
.btn:hover{border-color:var(--lavanda);background:var(--superficie)}
.btn.pri{background:var(--lavanda);border-color:var(--lavanda);color:#fff;font-weight:600}
.btn.pri:hover{background:var(--lavanda-d);border-color:var(--lavanda-d)}
.btn.pri:disabled,.btn:disabled{background:var(--suave-2);border-color:var(--suave-2);color:var(--tenue);cursor:not-allowed}
.btn.peligro{color:var(--bad);border-color:var(--borde-2)}
.btn.peligro:hover{border-color:var(--bad)}
.btn.wa{background:#25a560;border-color:#25a560;color:#fff}
.btn.peq{padding:9px 16px;font-size:15px}

/* Campos */
input,select,textarea{font-size:16.5px}
.campo label{font-size:15px!important;font-weight:600;color:var(--tinta-2)!important}
.campo input,.campo select,.campo textarea{border:1px solid var(--borde-2)!important;border-radius:14px!important;padding:13px 15px!important;background:var(--superficie)!important;color:var(--tinta)!important}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--lavanda)!important;box-shadow:0 0 0 3px rgba(124,108,245,.15)}
.campo input[readonly]{background:var(--suave)!important;color:var(--tenue)!important}

/* Píldoras de sugerencia */
.chip{border:none!important;background:var(--lavanda-l)!important;color:var(--lavanda-t)!important;border-radius:999px!important;
      padding:10px 17px!important;font-size:16px!important;font-weight:600}
.chip:hover{filter:brightness(.97)}

/* Selector de tema (☀ / 🌙 / ⚙) */
.tema-sel{display:inline-flex;gap:2px;background:var(--suave);border-radius:999px;padding:3px}
.tema-sel button{border:none;background:transparent;border-radius:999px;padding:7px 13px;font-size:15px;cursor:pointer;color:var(--tenue);display:inline-flex;align-items:center;gap:6px;font-weight:600}
.tema-sel button[aria-pressed="true"]{background:var(--lavanda-l);color:var(--lavanda-t);box-shadow:none}

/* Menú desplegable de ciudades */
.cdd{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:var(--superficie);border:1px solid var(--borde-2);
     border-radius:14px;box-shadow:0 12px 32px rgba(20,18,50,.16);max-height:300px;overflow-y:auto;padding:4px}
.cdd.arriba{top:auto;bottom:calc(100% + 4px)}
.cdd-op{padding:10px 12px;border-radius:10px;font-size:16px;cursor:pointer;color:var(--tinta)}
.cdd-op span{color:var(--tenue);font-size:15px}
.cdd-op.on,.cdd-op:hover{background:var(--lavanda-l)}
.cdd-vacio{padding:10px 12px;font-size:15px;color:var(--tenue)}

/* Avisos y estados con color fijo en las páginas */
[data-theme="oscuro"] .aviso.ok{background:#173a2b;color:#9fe3c2;border-color:#24533e}
[data-theme="oscuro"] .aviso.esp{background:#3a301b;color:#f2d49a;border-color:#56462a}
[data-theme="oscuro"] .aviso.err,[data-theme="oscuro"] .error,[data-theme="oscuro"] .chip.err,[data-theme="oscuro"] .arch.err{background:#3d1f2a;color:#ffb3c1;border-color:#5a2c3b}

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