/*
 * Amber Labs Design System — Design Tokens
 *
 * Fuente única de verdad para colores, tipografía, espaciado, radios y sombras.
 * Aplicado a través de stylesheet_link_tag "amber_tokens" en los layouts.
 *
 * Marca: Amber Labs (https://amber.do)
 * Producto: Sistema de Asistencia Médica
 *
 * NO editar valores aquí sin actualizar docs/technical/design-system/tokens.md.
 */

/* =============================================================
 * FONTS — Self-hosted (woff2, latin subset)
 * Archivos en app/assets/fonts/, expuestos vía Propshaft load_path.
 * ============================================================= */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/dm-sans-400-normal-e31bd5eddc2415193e7398e18446249be75ca368076a053402583b62ea1c7717.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/dm-sans-400-italic-d8554931330ecc0b6bff9f979dcca8b6814db988a19ed4881080a23022b6f108.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/dm-sans-500-normal-e31bd5eddc2415193e7398e18446249be75ca368076a053402583b62ea1c7717.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/dm-sans-600-normal-e31bd5eddc2415193e7398e18446249be75ca368076a053402583b62ea1c7717.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/dm-sans-700-normal-e31bd5eddc2415193e7398e18446249be75ca368076a053402583b62ea1c7717.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/dm-serif-400-normal-5937c40326262f913fef77bdfd8b7773a8f086b6f0aa3780408bdaa654d43244.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/dm-serif-400-italic-987caded915857c01b7d8642af19e8b98b1913db7c72e659bf6a875ebd810d28.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/jb-mono-400-normal-7a113942f43a6eb1abb7988a222b61e703427d38a00c8acca19d9b19eeccea57.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/jb-mono-500-normal-7a113942f43a6eb1abb7988a222b61e703427d38a00c8acca19d9b19eeccea57.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/jb-mono-600-normal-7a113942f43a6eb1abb7988a222b61e703427d38a00c8acca19d9b19eeccea57.woff2) format('woff2');
}

