/* ==========================================================================
   L-SAG UI · Sistema de diseño compartido
   Un solo archivo para todo el sistema. Cambiar un color aquí lo cambia
   en todas las pantallas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — modo claro (base)
   -------------------------------------------------------------------------- */
:root{
  /* Fondos */
  --bg:#eef1f6;
  --bg-sunken:#e3e8f0;
  --surface:#ffffff;
  --surface-2:#f5f7fb;
  --surface-3:#eaeef5;

  /* Texto */
  --text:#0b1220;
  --text-2:#4a5568;
  --text-3:#8492a6;
  --text-on-accent:#ffffff;

  /* Bordes */
  --line:#dbe1ea;
  --line-2:#c6cfdc;

  /* Marca */
  --brand:#1b5fd9;
  --brand-2:#2979ff;
  --brand-ink:#12409a;
  --brand-soft:#e7effd;
  --magenta:#b100d1;
  --magenta-soft:#f8e6fc;

  /* Semánticos */
  --ok:#00875a;        --ok-soft:#e3f5ed;
  --warn:#9a6100;      --warn-soft:#fdf0da;
  --bad:#c32b2b;       --bad-soft:#fbe8e8;
  --info:#0f6fa8;      --info-soft:#e3f1f9;

  /* Formas */
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:22px; --r-full:999px;

  /* Sombras */
  --sh-1:0 1px 2px rgba(11,18,32,.06), 0 2px 8px rgba(11,18,32,.05);
  --sh-2:0 4px 12px rgba(11,18,32,.08), 0 12px 32px rgba(11,18,32,.08);
  --sh-3:0 18px 50px rgba(11,18,32,.16);

  /* Tipografía */
  --f-display:'Bricolage Grotesque','Outfit',system-ui,sans-serif;
  --f-body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Escala tipográfica fluida */
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.0625rem;
  --t-lg:clamp(1.125rem,.9rem + .6vw,1.3rem);
  --t-xl:clamp(1.4rem,1.1rem + 1.1vw,1.85rem);
  --t-2xl:clamp(1.8rem,1.3rem + 2.1vw,2.6rem);
  --t-3xl:clamp(2.3rem,1.5rem + 3.6vw,4rem);

  /* Espaciado */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --gutter:clamp(16px,5vw,40px);
  --maxw:1180px;

  --ease:cubic-bezier(.4,0,.2,1);
  --t:.2s var(--ease);

  color-scheme:light;
}

