/* ==========================================================================
   True Pharma — sistema de diseño
   Dirección: instrumento de laboratorio. Grafito, vidrio ámbar, lectura mono.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Color: primitivos */
  --ink:        #14181a;   /* grafito con desviación verde */
  --ink-2:      #1d2326;
  --ink-3:      #2a3237;
  --slate:      #3a4247;
  --slate-2:    #5c676d;
  --slate-3:    #8a959b;
  --paper:      #f7f6f3;   /* papel de laboratorio */
  --paper-2:    #efede8;
  --paper-3:    #e4e1da;
  --white:      #ffffff;

  --amber:      #c77a1e;   /* vidrio ámbar farmacéutico */
  --amber-lit:  #e8a33d;
  --amber-deep: #96590f;
  --amber-wash: #fdf4e6;

  --sage:       #6b8a7a;   /* positivo, clínico y apagado */
  --sage-wash:  #eef3f0;
  --brick:      #b4432e;   /* error */
  --brick-wash: #fbeeeb;

  /* Color: semánticos (claro) */
  --bg:            var(--paper);
  --bg-raised:     var(--white);
  --bg-sunken:     var(--paper-2);
  --border:        var(--paper-3);
  --border-strong: #d3cfc6;
  --text:          var(--ink);
  --text-2:        var(--slate);
  --text-3:        var(--slate-2);
  --accent:        var(--amber);
  --accent-text:   var(--amber-deep);
  --on-accent:     #1a1204;   /* tinta sobre ámbar: 5.50:1 (el blanco daba 3.37) */

  /* Tipografía */
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala fluida entre 360px y 1240px: el tipo se ajusta solo, sin saltos.
     El mínimo del cuerpo se queda en 1rem para no disparar el zoom de iOS. */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.8125rem);
  --step-0:  clamp(1rem,    0.97rem + 0.13vw, 1.0625rem);
  --step-1:  clamp(1.06rem, 1.00rem + 0.28vw, 1.1875rem);
  --step-2:  clamp(1.22rem, 1.10rem + 0.52vw, 1.4375rem);
  --step-3:  clamp(1.42rem, 1.20rem + 0.98vw, 1.875rem);
  --step-4:  clamp(1.70rem, 1.32rem + 1.68vw, 2.5rem);
  --step-5:  clamp(2.10rem, 1.50rem + 2.65vw, 3.25rem);

  /* Espaciado de página, también fluido. */
  --gutter: clamp(0.875rem, 0.55rem + 1.6vw, 1.75rem);

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

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px;

  /* Altura única de control: inputs y selects miden exactamente lo mismo. */
  --control-h:    46px;
  --control-h-sm: 36px;

  /* Elevación */
  --sh-1: 0 1px 2px rgb(20 24 26 / 0.06), 0 1px 1px rgb(20 24 26 / 0.04);
  --sh-2: 0 4px 12px rgb(20 24 26 / 0.08), 0 1px 3px rgb(20 24 26 / 0.05);
  --sh-3: 0 12px 32px rgb(20 24 26 / 0.14), 0 4px 8px rgb(20 24 26 / 0.06);
  --sh-4: 0 24px 64px rgb(20 24 26 / 0.24);

  /* Curvas — tomadas del sistema, no inventadas */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);


  /* --- Color por área terapéutica -------------------------------------
     Paleta categórica validada: banda de luminosidad, piso de croma,
     separación para daltonismo y contraste contra la superficie, en los dos
     temas. El orden es el que aparece en pantalla (alfabético), porque es ahí
     donde los colores quedan vecinos. Cada color viaja SIEMPRE con su
     etiqueta de texto: eso es lo que autoriza el par rojo↔agua, que queda en
     la banda baja de separación para daltonismo. */
  --area-cognitivo:  #2a78d6;
  --area-estetico:   #e87ba4;
  --area-hormonal:   #eda100;
  --area-inmune:     #008300;
  --area-longevidad: #4a3aa7;
  --area-metabolico: #eb6834;
  --area-reparacion: #1baf7a;
  --area-sexual:     #e34948;
  --area-insumos:    #8a959b;   /* no es área terapéutica: neutro a propósito */
  --area-otros:      #8a959b;

  /* Capas */
  --z-bar: 40; --z-drawer: 60; --z-modal: 80; --z-toast: 100;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--ink);
    --bg-raised:     var(--ink-2);
    --bg-sunken:     #0f1214;
    --border:        #2b3236;
    --border-strong: #3c4549;
    --text:          #eceae5;
    --text-2:        #b3bbbf;
    --text-3:        var(--slate-3);
    --accent:        var(--amber-lit);
    --accent-text:   var(--amber-lit);
    --on-accent:     #1a1204;
    --amber-wash:    #2a1f0e;
    --sage-wash:     #17221d;
    --brick:         #e08573;   /* 6.61:1 sobre el fondo oscuro; el original daba 3.22 */
    --brick-wash:    #2a1613;
    --sh-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --sh-2: 0 4px 12px rgb(0 0 0 / 0.45);
    --sh-3: 0 12px 32px rgb(0 0 0 / 0.55);
    --sh-4: 0 24px 64px rgb(0 0 0 / 0.7);

    /* Los mismos ocho tonos, escalonados para el fondo oscuro. */
    --area-cognitivo:  #3987e5;
    --area-estetico:   #d55181;
    --area-hormonal:   #c98500;
    --area-inmune:     #008300;
    --area-longevidad: #9085e9;
    --area-metabolico: #d95926;
    --area-reparacion: #199e70;
    --area-sexual:     #e66767;
    --area-insumos:    #7c878d;
    --area-otros:      #7c878d;
  }
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 132px;   /* el encabezado fijo no debe tapar el foco */
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-wrap: break-word;   /* un correo o un RFC largo no ensancha la página */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  overflow-wrap: normal;   /* un título jamás se parte letra por letra */
  text-wrap: pretty;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:where(a) { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Foco visible en todo lo interactivo. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Toda cifra en mono tabular: nada baila al cambiar de valor. */
.num, .money, input[inputmode="numeric"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.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;
}

.hidden { display: none !important; }

/* El atributo `hidden` pierde contra cualquier `display` de clase.
   Sin esto, un panel "oculto" sigue pintándose encima de la página. */
[hidden] { display: none !important; }

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px;                       /* objetivo táctil */
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  color: var(--text);
  font-weight: 500;
  font-size: var(--step-0);
  text-decoration: none;
  touch-action: manipulation;             /* mata el retardo de 300ms */
  transition: transform 160ms var(--ease-out),
              background-color 160ms ease,
              border-color 160ms ease,
              box-shadow 160ms ease,
              opacity 160ms ease;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--accent); color: var(--on-accent);
  border-color: transparent; box-shadow: var(--sh-1); font-weight: 600;
}
.btn--ghost  { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
.btn--quiet  { background: transparent; border-color: transparent; color: var(--text-3); min-height: 36px; padding: 0 var(--s-3); }
.btn--danger { background: transparent; border-color: var(--brick); color: var(--brick); }
.btn--block  { width: 100%; }
.btn--lg     { min-height: 52px; font-size: var(--step-1); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.42; cursor: not-allowed; transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not([disabled]) { background: var(--amber-lit); box-shadow: var(--sh-2); }
  .btn--ghost:hover:not([disabled])   { background: var(--bg-sunken); color: var(--text); }
  .btn--quiet:hover:not([disabled])   { background: var(--bg-sunken); color: var(--text); }
  .btn--danger:hover:not([disabled])  { background: var(--brick-wash); }
}

/* Estado de carga: el botón no se puede volver a disparar. */
.btn[data-loading="true"] { pointer-events: none; opacity: 0.7; }
.btn[data-loading="true"] .btn__label { opacity: 0.5; }
.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Campos ------------------------------------------------------------- */
.field {
  display: grid;
  gap: var(--s-2);
  align-content: start;   /* si la fila crece, el control no se estira con ella */
  min-width: 0;
}
/* El control conserva su alto natural aunque la celda sea más alta. */
.field > .input, .field > select.input, .field > input.input { align-self: start; }
.field > label { font-size: var(--step--1); font-weight: 500; color: var(--text-2); }
.field .req { color: var(--brick); }

.input {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s-3);
  line-height: 1.35;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--step-0);              /* 16px: evita el zoom de iOS */
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.input::placeholder { color: var(--text-3); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input[aria-invalid="true"] { border-color: var(--brick); }
.input[readonly] { background: var(--bg-sunken); color: var(--text-2); }

/* El select nativo se dibuja distinto en cada sistema: se normaliza para que
   quede a la misma altura y con la misma flecha que el resto. */
/* Misma altura exacta para lo que no es área de texto. */
input.input, select.input { height: var(--control-h); }
textarea.input { height: auto; }

select.input {
  appearance: none;
  padding-inline-end: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
select.input--sm { height: var(--control-h-sm); padding-inline-end: 32px;
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px); }
[dir="rtl"] select.input { background-position: 19px calc(50% + 1px), 13px calc(50% + 1px); }

.field__error {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--step--1); color: var(--brick);
}
.field__hint { font-size: var(--step--1); color: var(--text-3); }
/* Marca de campo no obligatorio: se lee sin competirle a la etiqueta. */
.field__opt {
  margin-inline-start: var(--s-2);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}