:root {
  /* ============================================================
     COLOR — Rampas canónicas Amber Labs
     ============================================================ */

  /* Amber (acento de marca) */
  --amber-50:  #FFF8EC;
  --amber-100: #FEECC8;
  --amber-200: #FCD88D;
  --amber-300: #F9BF53;
  --amber-400: #F1A935;
  --amber-500: #E89B2B;   /* canonical brand */
  --amber-600: #C87A1C;
  --amber-700: #A15B15;
  --amber-800: #7B4412;
  --amber-900: #593211;
  --amber-950: #331B09;

  /* Espresso (neutros cálidos — NO grises fríos) */
  --espresso-0:   #FFFFFF;
  --espresso-25:  #FAF7F2;
  --espresso-50:  #F4EFEA;
  --espresso-100: #E9E1D7;
  --espresso-150: #D6CABC;
  --espresso-200: #BDAE9C;
  --espresso-300: #9D8C79;
  --espresso-400: #776656;
  --espresso-500: #5B4B3E;
  --espresso-600: #44372D;
  --espresso-700: #322821;
  --espresso-800: #231C17;
  --espresso-900: #1B1410;
  --espresso-950: #0E0B09;

  /* Clay (terracotta — soft accent / data-viz) */
  --clay-50:  #FBF1EC;
  --clay-200: #E9C3B0;
  --clay-400: #C8815E;
  --clay-500: #B36B48;
  --clay-600: #8F4F31;

  /* Clinical (gris frío para datos clínicos densos — se preserva) */
  --clinical-0:   #FFFFFF;
  --clinical-25:  #F8FAFB;
  --clinical-50:  #EEF2F4;
  --clinical-100: #E1E7EB;
  --clinical-150: #C9D2D8;
  --clinical-200: #A8B5BD;
  --clinical-300: #7B8B95;

  /* Pulse (verde clínico — saludable / éxito médico) */
  --pulse-50:  #E6F2EE;
  --pulse-100: #C4E0D5;
  --pulse-200: #8BC2AC;
  --pulse-400: #389B79;
  --pulse-500: #1F7E5C;
  --pulse-600: #155F45;
  --pulse-700: #0E4633;

  /* Semantic scales (mutados, no traffic-light) */
  --success-50:  #EEF4E8;
  --success-100: #DBE8CB;
  --success-500: var(--pulse-500);
  --success-600: var(--pulse-600);
  --success-700: var(--pulse-700);

  --warning-50:  #FEF6D8;
  --warning-100: #FBE9A0;
  --warning-500: #C49A1B;
  --warning-600: #9C7A10;
  --warning-700: #715808;

  --error-50:  #FCECE8;
  --error-100: #F7CDC1;
  --error-500: #C44630;
  --error-600: #9E3322;
  --error-700: #772317;

  --info-50:  #E7F1F1;
  --info-100: #C4DEDE;
  --info-500: #2F7A7B;
  --info-600: #1E5A5B;
  --info-700: #133F40;

  /* Safety (azul info clínico — preserva compatibilidad) */
  --safety-500: var(--info-500);

  /* ============================================================
     COLOR — Tokens semánticos (modo claro)
     ============================================================ */

  /* Fondos */
  --bg-canvas:  var(--espresso-25);
  --bg-surface: #FFFFFF;
  --bg-subtle:  var(--espresso-50);
  --bg-muted:   var(--espresso-100);
  --bg-inverse: var(--espresso-900);

  /* Texto */
  --fg-1:        var(--espresso-900);
  --fg-2:        var(--espresso-600);
  --fg-3:        var(--espresso-400);
  --fg-disabled: var(--espresso-200);
  --fg-inverse:  var(--espresso-25);
  --fg-brand:    var(--amber-700);
  --fg-on-brand: #FFFFFF;

  /* Bordes */
  --border-subtle:  var(--espresso-100);
  --border-default: var(--espresso-150);
  --border-strong:  var(--espresso-300);
  --border-brand:   var(--amber-500);

  /* Acentos / interactividad */
  --accent:            var(--amber-500);
  --accent-hover:      var(--amber-600);
  --accent-active:     var(--amber-700);
  --accent-soft:       var(--amber-50);
  --accent-soft-hover: var(--amber-100);

  /* Focus */
  --focus-ring: var(--amber-500);

  /* Signos vitales (rangos clínicos) */
  --vital-low-bg:      var(--clinical-50);
  --vital-low-fg:      var(--clinical-300);
  --vital-normal-bg:   var(--pulse-50);
  --vital-normal-fg:   var(--pulse-700);
  --vital-high-bg:     #FEF3DC;
  --vital-high-fg:     var(--amber-700);
  --vital-critical-bg: #F9DCD8;
  --vital-critical-fg: #8E2A1E;

  /* Especialidades médicas */
  --spec-cardiology:    #C84B3B;
  --spec-pediatrics:    #6BAF92;
  --spec-neurology:     #7355A8;
  --spec-orthopedics:   #4A6B8A;
  --spec-dermatology:   #D08C5F;
  --spec-gynecology:    #B85583;
  --spec-ophthalmology: #3D7A8E;
  --spec-general:       var(--amber-500);
  --spec-psychiatry:    #5B7EA8;
  --spec-oncology:      #8B6BA8;

  /* ============================================================
     TIPOGRAFÍA
     ============================================================ */

  --font-display: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala — pares (size / line-height). Se mantienen los nombres usados
     por componentes existentes para evitar churn innecesario. */
  --text-display-xl: 64px;   --lh-display-xl: 1.05;
  --text-display:    40px;   --lh-display:    1.1;
  --text-h1:         28px;   --lh-h1:         1.2;
  --text-h2:         22px;   --lh-h2:         1.3;
  --text-h3:         17px;   --lh-h3:         1.4;
  --text-h4:         15px;   --lh-h4:         1.4;
  --text-body:       15px;   --lh-body:       1.55;
  --text-body-sm:    13px;   --lh-body-sm:    1.5;
  --text-caption:    11px;   --lh-caption:    1.4;
  --text-mono:       13px;   --lh-mono:       1.5;
  --text-eyebrow:    11px;   --lh-eyebrow:    1.4;

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
     ESPACIADO (base 4px)
     ============================================================ */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     RADIOS
     ============================================================ */

  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   7px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ============================================================
     SOMBRAS (tinte cálido espresso — coherente con la marca)
     ============================================================ */

  --shadow-xs: 0 1px 0 0 rgb(27 20 16 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(27 20 16 / 0.05), 0 1px 1px -1px rgb(27 20 16 / 0.04);
  --shadow-md: 0 4px 10px -2px rgb(27 20 16 / 0.08), 0 2px 4px -2px rgb(27 20 16 / 0.05);
  --shadow-lg: 0 18px 30px -10px rgb(27 20 16 / 0.14), 0 8px 14px -6px rgb(27 20 16 / 0.08);
  --shadow-xl: 0 32px 60px -16px rgb(27 20 16 / 0.22), 0 12px 24px -8px rgb(27 20 16 / 0.10);
  --shadow-glow: 0 0 0 4px rgb(232 155 43 / 0.18);

  /* ============================================================
     MOTION
     ============================================================ */

  --dur-micro: 120ms;
  --dur-base:  200ms;
  --dur-overlay: 320ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
 * DARK MODE — activado vía [data-theme="dark"] en <html>
 * ============================================================= */

[data-theme="dark"] {
  --bg-canvas:  var(--espresso-950);
  --bg-surface: #161210;
  --bg-subtle:  #1E1813;
  --bg-muted:   #261E18;
  --bg-inverse: var(--espresso-25);

  --fg-1:        #F2EBE1;
  --fg-2:        #B0A395;
  --fg-3:        #7A6F62;
  --fg-disabled: #3C342C;
  --fg-inverse:  var(--espresso-900);
  --fg-brand:    var(--amber-400);
  --fg-on-brand: var(--espresso-950);

  --border-subtle:  #2A2320;
  --border-default: #3C332C;
  --border-strong:  #594D43;
  --border-brand:   var(--amber-400);

  --accent:            var(--amber-400);
  --accent-hover:      var(--amber-300);
  --accent-active:     var(--amber-200);
  --accent-soft:       rgb(232 155 43 / 0.12);
  --accent-soft-hover: rgb(232 155 43 / 0.20);

  --focus-ring: var(--amber-400);

  --shadow-xs: 0 1px 0 0 rgb(0 0 0 / 0.25);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.40), 0 1px 1px -1px rgb(0 0 0 / 0.30);
  --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.50), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 18px 30px -10px rgb(0 0 0 / 0.65), 0 8px 14px -6px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 32px 60px -16px rgb(0 0 0 / 0.75), 0 12px 24px -8px rgb(0 0 0 / 0.55);
  --shadow-glow: 0 0 0 4px rgb(241 169 53 / 0.24);
}

