/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  PLATAFORMA DE MONITOREO SANITARIO — PulsoRed                ║
 * ║  styles.css v7  ·  Elegant Corporate Health System           ║
 * ╠══════════════════════════════════════════════════════════════╣
 * ║  ÍNDICE                                                      ║
 * ║  1. IMPORTS & VARIABLES                                      ║
 * ║  2. BASE        body, reset, scrollbar                       ║
 * ║  3. TOPBAR      header principal, logo, brand                ║
 * ║  4. NAV TABS    pill-style navigation                        ║
 * ║  5. CARDS       premium card system                          ║
 * ║  6. KPI         metric cards, mini-stats                     ║
 * ║  7. FORMS       inputs, labels, selects, checkboxes          ║
 * ║  8. BUTTONS     primary, accent, ghost, danger               ║
 * ║  9. TABLA       tables, status pills, action buttons         ║
 * ║  10. ALERTAS    left-border alert items, tags, grupos        ║
 * ║  11. ESTADO     online/offline banner, toast                 ║
 * ║  12. VARIOS     modals, progress, timeline, charts, sync     ║
 * ║  13. RESPONSIVE 320px – 1440px+                              ║
 * ║  14. PRINT      print styles                                 ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ════════════════════════════════════════════════════════════════
   1. IMPORTS & VARIABLES
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  /* ── Brand colors (unchanged) ── */
  --azul-profundo:  #0D1F3C;
  --verde-salud:    #29C4A9;
  --acento:         #4ECDC4;
  --alerta:         #F59E0B;
  --critico:        #EF4444;

  /* ── Legacy aliases (keep compatibility with existing HTML) ── */
  --azul-medio:     #29C4A9;   /* maps to verde-salud */
  --azul-claro:     #E0F9F6;   /* light teal surface */
  --verde-ok:       #29C4A9;
  --rojo-alerta:    #EF4444;
  --amarillo-warn:  #F59E0B;
  --acento-claro:   #FEF3C7;

  /* ── Refined neutrals ── */
  --surface:        #FFFFFF;
  --surface-alt:    #F1F5F9; /* Fondo general más oscuro para contrastar las tarjetas blancas */
  --surface-raised: #E2E8F0;
  --border:         #CBD5E1; /* Bordes más oscuros y definidos */
  --border-strong:  #94A3B8; /* Bordes de hover con más contraste */

  /* ── Legacy neutral aliases ── */
  --gris-fondo:     #F1F5F9;
  --gris-inp:       #E2E8F0;
  --gris-borde:     #CBD5E1;

  /* ── Text ── */
  --text-primary:   #020617; /* Texto principal más negro */
  --text-secondary: #334155; /* Texto secundario más oscuro */
  --text-muted:     #64748B; /* Texto claro más legible */
  --texto-oscuro:   #020617;
  --texto-medio:    #334155;
  --texto-claro:    #64748B;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 6px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.06);
  --shadow-lg: 0 10px 15px rgba(15,23,42,0.08), 0 4px 6px rgba(15,23,42,0.05);
  --shadow-xl: 0 20px 25px rgba(15,23,42,0.10), 0 8px 10px rgba(15,23,42,0.06);

  /* ── Legacy shadow aliases ── */
  --sombra:       0 10px 15px rgba(15,23,42,0.08), 0 4px 6px rgba(15,23,42,0.05);
  --sombra-card:  0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06);

  /* ── Radius ── */
  --radio:    12px;
  --radio-sm:  8px;
  --radio-lg: 16px;
  --radio-xl: 20px;

  /* ── Focus ring (teal) ── */
  --ring: 0 0 0 3px rgba(41,196,169,0.25);

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-normal: 200ms ease;
  --t-slow:   300ms ease;
}


/* ════════════════════════════════════════════════════════════════
   2. BASE
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--surface-alt);
  color: var(--text-primary);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ════════════════════════════════════════════════════════════════
   3. TOPBAR
   ════════════════════════════════════════════════════════════════ */

.topbar {
  background:      var(--azul-profundo);
  color:           #FFFFFF;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 24px;
  height:          100px;
  position:        sticky;
  top:             0;
  z-index:         100;
  /* Glass elevation */
  box-shadow:      0 1px 0 rgba(255,255,255,0.06) inset,
                   0 4px 24px rgba(0,0,0,0.35);
  border-bottom:   1px solid rgba(41,196,169,0.20);
}

.topbar-brand {
  display:     flex;
  align-items: center;
  gap:         14px;
  min-width:   0;
}

.topbar-logo {
  height:      50px;
  display:     flex;
  align-items: center;
  gap:         15px;
  flex-shrink: 0;
  padding:     0 5px;
  overflow:    visible;
}

.topbar-logo img {
  height:      60px;
  width:       auto;
  object-fit:  contain;
  display:     block;
}

.topbar-logo img:first-child {
  padding-right: 15px;
  border-right:  1px solid rgba(255,255,255,0.18);
  height:        50px;
  margin-top:    auto;
  margin-bottom: auto;
}

.topbar-title {
  font-family:   'Figtree', 'Inter', sans-serif;
  font-weight:   700;
  font-size:     26px;
  letter-spacing: -0.4px;
  line-height:   1.1;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  color:         #FFFFFF;
}

.topbar-sub {
  font-family:   'Figtree', sans-serif;
  font-size:     12px;
  font-weight:   500;
  color:         rgba(255,255,255,0.45);
  margin-top:    3px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.topbar-text {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  min-width:       0;
}

/* Desktop/mobile text swap */
.topbar-text--mobile  { display: none; }
.topbar-text--desktop { display: flex; }

.topbar-right {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   nowrap;
  flex-shrink: 0;
}

.periodo-badge {
  background:     rgba(41,196,169,0.10);
  border:         1px solid rgba(41,196,169,0.30);
  color:          var(--verde-salud);
  font-family:    'Figtree', monospace;
  font-size:      11px;
  font-weight:    700;
  padding:        5px 12px;
  border-radius:  6px;
  white-space:    nowrap;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  display:        flex;
  align-items:    center;
  gap:            6px;
}

.user-badge {
  background:    rgba(41,196,169,0.15);
  color:         var(--verde-salud);
  font-size:     12px;
  font-weight:   600;
  padding:       6px 14px;
  border-radius: 20px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           6px;
  white-space:   nowrap;
  border:        1px solid rgba(41,196,169,0.25);
}

#cola-badge {
  background:    var(--alerta);
  color:         var(--azul-profundo);
  font-family:   'Figtree', monospace;
  font-size:     10px;
  font-weight:   800;
  padding:       3px 8px;
  border-radius: 10px;
  display:       none;
  letter-spacing: 0.3px;
}