/* --- Superficies -------------------------------------------------------- */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.note {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: var(--step--1);
  color: var(--text-2);
}
.note--amber { background: var(--amber-wash); border-color: color-mix(in srgb, var(--amber) 28%, transparent); color: var(--accent-text); }
.note--sage  { background: var(--sage-wash);  border-color: color-mix(in srgb, var(--sage)  32%, transparent); }
.note--brick { background: var(--brick-wash); border-color: color-mix(in srgb, var(--brick) 30%, transparent); color: var(--brick); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  white-space: nowrap;
}
.tag--sage  { background: var(--sage-wash);  border-color: color-mix(in srgb, var(--sage) 40%, transparent);  color: #46614f; }
.tag--amber { background: var(--amber-wash); border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--accent-text); }
.tag--brick { background: var(--brick-wash); border-color: color-mix(in srgb, var(--brick) 40%, transparent); color: var(--brick); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag--sage { color: #9dbdab; }
}

/* --- El vial: medidor de regalo ----------------------------------------- */
/* Elemento firma. El líquido ámbar sube conforme crece el pedido y las marcas
   grabadas son los umbrales reales de $6,000 y $10,000. */
.vial { display: flex; align-items: center; gap: var(--s-4); }
.vial__glass { flex: none; width: 46px; height: 118px; }

.vial__liquid-clip rect {
  transition: y 420ms var(--ease-out), height 420ms var(--ease-out);
}
.vial__meniscus { transition: transform 420ms var(--ease-out); }

.vial__copy { min-width: 0; }
.vial__title { font-weight: 600; font-size: var(--step--1); line-height: 1.35; }
.vial__sub   { font-size: var(--step--1); color: var(--text-3); margin-top: 2px; }

/* --- Barra de progreso compacta (móvil) --------------------------------- */
.rail {
  height: 3px; border-radius: 999px; background: var(--border); overflow: hidden;
}
.rail__fill {
  height: 100%; background: var(--accent); border-radius: 999px;
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

/* --- Tablas que no hacen scroll ------------------------------------------
   La tabla reacciona al ancho que REALMENTE tiene, no al de la ventana: así
   también se apila dentro de un modal angosto en una pantalla grande.
   Cuando no cabe, cada fila se vuelve una ficha de etiqueta y valor.
   Las etiquetas las pone el JS copiando el encabezado a cada celda. */
.tabla {
  width: 100%;
  container-type: inline-size;
  container-name: tabla;
}
.tabla table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.tabla th, .tabla td { padding: var(--s-3); text-align: start; vertical-align: top; }
/* Un correo largo no puede ser el que decida el ancho de la tabla: parte antes
   de empujar todo a desbordarse. Las cifras, los códigos y los teléfonos no se
   parten nunca — un importe cortado a media cifra se lee mal y engaña. */
.tabla td { overflow-wrap: anywhere; }
.tabla td.num,
.tabla td.row__mono,
.tabla td .row__mono { overflow-wrap: normal; word-break: keep-all; }
.tabla th {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabla tbody tr { border-bottom: 1px solid var(--border); }
.tabla tbody tr:last-child { border-bottom: none; }
.tabla td.num, .tabla th.num {
  text-align: end;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .tabla tbody tr:hover { background: var(--bg-sunken); }
}

/* El apilado, en un solo lugar, reutilizable por la consulta de contenedor
   y por la de ventana para los navegadores que no la soporten. */
@container tabla (max-width: 700px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla table, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-2);
    margin-bottom: var(--s-2);
    background: var(--bg-raised);
  }
  .tabla td {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: var(--s-3);
    align-items: baseline;
    padding: var(--s-2);
    text-align: start;
  }
  .tabla td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  }
  /* Las celdas sin encabezado (los botones) ocupan todo el ancho. */
  .tabla td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .tabla td[data-label=""]::before { content: none; }
}