/* =============================================================
 * TIPO — clases drop-in
 * ============================================================= */

.type-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  line-height: var(--lh-display-xl);
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
}
.type-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-regular);
  letter-spacing: -0.015em;
}
.type-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}
.type-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
}
.type-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.type-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-semibold);
}
.type-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}
.type-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-regular);
}
.type-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.type-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--lh-mono);
  font-weight: var(--fw-regular);
  font-feature-settings: 'ss01';
}
.type-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  line-height: 1;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =============================================================
 * BASELINE
 * ============================================================= */

::selection {
  background: var(--amber-200);
  color: var(--espresso-900);
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* =============================================================
 * UTILIDADES — clases explícitas (Tailwind no detecta dinámicas)
 * ============================================================= */

/* Tipografía */
.amber-font-display { font-family: var(--font-display); }
.amber-font-sans    { font-family: var(--font-sans); }
.amber-font-mono    { font-family: var(--font-mono); }

/* Fondos por especialidad — para badges/labels dinámicos */
.amber-spec-cardiology    { background: var(--spec-cardiology);    color: white; }
.amber-spec-pediatrics    { background: var(--spec-pediatrics);    color: white; }
.amber-spec-neurology     { background: var(--spec-neurology);     color: white; }
.amber-spec-orthopedics   { background: var(--spec-orthopedics);   color: white; }
.amber-spec-dermatology   { background: var(--spec-dermatology);   color: white; }
.amber-spec-gynecology    { background: var(--spec-gynecology);    color: white; }
.amber-spec-ophthalmology { background: var(--spec-ophthalmology); color: white; }
.amber-spec-general       { background: var(--spec-general);       color: white; }
.amber-spec-psychiatry    { background: var(--spec-psychiatry);    color: white; }
.amber-spec-oncology      { background: var(--spec-oncology);      color: white; }

/* Estados de signos vitales */
.amber-vital-low      { background: var(--vital-low-bg);      color: var(--vital-low-fg); }
.amber-vital-normal   { background: var(--vital-normal-bg);   color: var(--vital-normal-fg); }
.amber-vital-high     { background: var(--vital-high-bg);     color: var(--vital-high-fg); }
.amber-vital-critical { background: var(--vital-critical-bg); color: var(--vital-critical-fg); }

/* Billing — Exportación fiscal DGII (app/views/billing/fiscal_exports).
   Clases de página que reemplazan estilos inline (design system). */
.billing-export-page      { display: flex; flex-direction: column; gap: 20px; }
.billing-export-title     { margin: 0; font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--lh-h1); color: var(--fg-1); }
.billing-export-subtitle  { margin: 4px 0 0; font-size: var(--text-body-sm); color: var(--fg-2); }
.billing-export-section-title { margin: 0 0 12px; font-family: var(--font-display); font-size: var(--text-h2); color: var(--fg-1); }
.billing-export-error-list { margin: 8px 0 0; padding-left: 20px; font-size: var(--text-body-sm); }
.billing-export-form      { display: flex; flex-direction: column; gap: 16px; }
.billing-export-grid      { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* Coberturas ARS (billing/coverage_policies): términos de la política,
   encabezados de sección y simulador. */
.coverage-policy__heading  { margin: 0; font-family: var(--font-display); font-size: var(--text-h2); color: var(--fg-1); }
.coverage-policy__terms    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0; }
.coverage-policy__terms dt { font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); }
.coverage-policy__terms dd { margin: 4px 0 0; font-size: var(--text-body); color: var(--fg-1); }
.coverage-policy__notes    { margin: 16px 0 0; font-size: var(--text-body-sm); color: var(--fg-2); white-space: pre-wrap; }
.coverage-policy__simulate { display: flex; align-items: flex-end; }
.coverage-policy__result   { margin-top: 20px; }
.coverage-policy__rule     { margin: 0; font-size: var(--text-body-sm); color: var(--fg-2); }