#rol-badge {
  display:       none;
  padding:       4px 10px;
  border-radius: 20px;
  font-size:     11px;
  font-weight:   700;
  background:    transparent;
  color:         var(--acento);
  letter-spacing: 0.5px;
}


/* ════════════════════════════════════════════════════════════════
   4. NAV TABS
   ════════════════════════════════════════════════════════════════ */

.nav-tabs-wrapper {
  position:   relative;
  background: rgba(13,31,60,0.98);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-tabs-wrapper::before,
.nav-tabs-wrapper::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          40px;
  pointer-events: none;
  z-index:        2;
  transition:     opacity var(--t-normal);
}
.nav-tabs-wrapper::before {
  left:       0;
  background: linear-gradient(to right, rgba(13,31,60,1), transparent);
}
.nav-tabs-wrapper::after {
  right:      0;
  background: linear-gradient(to left, rgba(13,31,60,1), transparent);
}

.nav-tabs {
  display:         flex;
  gap:             4px;
  padding:         8px 16px;
  overflow-x:      auto;
  overflow-y:      hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  align-items:     center;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     8px 16px;
  font-family: 'Figtree', 'Inter', sans-serif;
  font-weight: 500;
  font-size:   13.5px;
  color:       rgba(255,255,255,0.50);
  cursor:      pointer;
  background:  none;
  border:      none;
  border-radius: 8px;
  white-space: nowrap;
  transition:  all var(--t-fast);
  min-height:  44px;
  appearance:  none;
  -webkit-appearance: none;
  letter-spacing: 0.1px;
  position:    relative;
}

.nav-tab:hover {
  color:       rgba(255,255,255,0.85);
  background:  rgba(255,255,255,0.07);
}

.nav-tab.active {
  color:       #FFFFFF;
  background:  rgba(41,196,169,0.15);
  font-weight: 650;
}

.nav-tab.active::after {
  content:      '';
  position:     absolute;
  bottom:       -8px;
  left:         50%;
  transform:    translateX(-50%);
  width:        24px;
  height:       2px;
  background:   var(--verde-salud);
  border-radius: 1px;
}

.tab-icon {
  display:     flex;
  align-items: center;
  opacity:     0.85;
  flex-shrink: 0;
}
.nav-tab.active .tab-icon { opacity: 1; }


/* ════════════════════════════════════════════════════════════════
   5. CARDS
   ════════════════════════════════════════════════════════════════ */

.main {
  padding:   28px 24px;
  max-width: 1100px;
  margin:    0 auto;
}

.section-header  { margin-bottom: 24px; }

.section-title {
  font-family:   'Figtree', 'Inter', sans-serif;
  font-weight:   700;
  font-size:     26px;
  letter-spacing: -0.5px;
  color:         var(--text-primary);
  display:       flex;
  align-items:   center;
  gap:           10px;
  line-height:   1.2;
}

.section-title::before {
  content:       '';
  display:       block;
  width:         3px;
  height:        22px;
  background:    var(--verde-salud);
  border-radius: 2px;
  flex-shrink:   0;
}

.section-desc {
  color:       var(--text-secondary);
  font-size:   14px;
  margin-top:  6px;
  margin-left: 13px;
  line-height: 1.5;
}

.card {
  background:    var(--surface);
  border-radius: var(--radio);
  box-shadow:    var(--shadow-sm);
  padding:       24px 28px;
  border:        1px solid var(--border);
  transition:    box-shadow var(--t-normal), border-color var(--t-normal);
}

.card:hover {
  box-shadow:    var(--shadow-md);
  border-color:  var(--border-strong);
}

.card-title {
  font-family:     'Figtree', 'Inter', sans-serif;
  font-weight:     700;
  font-size:       16px;
  letter-spacing:  -0.2px;
  color:           var(--text-primary);
  margin-bottom:   18px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             8px;
  line-height:     1.3;
}

