/* ── MODALES responsive ──────────────────────────────────────────────────── */
/* Backdrop con scroll — el inner div usa margin:auto para centrar */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 2000;
  overflow-y: auto;
  padding: 24px 16px;
}
.modal-box {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  border-radius: 14px;
  padding: 28px;
  margin: 0 auto;
  max-width: 520px;
  width: 100%;
}
html.theme-light .modal-box {
  background: #ffffff;
  border-color: #dde0ea;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
@media (max-width: 600px) {
  .modal-backdrop { padding: 12px 8px; }
  .modal-box { padding: 20px 16px; border-radius: 12px; }
}

/*
 * app.css — Portal de Mantenimiento COSMO
 * Estilo: Dark Industrial
 *
 * Paleta:
 *   --bg:           #0f1117   fondo base
 *   --surface:      #1a1d27   cards y sidebars
 *   --surface-alt:  #22263a   inputs y filas alternas
 *   --border:       #2e3350   líneas y bordes
 *   --accent:       #c8a96e   dorado / acción principal
 *   --green:        #4ecb8d   OK / operativo
 *   --red:          #e05c6a   error / crítico
 *   --blue:         #5b8dee   info / en proceso
 *   --orange:       #f0914d   advertencia / pendiente
 *   --text:         #e8e6f0   texto principal
 *   --muted:        #7b7f96   texto secundario
 *   --dim:          #4a4e65   texto muy apagado
 *
 * Fuentes:
 *   Bebas Neue    → títulos / labels sección
 *   DM Sans       → cuerpo y UI
 *   JetBrains Mono→ códigos / valores numéricos
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Reset + base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  background: #0f1117;
  color: #e8e6f0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0f1117; }
::-webkit-scrollbar-thumb { background: #2e3350; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3e4460; }

/* Selección de texto */
::selection { background: #c8a96e33; color: #e8e6f0; }

/* ── Tipografía ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; font-weight: 400; }

.h1 { font-size: 2rem;   color: #c8a96e; letter-spacing: .1em; }
.h2 { font-size: 1.4rem; color: #e8e6f0; }
.h3 { font-size: 1.1rem; color: #e8e6f0; }

.p    { color: #7b7f96; font-size: .88rem; margin-top: 4px; }
.muted{ color: #7b7f96; }
.dim  { color: #4a4e65; }
.help { color: #4a4e65; font-size: .78rem; margin-top: 4px; }

/* Fuente monoespaciada (códigos, IDs, valores numéricos clave) */
.mono { font-family: 'JetBrains Mono', monospace; font-size: .82em; }

/* ── Animaciones ──────────────────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes slideIn { from { transform:translateX(-12px); opacity:0; } to { transform:translateX(0); opacity:1; } }

.fade-in  { animation: fadeIn  .35s ease both; }
.pulse    { animation: pulse   2s ease-in-out infinite; }
.slide-in { animation: slideIn .3s ease both; }

/* ── SHELL LAYOUT ─────────────────────────────────────────────────────────── */
.shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ── TOPBAR ───────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: #1a1d27;
  border-bottom: 1px solid #2e3350;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 12px;
  z-index: 100;
  gap: 12px;
}

.topbar__left  { display: flex; align-items: center; gap: 12px; }
.topbar__right { display: flex; align-items: center; gap: 10px; }

/* Botón hamburguesa */
.iconbtn {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid #2e3350;
  border-radius: 8px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 0;
  transition: border-color .2s, background .2s;
}
.iconbtn:hover { border-color: #c8a96e; background: #c8a96e11; }
.iconbtn__bar {
  display: block; width: 16px; height: 2px;
  background: #7b7f96;
  border-radius: 1px;
  transition: background .2s;
}
.iconbtn:hover .iconbtn__bar { background: #c8a96e; }

/* Brand logo */
.brand { display: flex; align-items: center; gap: 10px; }

.brand__logo {
  width: 36px; height: 36px;
  background: #c8a96e1a;
  border: 1px solid #c8a96e44;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: #c8a96e;
}

.brand__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: #c8a96e;
  line-height: 1;
}

.brand__sub {
  font-size: 11px;
  color: #4a4e65;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── SIDENAV ──────────────────────────────────────────────────────────────── */
.sidenav {
  width: 220px;
  min-width: 220px;
  background: #1a1d27;
  border-right: 1px solid #2e3350;
  position: fixed;
  top: 56px; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 90;
  transition: transform .3s ease, width .3s ease, min-width .3s ease;
}

.sidenav__footer {
  padding: 16px 20px;
  border-top: 1px solid #2e3350;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #4a4e65;
}

/* ── TOGGLE NAV ──────────────────────────────────────────────────────────── */

/* Móvil: sidenav oculto por defecto, se muestra con nav-collapsed=false */
@media (max-width: 900px) {
  .sidenav { transform: translateX(-100%); }
  body:not(.nav-collapsed) .sidenav { transform: translateX(0); }
}

/* Tablet/desktop: sidenav visible por defecto, se oculta con nav-collapsed */
@media (min-width: 901px) {
  body.nav-collapsed .sidenav {
    transform: translateX(-100%);
    width: 0 !important;
    min-width: 0 !important;
  }
  body.nav-collapsed .main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.nav-collapsed .main .container {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── NAV ITEMS ────────────────────────────────────────────────────────────── */
.nav {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

/* Separador de sección en nav */
.nav__sep {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #4a4e65;
  padding: 14px 12px 4px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #7b7f96;
  font-size: 13px;
  font-weight: 400;
  border-left: 3px solid transparent;
  transition: all .2s;
  cursor: pointer;
  background: transparent;
  border-top: none; border-right: none; border-bottom: none;
}

.nav__item:hover {
  background: #c8a96e11;
  color: #c8a96e;
  border-left-color: #c8a96e55;
}

.nav__item--active,
.nav__item.active {
  background: #c8a96e18;
  color: #c8a96e;
  font-weight: 600;
  border-left-color: #c8a96e;
}

/* ── MAIN CONTENT ─────────────────────────────────────────────────────────── */
.main {
  flex: 1;
  min-width: 0;
  margin-left: 220px;
  margin-top: 56px;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: margin-left .3s ease, width .3s ease;
}

.container {
  flex: 1;
  padding: 24px 28px;
  width: 100%;
  overflow-x: hidden;
}

/* Todas las tablas siempre con scroll horizontal */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.footer {
  padding: 14px 28px;
  border-top: 1px solid #2e3350;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #4a4e65;
}

/* ── SECTIONHEAD ──────────────────────────────────────────────────────────── */
.sectionhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ── CARDS ────────────────────────────────────────────────────────────────── */
.card {
  background: #1a1d27;
  border: 1px solid #2e3350;
  border-radius: 12px;
  padding: 20px;
  transition: border-color .2s;
}

.card:hover { border-color: #3e4460; }

.card__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #7b7f96;
  margin-bottom: 4px;
}

.card__sub {
  font-size: .82rem;
  color: #4a4e65;
}

/* Variantes de card (borde superior de color) */
.card--accent  { border-top: 3px solid #c8a96e; }
.card--ok      { border-top: 3px solid #4ecb8d; }
.card--warn    { border-top: 3px solid #f0914d; }
.card--danger  { border-top: 3px solid #e05c6a; }
.card--info    { border-top: 3px solid #5b8dee; }

/* ── GRID ─────────────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── ALERT (info box dentro de card) ─────────────────────────────────────── */
.alert {
  background: #22263a;
  border: 1px solid #2e3350;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .85rem;
}

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #2e3350;
  background: #22263a;
  color: #7b7f96;
  transition: all .2s;
  white-space: nowrap;
}

.btn:hover {
  border-color: #c8a96e55;
  color: #c8a96e;
  background: #c8a96e0d;
}

/* Primary — dorado */
.btn--primary {
  background: #c8a96e;
  color: #111218;
  border-color: #c8a96e;
}
.btn--primary:hover {
  background: #d9bc88;
  border-color: #d9bc88;
  color: #111218;
}

/* Danger */
.btn--danger {
  background: #e05c6a1a;
  color: #e05c6a;
  border-color: #e05c6a44;
}
.btn--danger:hover {
  background: #e05c6a33;
  border-color: #e05c6a77;
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: #7b7f96;
  border-color: #2e3350;
}
.btn--ghost:hover {
  color: #c8a96e;
  border-color: #c8a96e55;
  background: #c8a96e0d;
}

/* Success */
.btn--ok {
  background: #4ecb8d1a;
  color: #4ecb8d;
  border-color: #4ecb8d44;
}
.btn--ok:hover { background: #4ecb8d2a; border-color: #4ecb8d66; }

/* Small variant */
.btn--sm { padding: 5px 12px; font-size: 12px; }

/* Estado deshabilitado */
.btn[disabled], .btn--disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Formulario inline */
.inline { display: inline; }

/* ── CHIPS ─────────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: #22263a;
  border: 1px solid #2e3350;
  color: #7b7f96;
  white-space: nowrap;
}

.chip--ok      { background: #4ecb8d18; color: #4ecb8d; border-color: #4ecb8d44; }
.chip--success { background: #1a6b4218; color: #1e9e5e; border-color: #1e9e5e66; font-weight:600; }
.chip--warn   { background: #f0914d18; color: #f0914d; border-color: #f0914d44; }
.chip--danger { background: #e05c6a18; color: #e05c6a; border-color: #e05c6a44; }
.chip--info   { background: #5b8dee18; color: #5b8dee; border-color: #5b8dee44; }
.chip--accent { background: #c8a96e18; color: #c8a96e; border-color: #c8a96e44; }
.chip--muted  { background: #22263a;   color: #7b7f96; border-color: #2e3350;   }

/* ── BADGES ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

.badge--critica  { background: #e05c6a18; color: #e05c6a; border: 1px solid #e05c6a44; }
.badge--alta     { background: #f0914d18; color: #f0914d; border: 1px solid #f0914d44; }
.badge--media    { background: #5b8dee18; color: #5b8dee; border: 1px solid #5b8dee44; }
.badge--baja     { background: #4ecb8d18; color: #4ecb8d; border: 1px solid #4ecb8d44; }

/* Alias estado */
.badge--ok       { background: #4ecb8d18; color: #4ecb8d; border: 1px solid #4ecb8d44; }
.badge--warn     { background: #f0914d18; color: #f0914d; border: 1px solid #f0914d44; }
.badge--danger   { background: #e05c6a18; color: #e05c6a; border: 1px solid #e05c6a44; }
.badge--info     { background: #5b8dee18; color: #5b8dee; border: 1px solid #5b8dee44; }

/* ── FORMS ─────────────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: #7b7f96;
  text-transform: uppercase;
}

.input,
.select,
textarea.input {
  background: #22263a;
  border: 1px solid #2e3350;
  border-radius: 8px;
  padding: 9px 13px;
  color: #e8e6f0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}

.input:focus,
.select:focus,
textarea.input:focus {
  border-color: #c8a96e66;
  box-shadow: 0 0 0 3px #c8a96e11;
}

.input::placeholder { color: #4a4e65; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b7f96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 34px;
  cursor: pointer;
}

.select option { background: #22263a; color: #e8e6f0; }

textarea.input { resize: vertical; min-height: 80px; line-height: 1.5; }

/* ── TABLES ─────────────────────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.table thead th {
  padding: 10px 14px;
  text-align: left;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .78rem;
  letter-spacing: 1.5px;
  color: #4a4e65;
  border-bottom: 1px solid #2e3350;
  white-space: nowrap;
  background: #1a1d27;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid #22263a;
  vertical-align: middle;
}

.table tbody tr { transition: background .15s; }
.table tbody tr:nth-child(odd)  { background: #252a40; }
.table tbody tr:nth-child(even) { background: #1c2035; }
.table tbody tr:hover,
.table tbody tr:nth-child(odd):hover,
.table tbody tr:nth-child(even):hover { background: #343a56; }
.table tbody tr:hover td { color: #e8eaf0; }

/* Fila con alerta */
.table tbody tr.row--danger { background: #e05c6a08; }
.table tbody tr.row--warn   { background: #f0914d08; }
.table tbody tr.row--ok     { background: #4ecb8d08; }

/* Celda de código / ID */
.table td.td-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: #5b8dee;
}

/* ── NOTICE / AVISOS ────────────────────────────────────────────────────────── */
.notice {
  border-radius: 8px;
  padding: 11px 16px;
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.notice--info   { background: #5b8dee12; color: #93b8f5; border-left: 3px solid #5b8dee; }
.notice--warn   { background: #f0914d12; color: #f5c08a; border-left: 3px solid #f0914d; }
.notice--danger { background: #e05c6a12; color: #f5a0a9; border-left: 3px solid #e05c6a; }
.notice--ok     { background: #4ecb8d12; color: #8de8be; border-left: 3px solid #4ecb8d; }

/* ── STATS / KPIs ───────────────────────────────────────────────────────────── */
.stat { text-align: center; padding: 8px 0; }

.stat__val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: .04em;
}

.stat__lbl {
  font-size: .72rem;
  color: #4a4e65;
  margin-top: 4px;
  letter-spacing: .04em;
}

/* Icon stat (card con icono a la izquierda) */
.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-card__icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

/* ── METRICS ROW ────────────────────────────────────────────────────────────── */
.metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.metric {
  flex: 1;
  min-width: 110px;
  background: #1a1d27;
  border: 1px solid #2e3350;
  border-radius: 10px;
  padding: 12px 16px;
  transition: border-color .2s;
}

.metric:hover { border-color: #3e4460; }

.metric__val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: .04em;
  color: #e8e6f0;
}

.metric__lbl {
  font-size: .72rem;
  color: #7b7f96;
  margin-top: 3px;
}

/* ── PROGRESS BAR ───────────────────────────────────────────────────────────── */
.progress {
  height: 5px;
  border-radius: 3px;
  background: #22263a;
  overflow: hidden;
  margin-top: 8px;
}

.progress__bar {
  height: 100%;
  border-radius: 3px;
  background: #c8a96e;
  transition: width .5s ease;
}

.progress__bar--ok     { background: #4ecb8d; }
.progress__bar--warn   { background: #f0914d; }
.progress__bar--danger { background: #e05c6a; }
.progress__bar--blue   { background: #5b8dee; }

/* ── ROW UTILITY ────────────────────────────────────────────────────────────── */
.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── LINKS ──────────────────────────────────────────────────────────────────── */
.a {
  color: #5b8dee;
  text-decoration: none;
  font-size: .88rem;
  transition: color .2s;
}
.a:hover { color: #c8a96e; text-decoration: underline; }

/* ── UTILIDADES ─────────────────────────────────────────────────────────────── */
.text-ok     { color: #4ecb8d; }
.text-warn   { color: #f0914d; }
.text-danger { color: #e05c6a; }
.text-blue   { color: #5b8dee; }
.text-accent { color: #c8a96e; }
.text-muted  { color: #7b7f96; }
.text-dim    { color: #4a4e65; }
.text-mono   { font-family: 'JetBrains Mono', monospace; }
.text-title  { font-family: 'Bebas Neue', sans-serif; letter-spacing: .08em; }

.fw-600  { font-weight: 600; }
.fw-700  { font-weight: 700; }
.fs-xs   { font-size: .72rem; }
.fs-sm   { font-size: .82rem; }
.fs-base { font-size: .88rem; }

.mt-4  { margin-top: 4px;  }
.mt-8  { margin-top: 8px;  }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-4  { margin-bottom: 4px;  }
.mb-8  { margin-bottom: 8px;  }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

.d-flex    { display: flex; }
.ai-center { align-items: center; }
.jc-between{ justify-content: space-between; }
.gap-8     { gap: 8px; }
.gap-10    { gap: 10px; }
.gap-12    { gap: 12px; }
.flex-wrap { flex-wrap: wrap; }
.overflow-auto { overflow: auto; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
/* ── TABLET LANDSCAPE (901px – 1280px) ──────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1280px) {
  /* Sidenav más estrecha para ganar espacio de contenido */
  .sidenav { width: 180px; min-width: 180px; }
  .main { margin-left: 180px; }
  body.nav-collapsed .sidenav {
    transform: translateX(-100%);
    width: 0 !important;
    min-width: 0 !important;
  }
  body.nav-collapsed .main {
    margin-left: 0 !important;
    width: 100% !important;
  }
  body.nav-collapsed .main .container {
    max-width: 100% !important;
    width: 100% !important;
  }
  .container { padding: 14px 16px; }

  /* Topbar: brand subtitle se oculta */
  .brand__sub { display: none; }

  /* Grids de 4 columnas → 2 */
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Nav items más compactos */
  .nav__item { padding: 8px 10px; font-size: 12px; }

  /* Tablas siempre con scroll horizontal en tablet */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table { min-width: 560px; }

  /* Stats dashboard: wrap forzado */
  .stats { flex-wrap: wrap; }
  .stat { min-width: 130px; flex: 1 1 130px; }

  /* Sectionhead: titulo más compacto */
  .sectionhead h1, .h1 { font-size: 1.5rem; }

  /* Métricas KPI: más compactas */
  .metric__val { font-size: 1.6rem; }
  .metrics { gap: 8px; }
  .metric { padding: 10px 12px; }

  /* Ocultar columnas secundarias en tabla */
  .hide-tablet { display: none !important; }

  /* Grid forzado a 1 columna en tablet */
  .grid--tablet-1 { grid-template-columns: 1fr !important; }
}

/* ── TABLET PORTRAIT / MÓVIL GRANDE (600px – 900px) ─────────────────────────── */
@media (max-width: 900px) {
  /* Modales: margen superior reducido para pantallas cortas */
  .modal-scroll { padding: 16px; }

  /* Tablas con scroll horizontal bien definido */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Botones de acción: más grandes para touch */
  .btn { min-height: 40px; }
  .btn--sm { min-height: 34px; }

  /* Grid de KPIs: mínimo más pequeño */
  .metrics .metric { min-width: 80px; }
}

/* ── MÓVIL (< 600px) ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .topbar { padding: 0 10px; }
  .brand__title { font-size: 13px; }
  .brand__sub { display: none; }
  .stat__val { font-size: 1.8rem; }
  .table thead th, .table tbody td { padding: 7px 8px; font-size: .75rem; }
  .container { padding: 12px; }

  /* Sectionhead en móvil: apilar verticalmente */
  .sectionhead { flex-direction: column; align-items: flex-start; }
  .sectionhead > .btn,
  .sectionhead > button { width: 100%; justify-content: center; margin-top: 8px; }

  /* Grids siempre 1 columna en móvil */
  .grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr !important; }

  /* Metrics: 2 por fila en móvil */
  .metrics .metric { min-width: calc(50% - 8px); flex: 0 0 calc(50% - 8px); }
}