:root {
  --bg-900: #0b1220; --bg-800: #111a2e; --bg-700: #17223a;
  --fg-100: #e6edf7; --fg-300: #c8d3e6;
  --primary-500: #1e90ff; --primary-600: #177ae0;
  --accent-500: #2cd3c7; --accent-600: #23bdb2;
  --warn-400: #ffb878; --warn-500: #ffa454;
  --border-300: #24314d; --focus: #2cd3c7; --shadow: 0 10px 30px rgba(0,0,0,.35);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* holgura mínima para el “resizer” en iPadOS */
  --corner-clearance: 56px; /* 48–64px suele ser suficiente */

}
html, body { height:100%; background: radial-gradient(1000px 600px at 20% 0%, var(--bg-800) 0%, var(--bg-900) 60%), linear-gradient(180deg, var(--bg-900), var(--bg-900)); color: var(--fg-100); }
.card, .navbar, .table, .alert, .modal-content { background: linear-gradient(180deg, var(--bg-800), var(--bg-700)); border: 1px solid var(--border-300); color: var(--fg-100); }
.form-control, .form-select { background-color: var(--bg-800); border: 1px solid var(--border-300); color: var(--fg-100); border-radius: 10px; }
.form-control:focus, .form-select:focus { background-color: var(--bg-700); border-color: var(--focus); box-shadow: 0 0 0 .2rem rgba(44,211,199,.15); }
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { background: linear-gradient(180deg, var(--primary-500), var(--primary-600)); border: 1px solid var(--primary-600); }
.btn-accent { background: linear-gradient(180deg, var(--accent-500), var(--accent-600)); border: 1px solid var(--accent-600); color: #063239; }
.btn-warning { background: linear-gradient(180deg, var(--warn-400), var(--warn-500)); border: 1px solid var(--warn-500); color: #3a2300; }
.text-soft { color: var(--fg-300); }
.shadow-soft { box-shadow: var(--shadow); }
thead.position-sticky th{ position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, var(--bg-800), var(--bg-700)); }
.table-hover tbody tr:hover { filter: brightness(1.08); }
.dropdown-menu { z-index: 2000; }
.badge-active { color:#fff; background-color:#198754; border:2px solid #0a5c2b; box-shadow:0 0 .45rem rgba(25,135,84,.9); }
.navbar{padding-top:.25rem;padding-bottom:.25rem;}
.container-fluid{padding-left:.5rem;padding-right:.5rem;}
/* densidad */
.table-sm>:not(caption)>*>*{padding:.30rem .50rem;}
.card .card-body{padding:.55rem .65rem;}
/* ===== FRI: tarjeta tipo “semáforo” pintada completa ===== */
.fri-card{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.fri-card .fri-title{ font-weight: 700; letter-spacing:.02em; }
.fri-card .fri-note{ opacity:.85; }

/* Estados (compatibles con JS actual o viejo) */
.fri-card.fri-green,
#fri-card.alert-success{
  background: linear-gradient(180deg, rgba(6,148,67,.25), rgba(6,148,67,.18));
  border-color: rgba(6,148,67,.35);
  color: #d7ffe7;
}
.fri-card.fri-amber,
#fri
/* evita zoom por foco en iOS si el font <16px */
input, select, textarea { font-size: 16px; }
/* Redondeo y clipping del bloque interno */
.minimos-card .minimos-inner{
  background: var(--panel-2, rgba(255,255,255,.03));
  border-radius: .75rem;
  overflow: hidden;                /* recorta esquinas internas */
}
/* Full width en horizontal y pantallas anchas */
@media (orientation: landscape), (min-width: 992px){
  .container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    /* márgenes internos mínimos y respeto a notch/laterales */
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
}

/* Evitar cualquier scroll lateral residual */
html, body { overflow-x: hidden; }

/* Igualar separación de la tarjeta FRI con el resto */
#fri-card.alert{
  --bs-alert-margin-bottom: 0;
  margin-bottom: 0 !important;
}

/* Por si el contenedor tiene display:flex, evita que colapse el ancho */
.row .col:has(#fri-card){ display: block; }

/* Alineación visual del borde inferior con las .card */
#fri-card.alert{ border-radius: var(--card-radius, .75rem); }
/* extiende el fondo bajo la barra de estado y evita franja negra */
html, body { background:#0d1422; }
@supports(padding: env(safe-area-inset-top)){
  body { padding-top: calc(env(safe-area-inset-top) + 0px); }
  .container { padding-top: calc(env(safe-area-inset-top) + 1rem); }
}
/* contenedores principales */
.app-shell{
  padding-top: var(--safe-top);
  padding-right: calc(var(--safe-right));
  padding-bottom: calc(var(--safe-bottom));
  padding-left: var(--safe-left);
}

/* si tienes barra/footers fijos en el borde inferior-derecho */
.footer, .fab, .panel-flotante{
  position: fixed;
  bottom: calc(var(--safe-bottom) + 16px + var(--corner-clearance));
  right:  calc(var(--safe-right)  + 16px);
}

/* si el contenido llega al borde, agrega margen para no quedar debajo del control */
.avoid-corner{
  padding-bottom: calc(var(--safe-bottom) + var(--corner-clearance));
  padding-right:  calc(var(--safe-right)  + 24px);
}

/* evita problemas de 100vh en iOS */
.fullheight{
  min-height: 100dvh; /* no uses 100vh en iOS */
}