/* Badges */
.card-badge  {
  font-family:    'Figtree', monospace;
  font-size:      10px;
  font-weight:    700;
  padding:        3px 8px;
  border-radius:  6px;
  letter-spacing: 0.3px;
}
.badge-ok     { background: #ECFDF5; color: #059669; }
.badge-warn   { background: #FFFBEB; color: #D97706; }
.badge-alert  { background: #FEF2F2; color: #DC2626; }
.badge-accent { background: #EFF6FF; color: #3B82F6; }

/* Layout helpers */
.tab-content        { display: none; }
.tab-content.active { display: block; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr;      gap: 20px; margin-bottom: 20px; }
.grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr;  gap: 20px; margin-bottom: 20px; }
.sep     { height: 1px; background: var(--border); margin: 24px 0; }


/* ════════════════════════════════════════════════════════════════
   6. KPI
   ════════════════════════════════════════════════════════════════ */

.kpi-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   14px;
  margin-bottom:         28px;
}

.kpi-card {
  background:    var(--surface);
  border-radius: var(--radio);
  padding:       22px 20px;
  border:        1px solid var(--border);
  box-shadow:    var(--shadow-sm);
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.kpi-card:hover {
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
  border-color: var(--border-strong);
}

/* Top accent bar */
.kpi-card::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          0;
  right:         0;
  height:        3px;
  border-radius: var(--radio) var(--radio) 0 0;
}
.kpi-card.ok::before      { background: var(--verde-salud); }
.kpi-card.warn::before    { background: var(--alerta); }
.kpi-card.alert::before   { background: var(--critico); }
.kpi-card.neutral::before { background: var(--acento); }

/* Icon background decoration */
.kpi-card::after {
  content:       '';
  position:      absolute;
  bottom:        -12px;
  right:         -12px;
  width:         70px;
  height:        70px;
  border-radius: 50%;
  background:    var(--surface-alt);
  opacity:       0.6;
}

.kpi-label {
  font-size:      11px;
  font-weight:    600;
  color:          var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom:  10px;
  position:       relative;
  z-index:        1;
}

.kpi-value {
  font-family: 'Figtree', 'Inter', sans-serif;
  font-weight: 800;
  font-size:   36px;
  color:       var(--text-primary);
  line-height: 1;
  letter-spacing: -1px;
  position:    relative;
  z-index:     1;
}

.kpi-unit {
  font-size:   18px;
  color:       var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0;
}

.kpi-meta {
  margin-top:  10px;
  font-size:   11px;
  color:       var(--text-muted);
  font-weight: 500;
}

.kpi-meta-row {
  display:         flex;
  justify-content: space-between;
  margin-top:      8px;
  font-size:       11px;
  color:           var(--text-muted);
  font-weight:     500;
  flex-wrap:       wrap;
  gap:             4px;
}

.kpi-bar {
  margin-top:    12px;
  height:        4px;
  background:    var(--surface-raised);
  border-radius: 99px;
  overflow:      hidden;
  position:      relative;
  z-index:       1;
}

.kpi-bar-fill {
  height:        100%;
  border-radius: 99px;
  transition:    width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.ok .kpi-bar-fill      { background: var(--verde-salud); }
.warn .kpi-bar-fill    { background: var(--alerta); }
.alert .kpi-bar-fill   { background: var(--critico); }
.neutral .kpi-bar-fill { background: var(--acento); }

/* Mini stats */
.mini-stats {
  display:       flex;
  gap:           14px;
  flex-wrap:     wrap;
  margin-bottom: 36px;
}

.mini-stat {
  flex:          1;
  min-width:     130px;
  background:    var(--azul-profundo);
  color:         #FFFFFF;
  border-radius: var(--radio);
  padding:       24px 18px;
  border:        1px solid rgba(255,255,255,0.06);
  position:      relative;
  overflow:      hidden;
}

.mini-stat::before {
  content:   '';
  position:  absolute;
  top:       0; left: 0; right: 0;
  height:    2px;
  background: linear-gradient(90deg, var(--verde-salud), var(--acento));
}

.mini-stat-val {
  font-family:     'Figtree', 'Inter', sans-serif;
  font-size:       30px;
  font-weight:     800;
  letter-spacing:  -1px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #FFFFFF;
}

.mini-stat-label {
  font-size:       13px;
  font-weight:     500;
  color:           rgba(255,255,255,0.50);
  margin-top:      4px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  line-height:     1.3;
}


/* ════════════════════════════════════════════════════════════════
   7. FORMS
   ════════════════════════════════════════════════════════════════ */

.form-section       { margin-bottom: 24px; }

.form-section-title {
  font-family:    'Figtree', 'Inter', sans-serif;
  font-weight:    700;
  font-size:      11px;
  color:          var(--verde-salud);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom:  14px;
  padding-bottom: 8px;
  border-bottom:  1px solid var(--border);
  display:        flex;
  align-items:    center;
  gap:            6px;
}

.form-grid   { display: grid; grid-template-columns: 1fr 1fr;      gap: 14px; max-width: 100%; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;  gap: 14px; max-width: 100%; }
.form-group  { display: flex; flex-direction: column; gap: 5px; justify-content: flex-end; }
.form-grid   .form-group,
.form-grid-3 .form-group { height: 100%; }
.form-group.full { grid-column: 1 / -1; }

label {
  font-family:    'Figtree', 'Inter', sans-serif;
  font-size:      11.5px;
  font-weight:    600;
  color:          var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height:    1.3;
}

input,
select,
textarea {
  width:          100%;
  max-width:      100%;
  padding:        11px 14px;
  border:         1.5px solid var(--border);
  border-radius:  var(--radio-sm);
  font-family:    'Figtree', 'Inter', sans-serif;
  font-size:      15px;  /* prevents iOS zoom */
  font-weight:    400;
  color:          var(--text-primary);
  background:     var(--surface);
  /* Sombra sutil para despegarlos del fondo */
  box-shadow:     var(--shadow-xs);
  transition:     border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), transform var(--t-fast);
  outline:        none;
  -webkit-appearance: none;
  appearance:     none;
  line-height:    1.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
  background:   var(--surface);
  box-shadow:   var(--shadow-sm); /* Sombra elevada al pasar el mouse */
}

input:focus,
select:focus,
textarea:focus {
  background:   var(--surface);
  border-color: var(--verde-salud);
  /* Mantenemos el focus ring + agregamos una leve elevación */
  box-shadow:   var(--ring), var(--shadow-sm);
  transform:    translateY(-1px);
}

input[readonly] {
  background:  var(--surface-alt);
  color:       var(--text-secondary);
  cursor:      not-allowed;
}

input[type="number"] {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

textarea {
  resize:     vertical;
  min-height: 80px;
}

select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  padding-right:       36px;
  cursor:              pointer;
}

/* Alarm / inline message boxes */
.alarma-box {
  border-radius: var(--radio-sm);
  padding:       12px 14px;
  font-size:     13px;
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  margin-top:    8px;
  word-break:    break-word;
  border-left:   3px solid;
}

.alarma-ok    {
  background:   #ECFDF5;
  border-color: #34D399;
  color:        #065F46;
}
.alarma-warn  {
  background:   #FFFBEB;
  border-color: var(--alerta);
  color:        #92400E;
}
.alarma-alert {
  background:   #FEF2F2;
  border-color: var(--critico);
  color:        #991B1B;
}
.alarma-info  {
  background:   #EFF6FF;
  border-color: #60A5FA;
  color:        #1E40AF;
}
.alarma-icon  {
  flex-shrink: 0;
  margin-top:  1px;
  opacity:     0.8;
}


/* ── Prog checks (checkbox grid) ── */

.prog-checks {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   8px;
  margin-top:            10px;
  margin-bottom:         20px;
}

.prog-check-item {
  display:       flex;
  align-items:   center;
  background:    var(--surface-alt);
  border:        1.5px solid var(--border);
  border-radius: var(--radio-sm);
  padding:       10px 10px;
  cursor:        pointer;
  min-height:    48px;
  transition:    all var(--t-fast);
  user-select:   none;
  gap:           8px;
}

.prog-check-item:hover {
  border-color:  var(--verde-salud);
  background:    rgba(41,196,169,0.04);
}

.prog-check-item span {
  font-size:      10.5px;
  font-weight:    700;
  color:          var(--text-secondary);
  line-height:    1.2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.prog-check-item input[type="checkbox"] {
  margin:       0;
  width:        16px;
  height:       16px;
  flex-shrink:  0;
  accent-color: var(--verde-salud);
  cursor:       pointer;
}

.prog-check-item:has(input:checked) {
  background:   rgba(41,196,169,0.12);
  border-color: var(--verde-salud);
}

.prog-check-item:has(input:checked) span {
  color: var(--azul-profundo);
}

/* ── Dropdown suggestions ── */
.sugerencias-dropdown {
  max-height:    220px;
  overflow-y:    auto;
  border-radius: var(--radio-sm);
}

.buscar-paciente-wrapper {
  position: relative;
}

.buscar-paciente-wrapper .sugerencias-dropdown {
  display:       none;
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    var(--surface);
  border:        1.5px solid var(--border);
  border-radius: var(--radio-sm);
  max-height:    220px;
  overflow-y:    auto;
  box-shadow:    var(--shadow-lg);
  z-index:       300;
}


/* ════════════════════════════════════════════════════════════════
   8. BUTTONS
   ════════════════════════════════════════════════════════════════ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  padding:         11px 22px;
  border-radius:   var(--radio-sm);
  font-family:     'Figtree', 'Inter', sans-serif;
  font-weight:     650;
  font-size:       14px;
  letter-spacing:  0.1px;
  cursor:          pointer;
  border:          none;
  transition:      transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space:     nowrap;
  min-height:      44px;
  line-height:     1;
  text-decoration: none;
  position:        relative;
  overflow:        hidden;
}

.btn:focus-visible {
  outline:    none;
  box-shadow: var(--ring);
}

.btn:active { transform: scale(0.97); }

/* Primary */
.btn-primary {
  background: var(--azul-profundo);
  color:      #FFFFFF;
}
.btn-primary:hover {
  background:  #162E50;
  transform:   translateY(-1px);
  box-shadow:  var(--shadow-md);
}

/* Accent (teal CTA) */
.btn-accent {
  background:  linear-gradient(135deg, var(--verde-salud) 0%, var(--acento) 100%);
  color:       #FFFFFF;
  box-shadow:  0 2px 8px rgba(41,196,169,0.30);
  font-weight: 700;
  transition:  transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn-accent:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 20px rgba(41,196,169,0.45);
  filter:      brightness(1.05);
}
.btn-accent:active {
  transform:  translateY(0);
  box-shadow: 0 2px 6px rgba(41,196,169,0.25);
  filter:      brightness(1);
}

/* Ghost */
.btn-ghost {
  background:   transparent;
  border:       1.5px solid var(--border);
  color:        var(--text-secondary);
}
.btn-ghost:hover {
  background:   var(--surface-alt);
  border-color: var(--verde-salud);
  color:        var(--verde-salud);
}

/* Danger */
.btn-danger {
  background: var(--critico);
  color:      #FFFFFF;
}
.btn-danger:hover {
  background:  #DC2626;
  box-shadow:  0 4px 12px rgba(239,68,68,0.35);
  transform:   translateY(-1px);
}

/* Verde */
.btn-verde {
  background:  var(--verde-salud);
  color:       #FFFFFF;
  font-weight: 700;
}
.btn-verde:hover {
  background: #22B89A;
  transform:  translateY(-1px);
}

/* Login (topbar outline) */
.btn-login {
  background:  transparent;
  border:      1.5px solid rgba(255,255,255,0.25);
  color:       rgba(255,255,255,0.80);
}
.btn-login:hover {
  background:  rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.50);
  color:       #FFFFFF;
}

/* Sizes */
.btn-sm {
  padding:    7px 14px;
  font-size:  12.5px;
  min-height: 36px;
}

.btn-row {
  display:        flex;
  gap:            10px;
  justify-content: flex-end;
  margin-top:     20px;
  flex-wrap:      wrap;
  align-items:    center;
}

@media (max-width: 768px) {
  .btn-row {
    position: sticky;
    bottom:   0;
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #E2E8F0);
    margin: 16px -16px -16px;
    padding: 12px 16px;
    z-index: 20;
    box-shadow: 0 -4px 12px rgba(15,23,42,0.08);
    justify-content: stretch;
  }
  .btn-row .btn { flex: 1; justify-content: center; }
  .btn-row .btn.btn-ghost { flex: 0 0 auto; min-width: 80px; }
}


/* ════════════════════════════════════════════════════════════════
   9. TABLA
   ════════════════════════════════════════════════════════════════ */

.tabla-wrapper {
  overflow-x:               auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:          thin;
  border-radius:            var(--radio-sm);
  border:                   1px solid var(--border);
}

table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
}

thead {
  background: var(--azul-profundo);
  color:      #FFFFFF;
}

thead th {
  padding:        12px 14px;
  text-align:     left;
  font-family:    'Figtree', 'Inter', sans-serif;
  font-size:      10.5px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  white-space:    nowrap;
  border-bottom:  1px solid rgba(41,196,169,0.20);
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition:    background var(--t-fast);
}

tbody tr:nth-child(even) { background: var(--surface-alt); }
tbody tr:hover           { background: rgba(41,196,169,0.05); }
tbody tr:last-child      { border-bottom: none; }

tbody td {
  padding:       10px 14px;
  color:         var(--text-primary);
  max-width:     250px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  font-size:     13px;
}

.td-mono {
  font-family:     'Figtree', monospace;
  font-size:       12px;
  font-variant-numeric: tabular-nums;
}

/* Status pills */
.status-pill {
  display:       inline-flex;
  align-items:   center;
  padding:       3px 10px;
  border-radius: 99px;
  font-size:     11px;
  font-family:   'Figtree', sans-serif;
  font-weight:   650;
  white-space:   nowrap;
  letter-spacing: 0.2px;
}
.pill-ok    { background: #ECFDF5; color: #059669; }
.pill-warn  { background: #FFFBEB; color: #D97706; }
.pill-alert { background: #FEF2F2; color: #DC2626; }
.pill-grey  { background: var(--surface-raised); color: var(--text-secondary); }

/* Pending sync row */
tr.pending-sync td { opacity: 0.72; }
tr.pending-sync td:first-child::before {
  content:            '';
  display:            inline-block;
  width:              10px;
  height:             10px;
  margin-right:       5px;
  vertical-align:     middle;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E");
  background-size:    contain;
  background-repeat:  no-repeat;
}

/* Action button in table cells */
.action-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--text-muted);
  font-size:   14px;
  padding:     4px 6px;
  border-radius: var(--radio-sm);
  min-width:   36px;
  min-height:  36px;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  transition:  background var(--t-fast), color var(--t-fast);
}
.action-btn:hover {
  background: var(--surface-raised);
  color:      var(--verde-salud);
}


/* ════════════════════════════════════════════════════════════════
   10. ALERTAS
   ════════════════════════════════════════════════════════════════ */

.alertas-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.alerta-item {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       14px 14px;
  border-radius: var(--radio-sm);
  border-left:   3px solid;
  background:    var(--surface);
  border-top:    1px solid transparent;
  border-right:  1px solid transparent;
  border-bottom: 1px solid transparent;
  transition:    background var(--t-fast), box-shadow var(--t-fast);
}

.alerta-item:hover {
  box-shadow: var(--shadow-sm);
}

.alerta-roja {
  background:   #FFF5F5;
  border-color: var(--critico);
  border-top:    1px solid #FECACA;
  border-right:  1px solid #FECACA;
  border-bottom: 1px solid #FECACA;
}

.alerta-amarilla {
  background:   #FFFBEB;
  border-color: var(--alerta);
  border-top:    1px solid #FDE68A;
  border-right:  1px solid #FDE68A;
  border-bottom: 1px solid #FDE68A;
}

.alerta-azul {
  background:   #EFF6FF;
  border-color: #60A5FA;
  border-top:    1px solid #BFDBFE;
  border-right:  1px solid #BFDBFE;
  border-bottom: 1px solid #BFDBFE;
}

.alerta-icon {
  font-size:   18px;
  flex-shrink: 0;
  margin-top:  1px;
}

.alerta-text {
  font-size: 13px;
  min-width: 0;
  flex:      1;
}

.alerta-text strong {
  display:     block;
  font-weight: 650;
  font-size:   13px;
  margin-bottom: 2px;
  word-break:  break-word;
  color:       var(--text-primary);
}

.alerta-text span {
  color:      var(--text-secondary);
  font-size:  12px;
  word-break: break-word;
}

.alerta-time {
  margin-left: auto;
  font-family: 'Figtree', monospace;
  font-size:   10px;
  font-weight: 600;
  color:       var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tags */
.tag    { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tag-g1 { background: #ECFDF5; color: #059669; }
.tag-g2 { background: #FFFBEB; color: #D97706; }
.tag-g3 { background: #FEF2F2; color: #DC2626; }
.tag-g4 { background: #EFF6FF; color: #3B82F6; }

/* Grupos de riesgo grid */
.grupos-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   10px;
  margin-bottom:         20px;
}

.grupo-card {
  border-radius: var(--radio-sm);
  padding:       14px 12px;
  text-align:    center;
  border:        1.5px solid transparent;
  cursor:        pointer;
  transition:    transform var(--t-fast), box-shadow var(--t-fast);
}

.grupo-card:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.g1 { background: #ECFDF5; border-color: #A7F3D0; }
.g2 { background: #FFFBEB; border-color: #FDE68A; }
.g3 { background: #FEF2F2; border-color: #FECACA; }
.g4 { background: #EFF6FF; border-color: #BFDBFE; }

.grupo-num        { font-family: 'Figtree', 'Inter', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.g1 .grupo-num    { color: #059669; }
.g2 .grupo-num    { color: #D97706; }
.g3 .grupo-num    { color: #DC2626; }
.g4 .grupo-num    { color: #3B82F6; }
.grupo-label      { font-size: 11px; font-weight: 700; margin-top: 4px; color: var(--text-secondary); }
.grupo-sub        { font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }


/* ════════════════════════════════════════════════════════════════
   11. ESTADO ONLINE / OFFLINE
   ════════════════════════════════════════════════════════════════ */

#conexion-banner {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         500;
  padding:         10px 20px;
  font-size:       13px;
  font-family:     'Figtree', sans-serif;
  font-weight:     600;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  transform:       translateY(100%);
  transition:      transform 0.35s ease;
}

#conexion-banner.show    { transform: translateY(0); }
#conexion-banner.offline { background: #0D1F3C; color: #F59E0B; border-top: 2px solid #D97706; }
#conexion-banner.online  { background: #022C22; color: #34D399; border-top: 2px solid #059669; }
#conexion-banner.syncing { background: #1E3A5F; color: #93C5FD; border-top: 2px solid #3B82F6; }

.banner-left {
  display:     flex;
  align-items: center;
  gap:         10px;
  min-width:   0;
  flex:        1;
}

.banner-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}

.offline .banner-dot { background: #F59E0B; animation: blink 1.4s infinite; }
.online  .banner-dot { background: #34D399; }
.syncing .banner-dot { background: #93C5FD; animation: spin 1s linear infinite; }

.banner-sync-btn {
  background:    rgba(255,255,255,0.12);
  border:        1px solid rgba(255,255,255,0.25);
  color:         inherit;
  padding:       5px 14px;
  border-radius: 20px;
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  font-family:   'Figtree', sans-serif;
  white-space:   nowrap;
  min-height:    34px;
  letter-spacing: 0.3px;
  transition:    background var(--t-fast);
}
.banner-sync-btn:hover {
  background: rgba(255,255,255,0.20);
}

#estado-mini    { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: 4px; }
.estado-online  { background: var(--verde-salud); }
.estado-offline { background: var(--alerta); animation: blink 1.4s infinite; }

/* Animations */
@keyframes blink  { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41,196,169,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(41,196,169,0.0); }
}

/* Toast */
.toast {
  position:      fixed;
  bottom:        60px;
  right:         24px;
  background:    var(--azul-profundo);
  color:         #FFFFFF;
  padding:       13px 18px;
  border-radius: var(--radio-sm);
  font-family:   'Figtree', 'Inter', sans-serif;
  font-size:     13px;
  font-weight:   500;
  box-shadow:    var(--shadow-xl);
  z-index:       999;
  display:       flex;
  align-items:   center;
  gap:           10px;
  transform:     translateY(80px);
  opacity:       0;
  transition:    transform 0.25s ease, opacity 0.25s ease;
  max-width:     320px;
  border:        1px solid rgba(255,255,255,0.08);
}
.toast.show    { transform: translateY(0); opacity: 1; }
.toast.success { border-left: 3px solid var(--verde-salud); }
.toast.error   { border-left: 3px solid var(--critico); }


/* ════════════════════════════════════════════════════════════════
   12. VARIOS
   ════════════════════════════════════════════════════════════════ */

/* Modal */
.modal-overlay {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       rgba(15,23,42,0.55);
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:          200;
  align-items:      center;
  justify-content:  center;
  padding:          16px;
}
.modal-overlay.open { display: flex; }

.modal {
  background:               var(--surface);
  border-radius:            var(--radio-lg);
  padding:                  28px;
  width:                    90%;
  max-width:                540px;
  max-height:               90vh;
  overflow-y:               auto;
  box-shadow:               var(--shadow-xl);
  border:                   1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}

.modal-title {
  font-family:   'Figtree', 'Inter', sans-serif;
  font-weight:   700;
  font-size:     18px;
  margin-bottom: 20px;
  color:         var(--text-primary);
  letter-spacing: -0.3px;
}

.modal-close {
  float:       right;
  background:  none;
  border:      none;
  font-size:   22px;
  cursor:      pointer;
  color:       var(--text-muted);
  min-width:   44px;
  min-height:  44px;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-sm);
  transition:  background var(--t-fast), color var(--t-fast);
}
.modal-close:hover {
  background: var(--surface-alt);
  color:      var(--text-primary);
}

/* Progress */
.progress-track { margin-bottom: 28px; }

.progress-label {
  display:         flex;
  justify-content: space-between;
  font-size:       12px;
  font-weight:     500;
  color:           var(--text-secondary);
  margin-bottom:   8px;
  flex-wrap:       wrap;
  gap:             4px;
}

.progress-bar {
  height:        6px;
  background:    var(--surface-raised);
  border-radius: 99px;
  overflow:      hidden;
}

.progress-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--verde-salud), var(--acento));
  border-radius: 99px;
  transition:    width 1s cubic-bezier(0.4,0,0.2,1);
}

/* Timeline */
.timeline {
  display:          flex;
  gap:              0;
  margin-bottom:    24px;
  overflow-x:       auto;
  padding-bottom:   4px;
  padding-top:      6px;
  -webkit-overflow-scrolling: touch;
}

.timeline-item {
  flex:      1;
  min-width: 80px;
  text-align: center;
  position:  relative;
  padding:   0 4px;
}

.timeline-item::before {
  content:   '';
  position:  absolute;
  top:       20px;
  left:      50%;
  width:     100%;
  height:    2px;
  background: var(--border);
  z-index:   0;
}
.timeline-item:last-child::before { display: none; }

.timeline-dot {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  margin:        0 auto 8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     12px;
  font-weight:   700;
  position:      relative;
  z-index:       1;
  border:        2px solid var(--surface);
  transition:    transform var(--t-fast);
}

.tl-done    { background: var(--verde-salud); color: #FFFFFF; box-shadow: 0 0 0 3px rgba(41,196,169,0.25); }
.tl-active  { background: var(--azul-profundo); color: #FFFFFF; box-shadow: 0 0 0 3px rgba(41,196,169,0.35); animation: pulse 2s infinite; }
.tl-pending { background: var(--surface); color: var(--text-muted); box-shadow: 0 0 0 2px var(--border); }

.tl-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.5px; }
.tl-sub   { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Chart bars (horizontal) */
.chart-bar-horiz { margin: 8px 0; }

.chart-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 10px;
}

.chart-row-label {
  width:         140px;
  font-size:     13px;
  font-family:   'Figtree', sans-serif;
  font-weight:   500;
  color:         var(--text-secondary);
  flex-shrink:   0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.chart-row-bar {
  flex:          1;
  height:        20px;
  background:    var(--surface-raised);
  border-radius: var(--radio-sm);
  overflow:      hidden;
  position:      relative;
}

.chart-row-fill {
  height:        100%;
  border-radius: var(--radio-sm);
  background:    linear-gradient(90deg, var(--azul-profundo), #1B4776);
  display:       flex;
  align-items:   center;
  padding-left:  8px;
  transition:    width 1s cubic-bezier(0.4,0,0.2,1);
}

.chart-row-val { font-family: 'Figtree', monospace; font-size: 11px; color: rgba(255,255,255,0.90); font-weight: 700; }
.chart-row-pct { font-family: 'Figtree', monospace; font-size: 12px; color: var(--text-muted); font-weight: 600; width: 36px; text-align: right; flex-shrink: 0; }

/* Sync panel */
.sync-panel {
  background:    var(--surface);
  border-radius: var(--radio);
  padding:       20px 22px;
  border:        1px solid var(--border);
  box-shadow:    var(--shadow-sm);
  margin-bottom: 20px;
}

.sync-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
}

.sync-info {
  font-size: 13px;
  color:     var(--text-secondary);
}

.sync-info strong {
  color:      var(--text-primary);
  font-weight: 700;
}

.pendiente-count {
  font-family:  'Figtree', monospace;
  font-size:    22px;
  font-weight:  800;
  color:        var(--alerta);
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  padding:         36px 16px;
  color:           var(--text-muted);
  font-size:       13px;
  text-align:      center;
}
.empty-state-icon { font-size: 36px; opacity: 0.4; }
.empty-state-text { font-weight: 600; color: var(--text-secondary); font-size: 14px; }
.empty-state-sub  { font-size: 12px; max-width: 280px; line-height: 1.4; }

/* Stepper */
.stepper-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  margin:          0 0 16px;
  padding:         10px 12px;
  background:      var(--surface-alt, #F8FAFC);
  border:          1px solid var(--border, #E2E8F0);
  border-radius:   10px;
}
.stepper-status {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.stepper-label {
  font-size:   11px;
  font-weight: 700;
  color:       var(--azul-profundo, #0D1F3C);
  letter-spacing: .4px;
}
.stepper-title-label {
  font-size:   11px;
  color:       var(--text-secondary, #475569);
  max-width:   180px;
  overflow:    hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stepper-dots {
  display:    flex;
  gap:        6px;
  align-items: center;
}
.stepper-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   var(--border-strong, #CBD5E1);
  cursor:       pointer;
  transition:   background .2s, transform .18s;
  flex-shrink:  0;
}
.stepper-dot.active {
  background:   var(--verde-salud, #29C4A9);
  transform:    scale(1.4);
}
.stepper-nav .btn {
  min-width:    90px;
  white-space:  nowrap;
  display:      flex;
  align-items:  center;
  gap:          5px;
}
.stepper-nav .btn[disabled] {
  opacity: .35;
  cursor:  not-allowed;
}

/* Dirty state dot on nav tabs */
.dirty-dot {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--alerta, #F59E0B);
  margin-left:   5px;
  vertical-align: middle;
  animation:     pulse-dot 1.5s ease-in-out infinite;
  flex-shrink:   0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(.8); }
}


/* ════════════════════════════════════════════════════════════════
   13. RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* Safe areas (notch, home indicator) */
@supports (padding: env(safe-area-inset-top)) {
  .topbar            { padding-top: env(safe-area-inset-top); }
  #conexion-banner   { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .toast             { bottom: max(60px, calc(env(safe-area-inset-bottom) + 16px)); }
}

/* ── Desktop large (>= 1200px) ── */
@media (min-width: 1200px) {
  .main     { max-width: 1320px; padding: 32px 40px; }
  .kpi-grid { grid-template-columns: repeat(5, 1fr); }
  .grid-2   { gap: 24px; }
  .grid-3   { gap: 24px; }
  .mini-stats { gap: 18px; }
  .mini-stat  { padding: 28px 20px; }
  .card       { padding: 24px 28px; }
}

/* ── Desktop XL (>= 1440px) ── */
@media (min-width: 1440px) {
  .main { max-width: 1400px; }
}

/* ── Large tablet (<= 1024px) ── */
@media (max-width: 1024px) {
  .main     { max-width: 100%; padding: 24px 20px; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet (<= 900px) ── */
@media (max-width: 900px) {
  .nav-tabs       { justify-content: flex-start; }
  .nav-tab        { font-size: 13px; padding: 8px 12px; gap: 6px; }
  .tab-icon svg   { width: 16px; height: 16px; }
  .section-title  { font-size: 22px; }
  .section-desc   { font-size: 14px; }
  .kpi-grid       { grid-template-columns: repeat(2, 1fr); }
}

/* ── Small tablet (<= 768px) ── */
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  #tab-perfiles .grid-2.mobile-detail-open > div:first-child { display: none !important; }
  #pf-btn-volver   { display: flex !important; }
  .kpi-grid        { grid-template-columns: 1fr 1fr; }
  .main            { padding: 16px 14px; }
  .topbar          { padding: 0 14px; height: auto; min-height: 68px; }
  .topbar-logo     { height: 40px; gap: 10px; }
  .topbar-logo img { height: 42px; }
  .topbar-logo img:first-child { height: 36px; padding-right: 10px; }
  .topbar-title    { font-size: 18px; }
  .topbar-sub      { font-size: 10px; }
  .grupos-grid     { grid-template-columns: repeat(2, 1fr); }
  .mini-stats      { flex-wrap: wrap; }
  .mini-stat       { padding: 18px 12px; min-width: calc(50% - 10px); flex: 0 0 calc(50% - 10px); }
  .mini-stat-val   { font-size: 24px; }
  .mini-stat-label { font-size: 12px; }
  .periodo-badge   { display: none; }
  table            { min-width: 480px; }
  .modal           { width: 95%; max-width: 95%; }
  .timeline-item   { min-width: 65px; }
  .timeline-dot    { width: 34px; height: 34px; font-size: 11px; }
  .sync-row        { flex-direction: column; align-items: flex-start; gap: 14px; }
  .chart-row-label { width: 110px; font-size: 12px; }
}

/* ── Mobile (<= 600px) ── */
@media (max-width: 600px) {
  .form-grid          { grid-template-columns: 1fr; }
  .form-grid-3        { grid-template-columns: 1fr 1fr; }
  .kpi-grid           { grid-template-columns: 1fr; }
  /* btn-row mobile handled by sticky block above */
  .topbar             { height: 60px; padding: 0 12px; }
  .topbar-brand       { flex: 1; min-width: 0; }
  .topbar-logo        { height: 32px; gap: 8px; flex-shrink: 0; }
  .topbar-logo img    { height: 32px; }
  .topbar-logo img:first-child { height: 28px; padding-right: 8px; }
  .topbar-text--desktop { display: none; }
  .topbar-text--mobile  { display: flex; }
  .topbar-title       { font-size: 15px; letter-spacing: 0; }
  .topbar-sub         { font-size: 9.5px; }
  .topbar-right       { flex-shrink: 0; gap: 6px; }
  .user-badge         { font-size: 11px; padding: 5px 10px; }
  #btn-generar-pdf    { display: none !important; }
  .nav-tab .tab-icon  { display: none; }
  .nav-tab            { font-size: 12px; padding: 10px 10px; }
  .mini-stats         { gap: 10px; }
  .mini-stat          { padding: 16px 10px; min-width: calc(50% - 8px); flex: 0 0 calc(50% - 8px); }
  .mini-stat-val      { font-size: 20px; }
  .mini-stat-label    { font-size: 11px; }
  .card               { padding: 16px 14px; }
  .card-title         { font-size: 15px; }
  .timeline           { padding: 6px 0 4px; }
  .timeline-item      { min-width: 56px; }
  .timeline-dot       { width: 30px; height: 30px; font-size: 10px; }
  .tl-label           { font-size: 10px; }
  .tl-sub             { font-size: 9px; }
  .section-title      { font-size: 18px; }
  .section-desc       { font-size: 13px; margin-left: 0; }
  table               { min-width: 420px; }
  thead th            { padding: 10px 10px; font-size: 9.5px; }
  tbody td            { padding: 9px 10px; font-size: 12px; }
  .modal              { width: 96%; max-width: 96%; padding: 20px 16px; border-radius: 12px; max-height: 85vh; }
  .modal-title        { font-size: 16px; }
  .toast              { left: 12px; right: 12px; max-width: none; bottom: 70px; }
  .kpi-card           { padding: 18px 16px; }
  .kpi-value          { font-size: 30px; }
  .alerta-item        { padding: 12px 12px; gap: 10px; }
  .alerta-time        { display: none; }
  .grupos-grid        { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .grupo-num          { font-size: 22px; }
  .grupo-card         { padding: 12px 10px; }
  .chart-row-label    { width: 90px; font-size: 11px; }
  .chart-row-bar      { height: 18px; }
  .chart-row-val      { font-size: 10px; }
  .chart-row-pct      { font-size: 11px; width: 30px; }
  .form-section-title { font-size: 10px; }
  .alarma-box         { padding: 10px 12px; font-size: 12px; }
  .progress-bar       { height: 6px; }
  .pendiente-count    { font-size: 18px; }
  #conexion-banner    { font-size: 11px; padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .banner-sync-btn    { font-size: 10px; padding: 4px 10px; }
  .sugerencias-dropdown { max-height: 160px; font-size: 12px; }
  .prog-checks        { grid-template-columns: repeat(2, 1fr); }
  .prog-check-item    { min-height: 44px; padding: 10px 8px; }
  .prog-check-item span { font-size: 9px; }
}

/* ── Small mobile (<= 400px) ── */
@media (max-width: 400px) {
  .topbar             { height: 56px; padding: 0 8px; }
  .topbar-logo        { height: 28px; gap: 6px; }
  .topbar-logo img    { height: 28px; }
  .topbar-logo img:first-child { height: 24px; padding-right: 6px; }
  .topbar-title       { font-size: 13px; }
  .topbar-right       { gap: 4px; }
  .btn-sm             { padding: 7px 10px; font-size: 11px; }
  .main               { padding: 12px 10px; }
  .nav-tab            { font-size: 11px; padding: 10px 8px; }
  .form-grid-3        { grid-template-columns: 1fr; }
  .card               { padding: 14px 12px; }
  .card-title         { font-size: 14px; }
  .section-title      { font-size: 16px; }
  .mini-stat          { min-width: calc(50% - 6px); flex: 0 0 calc(50% - 6px); padding: 12px 8px; }
  .mini-stat-val      { font-size: 18px; }
  .mini-stat-label    { font-size: 10px; }
  .kpi-value          { font-size: 26px; }
  .kpi-label          { font-size: 10px; }
  .btn                { padding: 10px 16px; font-size: 13px; }
  table               { min-width: 360px; }
  thead th            { padding: 8px 8px; font-size: 9px; }
  tbody td            { padding: 8px 8px; font-size: 11px; }
  .status-pill        { font-size: 10px; padding: 2px 7px; }
  .grupo-num          { font-size: 20px; }
  .grupo-card         { padding: 10px 8px; }
  .grupo-label        { font-size: 10px; }
  .grupo-sub          { font-size: 9px; }
}

/* ── XS mobile (<= 320px) ── */
@media (max-width: 320px) {
  .topbar-title    { font-size: 11px; }
  .topbar-logo img { height: 24px; }
  .topbar-logo img:first-child { height: 20px; }
  .main            { padding: 10px 8px; }
  .nav-tab         { font-size: 10px; padding: 10px 6px; }
  .section-title   { font-size: 15px; }
  body             { font-size: 14px; }
  .mini-stat       { min-width: 100%; flex: 0 0 100%; }
  .prog-checks     { grid-template-columns: 1fr; }
}

/* ── Landscape phones ── */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar                { height: 48px; position: relative; }
  .topbar-logo           { height: 30px; }
  .topbar-logo img       { height: 30px; }
  .topbar-logo img:first-child { height: 26px; }
  .topbar-title          { font-size: 14px; }
  .topbar-sub            { display: none; }
  .nav-tab               { padding: 8px 12px; font-size: 12px; min-height: 36px; }
  .main                  { padding: 12px 16px; }
  .modal                 { max-height: 85vh; }
  .kpi-grid              { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .mini-stat             { padding: 12px 10px; }
  .mini-stat-val         { font-size: 18px; }
  .grid-2                { grid-template-columns: 1fr 1fr; }
}

/* ── Fix Familias overflow ── */
#tab-familias .form-grid,
#tab-familias .form-grid-3 {
  max-width: 100%;
  overflow:  hidden;
}
#tab-familias input,
#tab-familias select,
#tab-familias textarea {
  max-width:  100%;
  box-sizing: border-box;
}
#tab-familias .card {
  overflow:  hidden;
  max-width: 100%;
}

/* ── Dropdown mobile ── */
@media (max-width: 600px) {
  .buscar-paciente-wrapper .sugerencias-dropdown {
    max-height: 180px;
  }
}

/* ── Narrow mobile prog-checks: 1 col ── */
@media (max-width: 360px) {
  .prog-checks { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   14. PRINT STYLES
   ════════════════════════════════════════════════════════════════ */

@media print {
  .topbar {
    position: relative;
    box-shadow: none;
    height: auto;
    padding: 12px 20px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .nav-tabs-wrapper    { display: none; }
  #conexion-banner     { display: none !important; }
  .toast               { display: none !important; }
  .modal-overlay       { display: none !important; }
  .btn-row             { display: none; }
  .btn                 { display: none; }
  .tab-content         { display: none !important; }
  .tab-content.active  { display: block !important; }
  body                 { background: white; font-size: 12px; }
  .main                { max-width: 100%; padding: 0 10px; }
  .card                { box-shadow: none; border: 1px solid #CBD5E1; break-inside: avoid; page-break-inside: avoid; }
  .kpi-card            { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .mini-stat           { background: white !important; color: black !important; border: 1px solid #CBD5E1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mini-stat-val       { color: black !important; }
  .mini-stat-label     { color: #475569 !important; }
  table                { min-width: 0 !important; font-size: 10px; }
  thead                { background: #0D1F3C !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tbody tr             { break-inside: avoid; page-break-inside: avoid; }
  .grid-2, .grid-3     { grid-template-columns: 1fr; }
  .kpi-grid            { grid-template-columns: repeat(3, 1fr); }
  .progress-fill       { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}