:root{
  --navy:#14264A; --red:#C8182F; --green:#0E7C3A;
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#EEF2F9; --surface-3:#E2E8F4;
  --ink:#101E3C; --ink-soft:#56627E; --line:#DCE2EE;
  --cta:#C8182F; --cta-hover:#A91327; --pos:#0E7C3A; --warn:#B45309; --bad:#C8182F;
  --tint-red:#FBEAEC; --tint-green:#E6F2EA; --tint-amber:#FDF1E1; --tint-blue:#E8EBF2;
  --sel:#14264A; --on-sel:#FFFFFF; --focus:#14264A;
  --font:"Outfit","Nunito","Segoe UI",system-ui,sans-serif;
  --cond:"Oswald","Arial Narrow",Impact,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#070D1B; --surface:#0F1A31; --surface-2:#14223E; --surface-3:#1C2D51;
  --ink:#ECF1FB; --ink-soft:#A2AFCB; --line:#233559;
  --cta:#D92B42; --cta-hover:#E84A5F; --pos:#46C477; --warn:#F2A541; --bad:#F04A60;
  --tint-red:#2A1624; --tint-green:#10261E; --tint-amber:#2A2112; --tint-blue:#16264A;
  --sel:#EEF2F9; --on-sel:#14264A; --focus:#F2F5FA; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#070D1B; --surface:#0F1A31; --surface-2:#14223E; --surface-3:#1C2D51;
  --ink:#ECF1FB; --ink-soft:#A2AFCB; --line:#233559;
  --cta:#D92B42; --cta-hover:#E84A5F; --pos:#46C477; --warn:#F2A541; --bad:#F04A60;
  --tint-red:#2A1624; --tint-green:#10261E; --tint-amber:#2A2112; --tint-blue:#16264A;
  --sel:#EEF2F9; --on-sel:#14264A; --focus:#F2F5FA; color-scheme:dark;}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:10px}
[hidden]{display:none!important}
.num{font-family:var(--cond);font-weight:500}
.muted{color:var(--ink-soft)}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(.8rem,2.5vw,1.6rem)}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:0}

/* Botones y campos */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:999px;padding:.6rem 1.15rem;font-weight:500;border:1px solid var(--line);background:var(--surface);cursor:pointer;white-space:nowrap;text-decoration:none}
.pill:hover{border-color:var(--ink-soft)}
.pill.primary{background:var(--cta);border-color:var(--cta);color:#fff}
.pill.primary:hover{background:var(--cta-hover)}
.pill.small{padding:.4rem .85rem;font-size:.9rem}
.pill.danger{color:var(--bad)}
.pill:disabled{opacity:.5;cursor:default}
.icon-btn{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;cursor:pointer}
.icon-btn svg{width:19px;height:19px}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:.65rem .85rem}
textarea.input{resize:vertical;min-height:72px}
.field label,.label{display:block;font-weight:500;font-size:.92rem;margin-bottom:.3rem}
.hint{font-size:.84rem;color:var(--ink-soft);margin:.3rem 0 0}
.err{font-size:.9rem;color:var(--bad);margin:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:1.3rem}

/* Chips de selección (radio) */
.choice{display:flex;flex-wrap:wrap;gap:.4rem}
.choice label{margin:0;font-weight:400}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:inline-block;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:.5rem .9rem;font-size:.95rem;cursor:pointer}
.choice input:checked+span{background:var(--sel);color:var(--on-sel);border-color:var(--sel)}
.choice input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}

/* Etiquetas */
.badge{display:inline-block;font-size:.76rem;font-weight:500;border-radius:999px;padding:.15rem .6rem;white-space:nowrap}
.badge.bad{background:var(--tint-red);color:var(--bad)}
.badge.warn{background:var(--tint-amber);color:var(--warn)}
.badge.ok{background:var(--tint-green);color:var(--pos)}
.badge.new{background:var(--cta);color:#fff}
.badge.neutral{background:var(--surface-2);color:var(--ink-soft)}

/* Aviso flotante */
.toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);opacity:0;background:var(--navy);color:#fff;padding:.75rem 1.2rem;border-radius:999px;font-size:.95rem;transition:.25s;pointer-events:none;z-index:80;max-width:calc(100% - 2rem);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--bad)}

/* Barra superior */
.top{position:sticky;top:0;z-index:20;background:var(--bg);padding:calc(.8rem + env(safe-area-inset-top,0px)) 0 .8rem;margin-top:calc(-1*env(safe-area-inset-top,0px))}
.bar{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.45rem .5rem .45rem .9rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:500;font-size:1.05rem;white-space:nowrap;text-decoration:none}
.brand img{width:36px;height:36px;object-fit:contain}
.tabs{display:flex;gap:.2rem;background:var(--surface-2);border-radius:999px;padding:.25rem;margin-left:.5rem;overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:transparent;border-radius:999px;padding:.5rem 1rem;cursor:pointer;font-weight:500;font-size:.95rem;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--sel);color:var(--on-sel)}
.bar-end{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.me{font-size:.92rem;text-align:right;line-height:1.2}
.me small{display:block;color:var(--ink-soft)}

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