/* =====================================================================
   UniGuías · plataforma — estilos compartidos
   Mismo sistema que uniguias.com y el dashboard: papel, tinta marino,
   ámbar. Modo noche con [data-theme="dark"] (clave "ug_theme").
   Cada pantalla agrega sus propios estilos encima de estos.
   ===================================================================== */
:root{
  --paper:#f6f1e7;
  --paper-2:#ede5d4;
  --card:#fffdf8;
  --ink:#13253b;
  --ink-2:#44536a;
  --muted:#5e6676;
  --rule:#ddd3c0;
  --rule-strong:#bcae94;
  --hero:#1b3a5c;
  --hero-ink:#f6f1e7;
  --hero-ink-2:rgba(246,241,231,.74);
  --hero-rule:rgba(246,241,231,.18);
  --amber:#e8a33d;
  --amber-press:#d8912a;
  --amber-deep:#b8801f;
  --amber-soft:#f6e3bf;
  --on-amber:#13253b;
  --star:#e3a13b;
  --star-edge:#b8801f;
  --star-off:#d3c7b0;
  --ok:#2e7a4b;
  --ok-bg:#e3efe5;
  --ok-deep:#1f5a36;
  --bad:#b23a2c;
  --bad-bg:#f6e1dc;
  --bad-deep:#86281d;
  --focus:rgba(19,37,59,.18);
  --shadow:0 18px 40px -24px rgba(19,37,59,.45);
  --edge:#13253b;
  --scrim:rgba(8,14,24,.55);
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#10161e;
  --paper-2:#18212c;
  --card:#1b2532;
  --ink:#e7edf4;
  --ink-2:#b4c0cc;
  --muted:#93a1af;
  --rule:#2a3542;
  --rule-strong:#3c4856;
  --hero:#1a2c42;
  --amber-soft:#3a2f1c;
  --star-off:#4a5664;
  --ok:#5cc58a;
  --ok-bg:#16291f;
  --ok-deep:#3f9a67;
  --bad:#f08b7e;
  --bad-bg:#2e1b19;
  --bad-deep:#c46a5e;
  --focus:rgba(232,163,61,.35);
  --shadow:0 18px 40px -24px rgba(0,0,0,.7);
  --edge:#56657a;
  --scrim:rgba(0,0,0,.66);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
svg{display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 16px}

/* ---------- Texto ---------- */
.eyebrow{font-size:13px;font-weight:700;color:var(--muted)}
.title{font:600 clamp(1.6rem,1.25rem + 1.8vw,2.1rem)/1.12 var(--serif);letter-spacing:-.02em}
.lede{margin-top:6px;font-size:15px;color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border:1.5px solid transparent;border-radius:10px;font:700 16px/1.2 var(--sans);text-decoration:none;text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,transform .08s,box-shadow .08s}
.btn svg{width:18px;height:18px;flex:none}
.btn-block{width:100%}
.btn-block+.btn-block{margin-top:12px}
.btn-primary{background:var(--amber);border-color:var(--amber);color:var(--on-amber);box-shadow:0 4px 0 var(--amber-deep)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--amber-deep)}
.btn-secondary{background:var(--card);border-color:var(--rule-strong);color:var(--ink);box-shadow:0 4px 0 var(--rule-strong)}
.btn-secondary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--rule-strong)}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:0 4px 0 var(--bad-deep)}
[data-theme="dark"] .btn-danger{color:#10161e}
.btn-danger:active{transform:translateY(2px);box-shadow:0 2px 0 var(--bad-deep)}
.btn-quiet{background:transparent;color:var(--ink-2)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;background:var(--paper-2);border-color:var(--rule-strong);color:var(--muted);box-shadow:none;transform:none}
.btn-sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:8px}
.btn-sm.btn-primary,.btn-sm.btn-secondary,.btn-sm.btn-danger{box-shadow:0 3px 0 var(--rule-strong)}
.btn-sm.btn-primary{box-shadow:0 3px 0 var(--amber-deep)}
.btn-sm.btn-danger{box-shadow:0 3px 0 var(--bad-deep)}
@media (hover:hover){
  .btn-primary:hover{background:var(--amber-press);border-color:var(--amber-press)}
  .btn-secondary:hover{border-color:var(--ink-2)}
  .btn-quiet:hover{background:var(--paper-2);color:var(--ink)}
}
.link{padding:0;background:none;border:0;font:600 15px var(--sans);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:hover{color:var(--ink)}
.icon-btn{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;background:none;border:0;border-radius:10px;color:var(--ink);text-decoration:none;cursor:pointer}
.icon-btn svg{width:22px;height:22px}
@media (hover:hover){.icon-btn:hover{background:var(--paper-2)}}

/* ---------- Barra superior ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule)}
.topbar-in{display:flex;align-items:center;gap:6px;height:58px;max-width:560px;margin:0 auto;padding:0 8px}
.topbar-title{flex:1;min-width:0;overflow:hidden;font-size:15px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.topbar-title small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.mark{width:50px;height:25px;color:var(--hero)}
[data-theme="dark"] .mark{color:var(--ink)}

/* ---------- Tarjetas, barras, estrellas ---------- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:14px}
.track{height:8px;background:var(--paper-2);border-radius:4px;overflow:hidden}
.track>i{display:block;width:0;height:100%;background:var(--amber);border-radius:4px;transition:width .35s cubic-bezier(.22,1,.36,1)}
.stars-row{display:inline-flex;gap:2px}
.stars-row svg{width:20px;height:20px;color:var(--star);stroke:var(--star-edge)}
.stars-row svg.off{color:var(--star-off);stroke:var(--star-off)}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--paper-2);border-radius:14px;font-size:13px;font-weight:700;color:var(--ink-2)}
.pill svg{width:15px;height:15px}
.state-ok{color:var(--ok)}
.state-bad{color:var(--bad)}

/* ---------- Campos ---------- */
.field{display:block}
.field+.field{margin-top:14px}
.field>span{display:block;margin-bottom:6px;font-size:14px;font-weight:700}
.field small{display:block;margin-top:5px;font-size:13px;color:var(--muted)}
.input{width:100%;min-height:48px;padding:10px 12px;background:var(--card);border:1.5px solid var(--rule-strong);border-radius:8px;font:500 16px/1.35 var(--sans);color:var(--ink)}
textarea.input{min-height:96px;resize:vertical}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--focus)}
.input[disabled]{background:var(--paper-2);color:var(--muted)}
select.input{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat}