/* Cuenta clínica (admissions/account): número y avisos de cobertura por cargo. */
.clinical-account__number  { margin-left: 8px; font-size: var(--text-body); color: var(--fg-3); }
.clinical-account__warning { margin-top: 2px; font-size: var(--text-caption); color: var(--warning-700); }
.billing-export-choices   { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.billing-export-choice    { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); color: var(--fg-1); }
.billing-export-choice--disabled { color: var(--fg-3); cursor: not-allowed; }

/* =============================================================
 * EMR — clases dinámicas (Tailwind no detecta interpolaciones)
 * ============================================================= */

/* Encounter type badges (dinámico: emr-badge-<encounter_type>). No usar interpolación Ruby en comentarios: sassc la parsea. */
.emr-badge-ambulatory      { background: var(--accent-soft); color: var(--amber-800); }
.emr-badge-emergency       { background: #F9DCD8;            color: #8E2A1E; }
.emr-badge-hospitalization { background: #EDE7F4;            color: var(--spec-neurology); }

/* Encounter status badges (dinámico: emr-status-<status>) */
.emr-status-in_progress { background: var(--accent-soft); color: var(--amber-800); }
.emr-status-signed      { background: var(--pulse-50);    color: var(--pulse-700); }
.emr-status-addendum    { background: #FEF3DC;            color: var(--amber-800); }
.emr-status-voided      { background: #F9DCD8;            color: #8E2A1E; }

/* Encounter type CTA buttons */
.emr-btn-consulta,
.emr-btn-emergency,
.emr-btn-hospitalization {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  height: 34px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: white;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter var(--dur-micro) var(--ease-out);
}
.emr-btn-consulta:hover,
.emr-btn-emergency:hover,
.emr-btn-hospitalization:hover { filter: brightness(0.95); }

.emr-btn-consulta        { background: var(--accent);         border-color: var(--amber-600); }
.emr-btn-emergency       { background: var(--error-500);      border-color: var(--error-500); }
.emr-btn-hospitalization { background: var(--spec-neurology); border-color: var(--spec-neurology); }

/* Filter chips */
.emr-chip-active {
  background: var(--fg-1);
  color: white;
  border: 1px solid var(--fg-1);
}
.emr-chip-inactive {
  background: var(--bg-surface);
  color: var(--fg-2);
  border: 1px solid var(--clinical-150);
}
.emr-chip-inactive:hover { background: var(--clinical-50); }

/* =============================================================
 * COMPONENTES — clases para los partials de
 * app/views/shared/components/. Reemplazan estilos inline
 * que se reconstruían en cada render.
 * ============================================================= */

/* Button — _button.html.erb (sec C.01) */
.amber-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--dur-micro) var(--ease-out);
}
.amber-btn:hover { filter: brightness(0.96); }
.amber-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.amber-btn--sm { height: 28px; padding: 0 10px; font-size: 13px; }
.amber-btn--md { height: 34px; padding: 0 14px; font-size: 14px; }
.amber-btn--lg { height: 40px; padding: 0 18px; font-size: 15px; }
.amber-btn--primary   { background: var(--amber-500);  color: white;            border-color: var(--amber-600); }
.amber-btn--secondary { background: var(--clinical-0); color: var(--fg-1);      border-color: var(--clinical-150); }
.amber-btn--ghost     { background: transparent;       color: var(--fg-1); }
.amber-btn--danger    { background: var(--error-500);  color: white;            border-color: var(--error-500); }
.amber-btn--soft      { background: var(--amber-100);  color: var(--amber-800); border-color: var(--amber-200); }

/* Badge — _badge.html.erb (sec C.03) */
.amber-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.4;
}
.amber-badge--square { border-radius: var(--radius-xs); }
.amber-badge--sm { padding: 2px 8px;  font-size: 11px; }
.amber-badge--md { padding: 4px 10px; font-size: 12px; }
.amber-badge--neutral { background: var(--clinical-50); color: var(--fg-2);      border-color: var(--clinical-100); }
.amber-badge--accent  { background: var(--accent-soft); color: var(--amber-800); border-color: var(--amber-200); }
.amber-badge--pulse,
.amber-badge--success { background: var(--pulse-50);    color: var(--pulse-700); border-color: var(--pulse-100); }
.amber-badge--warning { background: #FEF3DC;            color: var(--amber-800); border-color: var(--amber-200); }
/* `danger` e `info` son alias de `error` y `safety`: vistas existentes (mapa de
   camas, campañas, reservas) los usan con la misma semántica que alert. */
.amber-badge--danger,
.amber-badge--error   { background: #F9DCD8;            color: #8E2A1E;          border-color: #F2BFB7; }
.amber-badge--info,
.amber-badge--safety  { background: #DCEAF5;            color: #1F4F7F;          border-color: #B8D4E8; }
.amber-badge--vital_low      { background: var(--vital-low-bg);      color: var(--vital-low-fg); }
.amber-badge--vital_normal   { background: var(--vital-normal-bg);   color: var(--vital-normal-fg); }
.amber-badge--vital_high     { background: var(--vital-high-bg);     color: var(--vital-high-fg); }
.amber-badge--vital_critical { background: var(--vital-critical-bg); color: var(--vital-critical-fg); }
.amber-badge--spec_cardiology    { background: var(--spec-cardiology);    color: white; }
.amber-badge--spec_pediatrics    { background: var(--spec-pediatrics);    color: white; }
.amber-badge--spec_neurology     { background: var(--spec-neurology);     color: white; }
.amber-badge--spec_orthopedics   { background: var(--spec-orthopedics);   color: white; }
.amber-badge--spec_dermatology   { background: var(--spec-dermatology);   color: white; }
.amber-badge--spec_gynecology    { background: var(--spec-gynecology);    color: white; }
.amber-badge--spec_ophthalmology { background: var(--spec-ophthalmology); color: white; }
.amber-badge--spec_general       { background: var(--spec-general);       color: white; }
.amber-badge--spec_psychiatry    { background: var(--spec-psychiatry);    color: white; }
.amber-badge--spec_oncology      { background: var(--spec-oncology);      color: white; }

/* Card — _card.html.erb (sec C.05) */
.amber-card {
  display: block;
  border: 1px solid var(--clinical-100);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--fg-1);
  text-decoration: none;
}
.amber-card--default     { box-shadow: var(--shadow-xs); }
.amber-card--elevated    { box-shadow: var(--shadow-md); }
.amber-card--flat        { box-shadow: none; }
.amber-card--subtle      { background: var(--bg-subtle); box-shadow: none; }
.amber-card--interactive {
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.amber-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.amber-card--p-none { padding: 0; }
.amber-card--p-sm   { padding: 12px; }
.amber-card--p-md   { padding: 20px; }
.amber-card--p-lg   { padding: 28px; }

/* Alert — _alert.html.erb */
.amber-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
}
.amber-alert--info    { background: #DCEAF5;            border-color: #B8D4E8;             color: #1F4F7F; }
.amber-alert--success { background: var(--pulse-50);    border-color: var(--pulse-100);    color: var(--pulse-700); }
.amber-alert--warning { background: #FEF3DC;            border-color: var(--amber-200);    color: var(--amber-800); }
.amber-alert--danger  { background: #F9DCD8;            border-color: #F2BFB7;             color: #8E2A1E; }
.amber-alert--neutral { background: var(--clinical-50); border-color: var(--clinical-100); color: var(--fg-2); }
.amber-alert__icon  { flex-shrink: 0; margin-top: 1px; }
.amber-alert__body  { flex: 1; min-width: 0; }
.amber-alert__title { margin-bottom: 2px; font-weight: 600; font-size: var(--text-body); }
.amber-alert__close { background: transparent; border: 0; padding: 0; line-height: 1; font-size: 18px; color: inherit; opacity: 0.7; cursor: pointer; }
.amber-alert__close:hover { opacity: 1; }

/* Field + Input — _input.html.erb (sec C.02) */
.amber-field { display: flex; flex-direction: column; gap: 4px; }
.amber-field__label    { font-size: var(--text-body-sm); font-weight: 500; color: var(--fg-2); }
.amber-field__required { color: var(--error-500); }
.amber-field__hint     { font-size: var(--text-caption); color: var(--fg-3); }
.amber-field__error    { font-size: var(--text-caption); color: var(--error-500); }
.amber-input {
  width: 100%;
  background: var(--bg-surface);
  color: var(--fg-1);
  border: 1px solid var(--clinical-150);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.amber-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.amber-input:disabled { background: var(--clinical-50); cursor: not-allowed; }
.amber-input--sm { height: 30px; padding: 0 10px; font-size: 13px; }
.amber-input--md { height: 36px; padding: 0 12px; font-size: 14px; }
.amber-input--lg { height: 42px; padding: 0 14px; font-size: 15px; }
.amber-input--invalid { border-color: var(--error-500); }
.amber-input-group {
  display: flex;
  align-items: stretch;
  background: var(--bg-surface);
  border: 1px solid var(--clinical-150);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.amber-input-group--invalid { border-color: var(--error-500); }
.amber-input-group .amber-input { border: 0; border-radius: 0; }
.amber-input-group__addon {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--clinical-50);
  color: var(--fg-3);
  font-size: 13px;
}
.amber-input-group__addon--prefix { border-right: 1px solid var(--clinical-150); }
.amber-input-group__addon--suffix { border-left:  1px solid var(--clinical-150); }

/* Avatar — _avatar.html.erb */
.amber-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: white;
  font-family: var(--font-sans);
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.amber-avatar img { width: 100%; height: 100%; object-fit: cover; }
.amber-avatar--square { border-radius: var(--radius-md); }
.amber-avatar--image  { background: transparent; }
.amber-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.amber-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.amber-avatar--md { width: 40px; height: 40px; font-size: 14px; }
.amber-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.amber-avatar--xl { width: 80px; height: 80px; font-size: 26px; }
.amber-avatar--c0 { background: #C84B3B; }
.amber-avatar--c1 { background: #6BAF92; }
.amber-avatar--c2 { background: #7355A8; }
.amber-avatar--c3 { background: #4A6B8A; }
.amber-avatar--c4 { background: #D08C5F; }
.amber-avatar--c5 { background: #B85583; }
.amber-avatar--c6 { background: #3D7A8E; }
.amber-avatar--c7 { background: #5B7EA8; }

/* Dropdown — _dropdown.html.erb */
.amber-dropdown { position: relative; display: inline-block; }
.amber-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  min-width: 180px;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--clinical-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.amber-dropdown__menu--right { right: 0; }
.amber-dropdown__menu--left  { left:  0; }
.amber-dropdown__item {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-1);
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.amber-dropdown__item:hover { background: var(--clinical-50); }
.amber-dropdown__item--danger        { color: var(--error-500); }
.amber-dropdown__item--danger:hover  { background: #F9DCD8; }
.amber-dropdown__divider { height: 1px; margin: 4px 0; background: var(--clinical-100); }

/* Empty state — _empty_state.html.erb */
.amber-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: var(--bg-subtle);
  border: 1px dashed var(--clinical-150);
  border-radius: var(--radius-lg);
}
.amber-empty__icon    { margin-bottom: 12px; color: var(--fg-3); }
.amber-empty__title   { margin: 0 0 6px;     font-family: var(--font-sans); font-size: var(--text-h3);      font-weight: 600; color: var(--fg-1); }
.amber-empty__message { margin: 0 0 16px;    font-size: var(--text-body-sm); color: var(--fg-2); max-width: 42ch; }

/* Modal — _modal.html.erb */
.amber-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(27, 20, 16, 0.55);
}
.amber-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.amber-modal--sm { max-width: 420px; }
.amber-modal--md { max-width: 560px; }
.amber-modal--lg { max-width: 760px; }
.amber-modal--xl { max-width: 980px; }
.amber-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--clinical-100);
}
.amber-modal__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--fg-1);
}
.amber-modal__close {
  background: transparent;
  border: 0;
  padding: 4px;
  line-height: 1;
  font-size: 22px;
  color: var(--fg-3);
  cursor: pointer;
}
.amber-modal__body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  font-family: var(--font-sans);
  color: var(--fg-1);
}

/* Pagination — _pagination.html.erb */
.amber-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 0;
}
.amber-pagination__link,
.amber-pagination__current,
.amber-pagination__disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  text-decoration: none;
  background: var(--bg-surface);
  color: var(--fg-2);
  border: 1px solid var(--clinical-100);
  border-radius: var(--radius-sm);
}
.amber-pagination__link:hover     { background: var(--clinical-50); }
.amber-pagination__current        { background: var(--amber-500); color: white; border-color: var(--amber-600); font-weight: 600; }
.amber-pagination__disabled       { background: var(--clinical-25); color: var(--fg-3); cursor: not-allowed; pointer-events: none; }
.amber-pagination__ellipsis       { padding: 0 6px; color: var(--fg-3); }

/* Select — _select.html.erb */
.amber-select {
  width: 100%;
  background-color: var(--bg-surface);
  color: var(--fg-1);
  border: 1px solid var(--clinical-150);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235B4B3E' stroke-width='1.5'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.amber-select:focus    { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.amber-select:disabled { background-color: var(--clinical-50); cursor: not-allowed; }
.amber-select--sm { height: 30px; padding: 0 30px 0 10px; font-size: 13px; }
.amber-select--md { height: 36px; padding: 0 32px 0 12px; font-size: 14px; }
.amber-select--lg { height: 42px; padding: 0 36px 0 14px; font-size: 15px; }
.amber-select--invalid { border-color: var(--error-500); }

/* Table — _table.html.erb */
.amber-table-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--clinical-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.amber-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.amber-table caption {
  padding: 14px 16px;
  text-align: left;
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--fg-1);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--clinical-100);
}
.amber-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  background: var(--clinical-25);
  border-bottom: 1px solid var(--clinical-100);
}
.amber-table td {
  font-size: var(--text-body-sm);
  color: var(--fg-1);
  vertical-align: middle;
  border-bottom: 1px solid var(--clinical-50);
}
.amber-table--data td        { padding: 8px 12px; }
.amber-table--listing td     { padding: 14px 16px; }
.amber-table--listing tbody tr:hover { background: var(--clinical-25); }

/* Tabs — _tabs.html.erb */
.amber-tabs { display: flex; gap: 4px; }
.amber-tabs--underline { border-bottom: 1px solid var(--clinical-100); }
.amber-tabs--pills {
  display: inline-flex;
  padding: 4px;
  background: var(--clinical-50);
  border-radius: var(--radius-md);
}
.amber-tabs__tab {
  font-family: var(--font-sans);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.amber-tabs--underline .amber-tabs__tab {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--fg-2);
  border-bottom: 2px solid transparent;
}
.amber-tabs--underline .amber-tabs__tab.is-active {
  color: var(--fg-brand);
  border-bottom-color: var(--accent);
}
.amber-tabs--pills .amber-tabs__tab {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--fg-2);
  border-radius: var(--radius-sm);
}
.amber-tabs--pills .amber-tabs__tab.is-active {
  color: var(--fg-1);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

/* Textarea — _textarea.html.erb */
.amber-textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-surface);
  color: var(--fg-1);
  border: 1px solid var(--clinical-150);
  border-radius: var(--radius-sm);
  resize: vertical;
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.amber-textarea:focus    { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.amber-textarea:disabled { background: var(--clinical-50); cursor: not-allowed; }
.amber-textarea--invalid { border-color: var(--error-500); }

/* ── Telemedicina: pantalla dividida (video | expediente) ───────────────── */
/* En pantallas estrechas el expediente pasa debajo del video. */
@media (max-width: 1024px) {
  .telehealth-split { grid-template-columns: minmax(0, 1fr) !important; }
  .telehealth-split #telehealth_patient_record { position: static !important; }
}

/* ── QR de alta del 2FA: el SVG de rqrcode se ajusta a su caja ───────────── */
.amber-qr svg { width: 100%; height: 100%; display: block; }

/* ── Tablas responsivas: bajo 640 px cada fila es una tarjeta etiquetada ──
   (responsive_table_controller.js rellena data-label desde el <thead>). */
@media (max-width: 640px) {
  .amber-table--responsive thead { display: none; }
  .amber-table--responsive,
  .amber-table--responsive tbody,
  .amber-table--responsive tr,
  .amber-table--responsive td { display: block; width: 100%; box-sizing: border-box; }
  .amber-table--responsive tr {
    padding: 10px 12px;
    border-bottom: 1px solid var(--clinical-100);
  }
  .amber-table--responsive td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 4px 0 !important; border: 0 !important; text-align: right !important;
  }
  .amber-table--responsive td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: var(--text-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-3);
  }
  .amber-table--responsive td:not([data-label]),
  .amber-table--responsive td[data-label=""] { justify-content: flex-end; }
}

/* ── Navegación lateral (antes estilos inline en layouts/_navigation) ──────── */
.amber-nav-link {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
  text-decoration: none; font-family: var(--font-sans);
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
/* Item dentro de una sección colapsable: alineado con el texto del encabezado (icono 20 + gap 12 + padding 10). */
.amber-nav-link--item     { display: block; padding: 6px 10px 6px 42px; font-size: 13px; }
.amber-nav-link--button   { width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left; }
.amber-nav-link--inactive:hover { background: var(--bg-subtle); color: var(--fg-1); }
.amber-nav-link--section-active { color: var(--fg-brand); font-weight: 600; }
.amber-nav-link--active   { background: var(--accent-soft); color: var(--fg-brand); }
.amber-nav-link--item.amber-nav-link--active { font-weight: 600; }
.amber-nav-link--inactive { color: var(--fg-2); }
.amber-nav-icon           { height: 20px; width: 20px; flex-shrink: 0; }
.amber-nav-icon--active   { color: var(--accent); }
.amber-nav-icon--inactive { color: var(--fg-3); }

/* ── Utilidades para estados dinámicos (antes style="" condicional) ───────── */
.amber-caption      { font-size: 12px; }
.amber-caption-mt   { margin: 4px 0 0; font-size: var(--text-caption); }
.amber-status-active   { color: var(--pulse-700); }
.amber-status-inactive { color: var(--error-500); }
.amber-dd           { margin: 4px 0 0; font-size: var(--text-body-sm); color: var(--fg-1); white-space: pre-line; }
.amber-dd-tight     { margin: 2px 0 0; white-space: pre-line; color: var(--fg-1); }
.amber-dd--highlight { padding: 8px; border-radius: var(--radius-sm); background: #F9DCD8; color: #8E2A1E; }
.amber-mono-pos     { color: var(--success, #15803d); }
.amber-mono-neg     { color: var(--error, #b91c1c); }
.amber-ok           { color: var(--success); }
.amber-warn         { color: var(--warning); }
.s-bold             { font-weight: 600; }
.amber-divider-b    { border-bottom: 1px solid var(--clinical-100); }
.amber-divider-b-soft { border-bottom: 1px solid var(--clinical-50); }
.amber-list-row     { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.amber-detail-row   { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 16px 20px; }
.amber-row--changed { background: var(--accent-soft); }
.amber-row--overdue { background: var(--warning-50, #FFF7E6); }
.amber-kardex-row   { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--clinical-50); }
.amber-notif        { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--clinical-100); }
.amber-notif--unread { background: var(--clinical-50); }
.amber-notif-dot    { margin-top: 6px; height: 8px; width: 8px; flex-shrink: 0; border-radius: 9999px; }
.amber-notif-dot--read   { background: var(--clinical-200); }
.amber-notif-dot--unread { background: #d97706; }
.amber-notif-title  { font-size: 14px; font-weight: 500; color: var(--fg-1); }
.amber-notif-title--unread { font-weight: 600; }
.amber-icon-box-36  { display: inline-flex; align-items: center; justify-content: center; height: 36px; width: 36px; border-radius: var(--radius-md); }
.amber-icon-box-44  { display: inline-flex; align-items: center; justify-content: center; height: 44px; width: 44px; border-radius: var(--radius-md); color: white; }
.amber-icon-round-30 { display: inline-flex; align-items: center; justify-content: center; height: 30px; width: 30px; border-radius: 9999px; }
.amber-avatar-32    { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: 9999px; color: white; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.amber-timeline-item { position: relative; padding-bottom: 20px; }
.amber-timeline-item--last { padding-bottom: 0; }
.amber-stat-tile    { flex: 1; min-width: 0; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--clinical-100); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); text-align: center; }
.amber-stat-value   { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1; }
.amber-stat-label   { margin: 4px 0 0; font-size: var(--text-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.amber-th           { font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); padding: 10px 16px; background: var(--clinical-25); border-bottom: 1px solid var(--clinical-100); }
.amber-th--left     { text-align: left; }
.amber-th--right    { text-align: right; }
.amber-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); }
.amber-modal-box    { position: relative; width: 100%; max-height: 90vh; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden; font-family: var(--font-sans); }

/* ── Menú de usuario (antes <style> inline en layouts/_header) ──────────── */
.amber-dropdown__item { display: block; padding: 8px 12px; font-size: 13px; color: var(--fg-1); text-decoration: none; border-radius: var(--radius-sm); font-family: var(--font-sans); cursor: pointer; }
.amber-dropdown__item:hover { background: var(--clinical-50); }
.amber-dropdown__divider { height: 1px; background: var(--clinical-100); margin: 4px 0; }

/* ── Sala de espera en móvil: estadísticas en 3 columnas y tablero apilado ── */
.amber-stats-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
@media (max-width: 640px) {
  .amber-stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .amber-stats-row .amber-stat-tile { padding: 10px 6px; }
  .amber-stats-row .amber-stat-label { white-space: normal; font-size: 10px; }
  .amber-board-columns { flex-direction: column; overflow: visible; }
  .amber-board-columns > * { min-width: 0 !important; width: 100%; }
}

/* ── Móvil: celdas-tarjeta que envuelven y objetivos táctiles de 40 px ────── */
@media (max-width: 640px) {
  .amber-table--responsive td { flex-wrap: wrap; }
  .amber-table--responsive td > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .amber-table--responsive td[data-label]::before { flex: 0 0 34%; }
  .amber-table--responsive td > *:not(:first-child) { margin-left: auto; }
  .amber-table--responsive td:has(> a:only-child),
  .amber-table--responsive td:has(> form:only-child) { justify-content: flex-end; }
  /* Enlaces/botones de acción dentro de las tarjetas: área táctil mínima. */
  .amber-table--responsive td a,
  .amber-table--responsive td button,
  .amber-table--responsive td input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; min-width: 40px; padding: 8px 12px;
  }
  .amber-btn--sm { min-height: 40px; }
}

/* ── KPIs del dashboard en móvil: 2 columnas en vez de una pila larga ─────── */
@media (max-width: 640px) {
  .amber-kpi-grid.amber-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .amber-kpi-grid .amber-icon-box-44 { height: 36px; width: 36px; }
}

/* Móvil: objetivos táctiles mínimos en chips de filtro y checkboxes */
@media (max-width: 640px) {
  a.amber-badge, button.amber-badge, label.amber-badge { min-height: 36px; padding-left: 12px; padding-right: 12px; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}
@media (max-width: 640px) {
  /* Botones/enlaces "de texto" (sin clase de botón) reciben área táctil sin cambiar su aspecto */
  /* (los .quick-pick__chip ya traen 44px) */
  main button[type="button"]:not([class*="amber-btn"]):not([class*="px-"]):not(.quick-pick__chip):not(.dose-stepper__btn):not(.dose-stepper__step),
  main a[data-action], main a[data-turbo-method] { display: inline-flex; align-items: center; min-height: 36px; }
}
@media (max-width: 640px) {
  /* Enlaces "← Volver" / "+ Nueva …" de texto: área táctil de 36px sin cambiar tipografía */
  a.s-dabb55a, a.s-fbab18f, a.s-e873bdd, a.s-5e82922, a.s-e878860, a.s-f4a24c0 { display: inline-flex; align-items: center; min-height: 36px; }
}

/* Utilidades: texto de error y separación superior (kardex/inventario) */
.amber-fg-danger { color: var(--error-600); }
.amber-mt-3 { margin-top: 12px; }
.amber-stack-2 { display: flex; flex-direction: column; gap: 8px; }