/* Respaldo para navegadores sin consultas de contenedor. */
@supports not (container-type: inline-size) {
  @media (max-width: 860px) {
    .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabla table, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
    .tabla tbody tr {
      border: 1px solid var(--border); border-radius: var(--r-md);
      padding: var(--s-2); margin-bottom: var(--s-2); background: var(--bg-raised);
    }
    .tabla td {
      display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
      gap: var(--s-3); align-items: baseline; padding: var(--s-2); text-align: start;
    }
    .tabla td::before {
      content: attr(data-label);
      font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
    }
    .tabla td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
    .tabla td[data-label=""]::before { content: none; }
  }
}




/* --- Contador de cantidad ------------------------------------------------
   Se perdió al rediseñar la tarjeta de producto y el cajón quedó con los
   botones por omisión del navegador, ilegibles sobre fondo oscuro. */
.stepper { display: flex; align-items: center; gap: 2px; flex: none; }
.stepper button {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 1.05rem; line-height: 1; font-weight: 500;
  transition: background-color 140ms ease, color 140ms ease,
              border-color 140ms ease, transform 140ms var(--ease-out), opacity 140ms ease;
}
.stepper button:active { transform: scale(0.9); }
.stepper button[disabled] { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .stepper button:not([disabled]):hover {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  }
}
.stepper input {
  width: 52px; height: 36px;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--text);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--step--1); font-weight: 600;
  -moz-appearance: textfield;
}
.stepper input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (pointer: coarse) {
  .stepper button { width: 42px; height: 42px; }
  .stepper input  { width: 58px; height: 42px; }
}