/* ---------- Diálogo (abajo en celular, centrado en pantallas grandes) ---------- */
.dialog{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;padding:12px;background:var(--scrim)}
.dialog[hidden]{display:none}
@media (min-width:576px){.dialog{align-items:center;padding:16px}}
.dialog-card{width:100%;max-width:440px;max-height:calc(100dvh - 24px);overflow-y:auto;padding:22px 20px calc(18px + env(safe-area-inset-bottom));background:var(--card);border-radius:16px;box-shadow:var(--shadow)}
.dialog-card h2{font:600 1.4rem/1.2 var(--serif);letter-spacing:-.01em}
.dialog-card>p{margin-top:8px;font-size:15px;color:var(--ink-2)}
.dialog-actions{display:grid;gap:12px;margin-top:20px}
@media (prefers-reduced-motion:no-preference){
  .dialog:not([hidden]){animation:fade .18s ease}
  .dialog:not([hidden]) .dialog-card{animation:rise .24s cubic-bezier(.2,.8,.2,1)}
  @keyframes fade{from{opacity:0}}
  @keyframes rise{from{transform:translateY(24px);opacity:.4}}
}

/* ---------- Avisos ---------- */
.toast{position:fixed;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:110;max-width:420px;margin:0 auto;padding:12px 16px;border-radius:10px;font-size:15px;font-weight:600;box-shadow:var(--shadow);display:none}
.toast.show{display:block}
.toast-error{background:var(--bad);color:#fff}
.toast-ok{background:var(--ok);color:#fff}
[data-theme="dark"] .toast-error,[data-theme="dark"] .toast-ok{color:#10161e}

/* ---------- Estados vacíos y de carga ---------- */
.empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:15px}
.empty h2{margin-bottom:6px;font:600 1.3rem/1.2 var(--serif);color:var(--ink)}
.empty .btn{margin-top:16px}
.spinner{width:28px;height:28px;margin:0 auto 12px;border:3px solid var(--rule);border-top-color:var(--ink-2);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

html.theme-transition,html.theme-transition *{transition:background-color .35s ease,color .35s ease,border-color .35s ease!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}