/* --------------------------------------------------------------------------
   2. TOKENS — modo oscuro
   Se activa por preferencia del sistema o por data-theme="dark".
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#060a12;
    --bg-sunken:#03060c;
    --surface:#0e1621;
    --surface-2:#131d2b;
    --surface-3:#1b2737;

    --text:#f2f6fc;
    --text-2:#a3b1c6;
    --text-3:#6f7f96;

    --line:rgba(255,255,255,.10);
    --line-2:rgba(255,255,255,.20);

    --brand:#4d8dff;
    --brand-2:#2979ff;
    --brand-ink:#8fb8ff;
    --brand-soft:rgba(41,121,255,.16);
    --magenta:#e357fb;
    --magenta-soft:rgba(213,0,249,.16);

    --ok:#34d399;       --ok-soft:rgba(0,230,118,.14);
    --warn:#f2b23c;     --warn-soft:rgba(255,171,0,.14);
    --bad:#ff7b7b;      --bad-soft:rgba(255,82,82,.14);
    --info:#5ec2f0;     --info-soft:rgba(56,189,248,.14);

    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
    --sh-2:0 6px 18px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.4);
    --sh-3:0 24px 60px rgba(0,0,0,.6);

    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#060a12;
  --bg-sunken:#03060c;
  --surface:#0e1621;
  --surface-2:#131d2b;
  --surface-3:#1b2737;
  --text:#f2f6fc;
  --text-2:#a3b1c6;
  --text-3:#6f7f96;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --brand:#4d8dff;
  --brand-2:#2979ff;
  --brand-ink:#8fb8ff;
  --brand-soft:rgba(41,121,255,.16);
  --magenta:#e357fb;
  --magenta-soft:rgba(213,0,249,.16);
  --ok:#34d399;       --ok-soft:rgba(0,230,118,.14);
  --warn:#f2b23c;     --warn-soft:rgba(255,171,0,.14);
  --bad:#ff7b7b;      --bad-soft:rgba(255,82,82,.14);
  --info:#5ec2f0;     --info-soft:rgba(56,189,248,.14);
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --sh-2:0 6px 18px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.4);
  --sh-3:0 24px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--f-body);
  font-size:var(--t-md);
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand);color:#fff}

/* Salto al contenido — accesibilidad de teclado */
.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:999;
  background:var(--brand);color:#fff;padding:12px 20px;border-radius:var(--r-1);
  font-weight:700;transition:top var(--t);text-decoration:none;
}
.skip-link:focus{top:var(--s-4)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.center{align-items:center;justify-content:center}

/* --------------------------------------------------------------------------
   5. BOTONES — altura mínima 44px para uso táctil
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:11px 20px;
  font-family:var(--f-body);font-size:var(--t-base);font-weight:700;
  border-radius:var(--r-2);border:1px solid var(--line);
  background:var(--surface);color:var(--text);
  cursor:pointer;transition:var(--t);text-decoration:none;
  white-space:nowrap;user-select:none;
}
.btn:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:var(--sh-1)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-brand{
  background:linear-gradient(135deg,var(--brand-2),var(--magenta));
  border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(41,121,255,.28);
}
.btn-brand:hover{box-shadow:0 10px 26px rgba(177,0,209,.32)}
.btn-solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-solid:hover{opacity:.9}
.btn-quiet{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-quiet:hover{background:var(--surface-3);color:var(--text);box-shadow:none}
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.btn-lg{min-height:54px;padding:15px 30px;font-size:var(--t-lg);border-radius:var(--r-3)}
.btn-sm{min-height:36px;padding:7px 14px;font-size:var(--t-sm);border-radius:var(--r-1)}
.btn-icon{width:44px;padding:0;flex-shrink:0}
.btn-block{width:100%}

/* --------------------------------------------------------------------------
   6. FORMULARIOS
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label,.label{
  font-size:var(--t-sm);font-weight:700;color:var(--text-2);
}
.label-req::after{content:' *';color:var(--bad)}

.control{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:var(--f-body);font-size:var(--t-base);
  background:var(--surface);color:var(--text);
  border:1.5px solid var(--line);border-radius:var(--r-2);
  transition:var(--t);
}
.control::placeholder{color:var(--text-3)}
.control:hover:not(:disabled){border-color:var(--line-2)}
.control:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);outline:none}
.control:disabled{opacity:.55;cursor:not-allowed;background:var(--surface-2)}
.control[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
textarea.control{min-height:96px;resize:vertical;line-height:1.5}
select.control{
  cursor:pointer;appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238492a6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
:root[data-theme="dark"] select.control,
:root:not([data-theme="light"]) select.control{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7f96' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Campo con icono a la izquierda */
.control-wrap{position:relative;display:flex;align-items:center}
.control-wrap > .ico{
  position:absolute;left:14px;color:var(--text-3);font-size:1.05rem;
  pointer-events:none;transition:var(--t);
}
.control-wrap:focus-within > .ico{color:var(--brand)}
.control-wrap > .control{padding-left:42px}
.control-wrap > .act{
  position:absolute;right:6px;width:38px;height:38px;
  display:grid;place-content:center;border-radius:var(--r-1);
  color:var(--text-3);cursor:pointer;transition:var(--t);
}
.control-wrap > .act:hover{color:var(--brand);background:var(--surface-3)}
.control-wrap:has(> .act) > .control{padding-right:50px}

/* Mensajes de campo */
.hint{font-size:var(--t-xs);color:var(--text-3)}
.error-msg{
  display:none;align-items:center;gap:6px;
  font-size:var(--t-xs);font-weight:700;color:var(--bad);
}
.field.is-bad .error-msg{display:flex}

/* Casilla y switch */
.check-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--t-sm)}
.check-row input[type="checkbox"],
.check-row input[type="radio"]{
  width:20px;height:20px;flex-shrink:0;margin-top:2px;
  accent-color:var(--brand);cursor:pointer;
}