/* --- Etiqueta de área (la usan el sitio y el panel) ----------------------
   El punto de color acompaña siempre al nombre: la identidad nunca depende
   del color solo, que es lo que permite usar esta paleta. */
.area-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--area) 34%, transparent);
  background: color-mix(in srgb, var(--area) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.area-tag::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--area);
}

/* --- Lecturas y resúmenes (los usan el sitio y el panel) ----------------- */
.readout { display: grid; gap: var(--s-3); }
.readout__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--step--1);
}
.readout__row > span { color: var(--text-3); min-width: 0; }
.readout__row > b    { font-weight: 600; white-space: nowrap; }

/* Bloque para confirmar datos capturados. */
.recap {
  display: grid; gap: var(--s-1);
  padding: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-sunken);
  font-size: var(--step--1);
}
.recap > b { font-weight: 600; }
.recap > span { color: var(--text-2); }

/* --- Sobrecapas: fondo + panel ------------------------------------------ */
.scrim {
  position: fixed; inset: 0;
  background: rgb(12 15 16 / 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out);
  backdrop-filter: blur(2px);            /* el desenfoque señala "el fondo se descarta" */
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* Cada fondo se apila justo debajo de su panel; si no, el cajón se queda
   iluminado por encima del oscurecimiento del modal. */
#drawerScrim { z-index: calc(var(--z-drawer) - 1); }
#modalScrim  { z-index: calc(var(--z-modal)  - 1); }
#detalleScrim { z-index: calc(var(--z-modal) - 1); }

/* Cajón lateral */
.drawer {
  position: fixed; z-index: var(--z-drawer);
  inset-block: 0; inset-inline-end: 0;
  width: min(430px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--sh-4);
  transform: translateX(100%);
  transition: transform 500ms var(--ease-drawer);
}
.drawer[data-open="true"] { transform: translateX(0); }

@media (max-width: 640px) {
  .drawer {
    inset-block-start: auto; inset-inline: 0;
    height: min(88dvh, 780px);
    width: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-inline-start: none;
    border-block-start: 1px solid var(--border);
    transform: translateY(100%);
  }
  .drawer[data-open="true"] { transform: translateY(0); }
}

/* Modal centrado: exento de transform-origin, no cuelga de un disparador. */
.modal {
  position: fixed; z-index: var(--z-modal);
  inset-block-start: 50%; inset-inline-start: 50%;
  width: min(620px, calc(100vw - 2 * var(--s-4)));
  max-height: min(88dvh, 900px);
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.modal[data-open="true"] { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

.panel__head {
  flex: none;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.panel__head h2 { font-size: var(--step-2); flex: 1; min-width: 0; }
.panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5); }
.panel__foot {
  flex: none; display: grid; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
}

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--text-2);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--bg-sunken); color: var(--text); }
}

/* --- Avisos (toast) ----------------------------------------------------- */
.toasts {
  position: fixed; z-index: var(--z-toast);
  inset-block-end: max(var(--s-4), env(safe-area-inset-bottom));
  inset-inline: var(--s-4);
  display: grid; gap: var(--s-2); justify-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  max-width: min(460px, 100%);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ink); color: var(--paper);
  box-shadow: var(--sh-3);
  font-size: var(--step--1);
  pointer-events: auto;
  /* Transiciones, no keyframes: se pueden disparar en ráfaga y deben re-apuntar. */
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
}
@starting-style { .toast { opacity: 0; transform: translateY(100%); } }
.toast[data-leaving="true"] { opacity: 0; transform: translateY(100%); }
.toast--bad  { background: #b4432e; color: #fff; }   /* fijo: 5.55:1 en ambos temas */
.toast--good { background: #2f4a3a; color: #eaf3ee; }

/* --- Entrada escalonada de la rejilla ----------------------------------- */
/* Decorativa: nunca bloquea la interacción, y solo en la primera carga. */
@media (prefers-reduced-motion: no-preference) {
  .stagger > * {
    opacity: 0;
    transform: translateY(8px);
    animation: rise 300ms var(--ease-out) forwards;
  }
  .stagger > *:nth-child(1) { animation-delay: 0ms; }
  .stagger > *:nth-child(2) { animation-delay: 40ms; }
  .stagger > *:nth-child(3) { animation-delay: 80ms; }
  .stagger > *:nth-child(4) { animation-delay: 120ms; }
  .stagger > *:nth-child(5) { animation-delay: 160ms; }
  .stagger > *:nth-child(6) { animation-delay: 200ms; }
  .stagger > *:nth-child(n+7) { animation-delay: 240ms; }
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* --- Esqueletos de carga ------------------------------------------------ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--border) 37%, var(--bg-sunken) 63%);
  background-size: 400% 100%;
  border-radius: var(--r-sm);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -135% 0; } }

/* --- Movimiento reducido ------------------------------------------------ */
/* Menos y más suave, no cero: se conservan opacidad y color, se quita el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  .drawer, .modal { transition-property: opacity; transform: none !important; }
  .drawer { transform: none !important; }
  .drawer:not([data-open="true"]) { display: none; }
  .modal:not([data-open="true"]) { display: none; }
  .stagger > * { opacity: 1; transform: none; animation: none; }
  .skeleton { animation: none; }
}