/* --------------------------------------------------------------------------
   7. SUPERFICIES
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);box-shadow:var(--sh-1);
}
.card-pad{padding:clamp(20px,3vw,30px)}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-full);
  font-size:var(--t-xs);font-weight:700;line-height:1.4;
  background:var(--surface-3);color:var(--text-2);
  border:1px solid transparent;
}
.pill-brand{background:var(--brand-soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 25%,transparent)}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-bad{background:var(--bad-soft);color:var(--bad)}

.eyebrow{
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}

.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   8. MARCA
   -------------------------------------------------------------------------- */
.brandmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brandmark .glyph{
  width:38px;height:38px;flex-shrink:0;
  display:grid;place-content:center;border-radius:11px;
  background:linear-gradient(135deg,var(--brand-2),var(--magenta));
  color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.05rem;
  box-shadow:0 4px 14px rgba(41,121,255,.3);
}
.brandmark .name{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em}
.brandmark .name span{color:var(--text-3);font-weight:600}

/* --------------------------------------------------------------------------
   9. AVISOS
   -------------------------------------------------------------------------- */
.note{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:var(--r-2);
  font-size:var(--t-sm);line-height:1.5;
  border:1px solid transparent;
}
.note > i{font-size:1.15rem;flex-shrink:0;margin-top:1px}
.note-info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 22%,transparent)}
.note-ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 22%,transparent)}
.note-warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 22%,transparent)}
.note-bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 22%,transparent)}

/* --------------------------------------------------------------------------
   10. DIÁLOGO MODAL
   -------------------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:200;
  display:none;place-items:center;padding:var(--s-4);
  background:color-mix(in srgb,var(--bg-sunken) 88%,transparent);
  backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s var(--ease);
}
.modal.is-open{display:grid}
.modal.is-shown{opacity:1}
.modal-box{
  width:100%;max-width:420px;padding:clamp(24px,5vw,36px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-4);box-shadow:var(--sh-3);text-align:center;
  transform:scale(.94) translateY(12px);transition:transform .24s var(--ease);
}
.modal.is-shown .modal-box{transform:none}
.modal-box .mico{font-size:3rem;line-height:1;margin-bottom:var(--s-3)}
.modal-box h3{font-size:var(--t-xl);margin-bottom:var(--s-2)}
.modal-box p{color:var(--text-2);font-size:var(--t-base);margin-bottom:var(--s-5)}

/* --------------------------------------------------------------------------
   11. CARGANDO
   -------------------------------------------------------------------------- */
.spin{
  display:inline-block;width:1em;height:1em;flex-shrink:0;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:lsag-spin .7s linear infinite;
}
@keyframes lsag-spin{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------------------
   12. BARRA DE DESPLAZAMIENTO
   -------------------------------------------------------------------------- */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:var(--r-full);
  border:3px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box}

/* --------------------------------------------------------------------------
   13. UTILIDADES
   -------------------------------------------------------------------------- */
.t-2{color:var(--text-2)}
.t-3{color:var(--text-3)}
.t-center{text-align:center}
.mono{font-family:var(--f-mono)}
.hide{display:none!important}
@media (max-width:700px){ .hide-sm{display:none!important} }
@media (min-width:701px){ .only-sm{display:none!important} }