/* ═══════════════════════════════════════════════════
   VALORACIÓN PREOPERATORIA — CSS v2.0
   Mobile-first · Responsive · Optimizado
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── VARIABLES ── */
:root {
  --azul:      #1B3A6B;
  --azul2:     #2E5FA3;
  --azulc:     #E8F0FB;
  --gris:      #F5F6FA;
  --grisl:     #E9ECF2;
  --verde:     #1A6B45;
  --verdec:    #E6F4EC;
  --rojo:      #8B1A1A;
  --rojoc:     #FDECEA;
  --amarillo:  #7A5C00;
  --amarilloc: #FFF8E1;
  --texto:     #1A1A2E;
  --borde:     #D1D9E6;
  --white:     #ffffff;
  --shadow-sm: 0 1px 3px rgba(27,58,107,.08);
  --shadow-md: 0 4px 16px rgba(27,58,107,.15);
  --r:         10px;
  --r-sm:      7px;
  /* Topbar + Nav heights for sticky offset */
  --topbar-h:  52px;
  --nav-h:     44px;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'DM Sans',sans-serif;
  background:#EDF1F9;
  color:var(--texto);
  font-size:13px;
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
}

/* ══════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════ */
.topbar {
  background:var(--azul);
  color:white;
  padding:0 16px;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:300;
  box-shadow:var(--shadow-md);
  gap:10px;
}
.topbar h1 {
  font-family:'DM Serif Display',serif;
  font-size:17px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.topbar-sub { font-size:10px; opacity:.65; display:none; }
@media(min-width:600px){ .topbar-sub{display:block} .topbar h1{font-size:19px} }
.topbar-actions { display:flex; gap:6px; flex-shrink:0; }

/* ── BOTONES ── */
.btn {
  border:none;
  padding:7px 14px;
  border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  font-size:12px;
  cursor:pointer;
  transition:.18s;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn-white   { background:white; color:var(--azul); }
.btn-white:hover { background:var(--azulc); }
.btn-primary { background:var(--azul2); color:white; }
.btn-primary:hover { background:var(--azul); }
.btn-sm { padding:5px 10px; font-size:11px; }
/* Botones iconos compactos en mobile */
.btn-icon { padding:6px 8px; font-size:14px; line-height:1; }
@media(max-width:480px){ .btn-label{display:none} }

/* ══════════════════════════════════════════════════
   NAV TABS
══════════════════════════════════════════════════ */
.nav {
  background:var(--white);
  border-bottom:2px solid var(--borde);
  display:flex;
  overflow-x:auto;
  padding:0 8px;
  gap:0;
  position:sticky;
  top:var(--topbar-h);
  z-index:200;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.nav::-webkit-scrollbar { display:none; }
.nav-btn {
  border:none;
  background:none;
  padding:0 14px;
  height:var(--nav-h);
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  font-weight:500;
  color:#666;
  cursor:pointer;
  border-bottom:3px solid transparent;
  white-space:nowrap;
  transition:.18s;
  display:flex;
  align-items:center;
  gap:5px;
  flex-shrink:0;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.nav-btn .nav-emoji { font-size:14px; }
.nav-btn.active  { color:var(--azul2); border-bottom-color:var(--azul2); font-weight:600; }
.nav-btn:hover:not(.active) { color:var(--azul); background:var(--gris); }
/* En mobile muy chico, ocultar emojis de nav para que quepan */
@media(max-width:380px){ .nav-btn{padding:0 9px; font-size:11px;} .nav-emoji{display:none} }

/* ══════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════ */
.progress-bar { height:3px; background:var(--grisl); }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--azul2),#4C8BF5); transition:width .4s ease; }

/* ══════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════ */
.main { max-width:1100px; margin:0 auto; padding:20px 12px 90px; }
@media(min-width:600px){ .main{padding:24px 20px 80px} }
.section { display:none; animation:fadeIn .2s ease; }
.section.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── SECTION TITLE ── */
.section-title {
  font-family:'DM Serif Display',serif;
  font-size:18px;
  color:var(--azul);
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:2px solid var(--azulc);
  display:flex;
  align-items:center;
  gap:8px;
}
@media(min-width:600px){ .section-title{font-size:21px;margin-bottom:20px} }

/* ══════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════ */
.card {
  background:white;
  border-radius:var(--r);
  border:1px solid var(--borde);
  margin-bottom:14px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.card-head {
  background:var(--azul);
  color:white;
  padding:9px 14px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.card-head.verde  { background:var(--verde); }
.card-head.rojo   { background:var(--rojo); }
.card-head.azul2  { background:var(--azul2); }
.card-head.gris   { background:#4A5568; }
.card-head.amarillo { background:var(--amarillo); }
.card-body { padding:14px; }
@media(min-width:600px){ .card-body{padding:16px 18px} .card-head{padding:10px 18px} }

/* Collapsible cards */
.card-body.collapsed { display:none; }
.card-head .chevron { transition:transform .2s; font-size:12px; }
.card-head.open .chevron { transform:rotate(180deg); }

/* ══════════════════════════════════════════════════
   GRID LAYOUTS (Mobile-first)
══════════════════════════════════════════════════ */
.g2 { display:grid; grid-template-columns:1fr; gap:10px; }
.g3 { display:grid; grid-template-columns:1fr; gap:10px; }
.g4 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(min-width:480px){ .g2{grid-template-columns:1fr 1fr} }
@media(min-width:600px){ .g3{grid-template-columns:1fr 1fr 1fr}; .g4{grid-template-columns:1fr 1fr 1fr 1fr} .g2{gap:12px} .g3{gap:12px} }

/* ══════════════════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════════════════ */
.field { margin-bottom:10px; }
label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:#555;
  margin-bottom:4px;
  letter-spacing:.2px;
}
label.required::after { content:' *'; color:var(--rojo); }
input[type=text], input[type=number], input[type=date],
input[type=datetime-local], textarea, select {
  width:100%;
  border:1.5px solid var(--borde);
  border-radius:var(--r-sm);
  padding:8px 10px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  color:var(--texto);
  background:white;
  transition:border-color .15s;
  /* Prevent iOS zoom on focus */
  font-size:16px;
}
@media(min-width:600px){
  input[type=text],input[type=number],input[type=date],
  input[type=datetime-local],textarea,select { font-size:13px; }
}
input:focus, textarea:focus, select:focus {
  outline:none;
  border-color:var(--azul2);
  box-shadow:0 0 0 3px rgba(46,95,163,.12);
}
input[readonly] { background:var(--gris); color:#777; }
textarea { resize:vertical; min-height:60px; line-height:1.5; }
select { cursor:pointer; }
.small-label { font-size:11px; color:#888; margin-bottom:10px; font-style:italic; }

/* ══════════════════════════════════════════════════
   MEDICATION GRID (toggle items)
══════════════════════════════════════════════════ */
.med-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-bottom:10px;
}
@media(min-width:600px){ .med-grid{grid-template-columns:repeat(3,1fr); gap:8px;} }
@media(min-width:900px){ .med-grid{grid-template-columns:repeat(4,1fr);} }
.med-item {
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:9px 10px;
  border:1.5px solid var(--borde);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:.15s;
  background:var(--gris);
  touch-action:manipulation;
}
.med-item:hover { border-color:var(--azul2); background:var(--azulc); }
.med-item.checked { border-color:var(--azul2); background:var(--azulc); }
.med-item input[type=checkbox] {
  width:15px; height:15px;
  accent-color:var(--azul2);
  flex-shrink:0;
  margin-top:2px;
  cursor:pointer;
  font-size:unset;
  padding:0;
  border:none;
}
.med-name { font-size:11.5px; font-weight:600; color:var(--azul); line-height:1.3; }
.med-class { font-size:10px; color:#777; margin-top:2px; line-height:1.3; }
.sep { height:1px; background:var(--grisl); margin:12px 0; }
.sep-title {
  font-size:11px;
  font-weight:700;
  color:#888;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:12px 0 8px;
}

/* ══════════════════════════════════════════════════
   ASA BUTTONS
══════════════════════════════════════════════════ */
.asa-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-bottom:10px;
}
@media(min-width:600px){ .asa-grid{grid-template-columns:repeat(6,1fr)} }
.asa-btn {
  padding:10px 6px;
  border:2px solid var(--borde);
  border-radius:var(--r-sm);
  text-align:center;
  cursor:pointer;
  transition:.15s;
  background:var(--gris);
  touch-action:manipulation;
}
.asa-btn:hover { border-color:var(--azul2); background:var(--azulc); }
.asa-btn.selected { border-color:var(--azul2); background:var(--azul2); color:white; }
.asa-btn .num { font-size:16px; font-weight:700; }
.asa-btn .desc { font-size:9px; margin-top:2px; line-height:1.3; }
#asa-result {
  padding:8px 12px;
  background:var(--azulc);
  border-radius:var(--r-sm);
  font-size:12px;
  font-weight:500;
  color:var(--azul);
  display:none;
  margin-top:8px;
}

/* ══════════════════════════════════════════════════
   ESCALAS — checkboxes y resultados
══════════════════════════════════════════════════ */
.escala-box {
  background:var(--gris);
  border:1px solid var(--borde);
  border-radius:var(--r-sm);
  padding:12px 14px;
  margin-bottom:12px;
}
.escala-box h4 {
  font-size:12px;
  font-weight:700;
  color:var(--azul);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:6px;
}
.escala-checks { display:flex; flex-direction:column; gap:6px; }
.check-item {
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 9px;
  background:white;
  border:1px solid var(--borde);
  border-radius:6px;
  cursor:pointer;
  transition:.12s;
  touch-action:manipulation;
}
.check-item:hover { border-color:var(--azul2); background:var(--azulc); }
.check-item input[type=checkbox] {
  width:15px; height:15px;
  accent-color:var(--azul2);
  flex-shrink:0;
  margin-top:2px;
  font-size:unset; padding:0; border:none;
}
.check-item label { cursor:pointer; font-size:12px; font-weight:500; color:var(--texto); margin:0; }
.check-item .pts { font-size:10px; font-weight:700; color:var(--azul2); white-space:nowrap; margin-left:auto; padding-left:6px; }
.check-item input[type=radio] {
  width:15px; height:15px;
  accent-color:var(--azul2);
  flex-shrink:0;
  margin-top:2px;
  font-size:unset; padding:0; border:none;
}
.escala-select { width:100%; margin-top:6px; }
.score-display {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  background:var(--azulc);
  border-radius:var(--r-sm);
  margin-top:8px;
  font-size:12px;
}
.score-val { font-size:18px; font-weight:700; color:var(--azul2); }

/* ── RIESGO DISPLAY ── */
.riesgo-display {
  padding:9px 12px;
  border-radius:var(--r-sm);
  font-size:12px;
  font-weight:500;
  margin-top:8px;
  line-height:1.4;
}
.riesgo-bajo   { background:var(--verdec); color:var(--verde); border:1px solid #b2dfcc; }
.riesgo-medio  { background:var(--amarilloc); color:var(--amarillo); border:1px solid #f0d58a; }
.riesgo-alto   { background:var(--rojoc); color:var(--rojo); border:1px solid #f5b7b3; }

/* ══════════════════════════════════════════════════
   ESTUDIOS — LABORATORIOS
══════════════════════════════════════════════════ */
.lab-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media(min-width:540px){ .lab-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:800px){ .lab-grid{grid-template-columns:repeat(4,1fr)} }

.lab-field {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.lab-field label { font-size:11px; font-weight:600; color:#555; }
.lab-input-wrap {
  position:relative;
  display:flex;
  align-items:center;
}
.lab-input-wrap input {
  width:100%;
  padding-right:36px;
}
.lab-unit {
  position:absolute;
  right:8px;
  font-size:9.5px;
  color:#aaa;
  pointer-events:none;
  white-space:nowrap;
  line-height:1;
}
.ref-range {
  font-size:9px;
  color:#bbb;
  line-height:1.3;
  background:var(--gris);
  padding:2px 6px;
  border-radius:4px;
  border:1px solid var(--grisl);
}
.lab-alert { border-color:var(--rojo) !important; background:#fff5f5 !important; }
.lab-alert + .ref-range { color:var(--rojo); background:var(--rojoc); border-color:#f5b7b3; }
.lab-normal { border-color:#52b788 !important; background:#f0faf4 !important; }
/* En mobile muy chico: 1 columna */
@media(max-width:360px){ .lab-grid{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════
   RECOMENDACIONES
══════════════════════════════════════════════════ */
.recom-item {
  border:1.5px solid var(--borde);
  border-radius:var(--r-sm);
  overflow:hidden;
  margin-bottom:10px;
  transition:border-color .15s;
}
.recom-item.auto-filled { border-color:var(--verde); }
.recom-item.alert        { border-color:var(--rojo); }
.recom-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--gris);
  border-bottom:1px solid var(--borde);
  flex-wrap:wrap;
}
.recom-nombre {
  font-size:12px;
  font-weight:600;
  color:var(--azul);
  flex:1;
  min-width:120px;
}
.recom-chk-wrap {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:#666;
  cursor:pointer;
  white-space:nowrap;
}
.recom-chk-wrap input { width:14px; height:14px; accent-color:var(--azul2); font-size:unset; padding:0; border:none; }
.recom-txt {
  width:100%;
  font-size:12px;
  font-family:'DM Sans',sans-serif;
  border:none;
  padding:10px 12px;
  resize:vertical;
  background:white;
  line-height:1.6;
  color:var(--texto);
}
.recom-txt:focus { outline:2px solid var(--azulc); }
.recom-src {
  font-size:10px;
  color:#999;
  font-style:italic;
  padding:4px 12px 7px;
  border-top:1px dashed var(--grisl);
  background:white;
}
.recom-empty-msg { font-size:12px; color:#bbb; font-style:italic; padding:8px 2px; }
.auto-tag {
  font-size:10px; background:var(--verdec); color:var(--verde);
  padding:2px 7px; border-radius:8px; font-weight:600;
}
.alert-tag {
  font-size:10px; background:var(--rojoc); color:var(--rojo);
  padding:2px 7px; border-radius:8px; font-weight:600;
}

/* ══════════════════════════════════════════════════
   ALERT BOXES
══════════════════════════════════════════════════ */
.alert-box {
  padding:10px 14px;
  border-radius:var(--r-sm);
  font-size:12px;
  margin-bottom:14px;
  border-left:4px solid;
  line-height:1.5;
}
.alert-box.info    { background:var(--azulc);    border-color:var(--azul2); color:var(--azul); }
.alert-box.warn    { background:var(--amarilloc); border-color:var(--amarillo); color:var(--amarillo); }
.alert-box.danger  { background:var(--rojoc);    border-color:var(--rojo); color:var(--rojo); }
.alert-box.success { background:var(--verdec);   border-color:var(--verde); color:var(--verde); }

/* ══════════════════════════════════════════════════
   RESUMEN TABLE
══════════════════════════════════════════════════ */
.resumen-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.resumen-table th {
  background:var(--azul);
  color:white;
  padding:7px 10px;
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
}
.resumen-table td {
  padding:7px 10px;
  border-bottom:1px solid var(--grisl);
  vertical-align:top;
}
.resumen-table tr:last-child td { border-bottom:none; }
.resumen-table tr:nth-child(even) td { background:var(--gris); }

/* ══════════════════════════════════════════════════
   BOTTOM NAV (mobile only)
══════════════════════════════════════════════════ */
.bottom-nav {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  background:white;
  border-top:1px solid var(--borde);
  box-shadow:0 -4px 16px rgba(27,58,107,.12);
  z-index:250;
  padding:6px 0 env(safe-area-inset-bottom,6px);
}
@media(max-width:600px){ .bottom-nav{display:flex} .nav{display:none} }
.bottom-nav-btn {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:6px 4px;
  border:none;
  background:none;
  cursor:pointer;
  color:#888;
  font-size:9.5px;
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  transition:.15s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav-btn .bnav-icon { font-size:18px; line-height:1; }
.bottom-nav-btn.active { color:var(--azul2); }
/* Adjust main padding for bottom nav on mobile */
@media(max-width:600px){ .main{padding-bottom:100px} }

/* ══════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════ */
@media print {
  /* Ocultar todo */
  body > *       { display:none !important; }
  /* Mostrar solo la zona de impresión */
  #print-zone    { display:block !important; }
}

/* ── ZONA DE IMPRESIÓN ── */
#print-zone {
  display:none;
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  color:#1A1A2E;
  line-height:1.55;
  padding:16px;
  max-width:800px;
  margin:0 auto;
}
#print-zone .ph { /* print header */
  border-bottom:2px solid #1B3A6B;
  padding-bottom:10px;
  margin-bottom:16px;
}
#print-zone .ph h1 {
  font-family:'DM Serif Display',serif;
  font-size:18px;
  color:#1B3A6B;
}
#print-zone .ph .ph-sub { font-size:10px; color:#666; margin-top:2px; }
#print-zone .ps { /* print section */
  margin-bottom:14px;
  page-break-inside:avoid;
}
#print-zone .ps h2 {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:white;
  background:#1B3A6B;
  padding:5px 10px;
  margin-bottom:6px;
  border-radius:4px;
}
#print-zone .ps h2.rojo   { background:#8B1A1A; }
#print-zone .ps h2.verde  { background:#1A6B45; }
#print-zone .ps h2.azul2  { background:#2E5FA3; }
#print-zone .ps h2.gris   { background:#4A5568; }
#print-zone table {
  width:100%; border-collapse:collapse; font-size:10.5px; margin-bottom:8px;
}
#print-zone table th {
  background:#1B3A6B; color:white; padding:4px 8px; text-align:left; font-size:10px;
}
#print-zone table td {
  padding:4px 8px; border-bottom:1px solid #E9ECF2; vertical-align:top;
}
#print-zone table tr:nth-child(even) td { background:#F5F6FA; }
#print-zone .recom-bloque {
  border:1px solid #D1D9E6;
  border-radius:5px;
  margin-bottom:8px;
  page-break-inside:avoid;
  overflow:visible;
}
#print-zone .recom-bloque-titulo {
  background:#E8F0FB;
  padding:4px 10px;
  font-weight:700;
  font-size:10.5px;
  color:#1B3A6B;
  border-bottom:1px solid #D1D9E6;
  display:flex;
  align-items:center;
  gap:6px;
}
#print-zone .recom-bloque-titulo.alerta { background:#FDECEA; color:#8B1A1A; }
#print-zone .recom-bloque-cuerpo {
  padding:8px 10px;
  font-size:10.5px;
  white-space:pre-wrap;
  word-break:break-word;
  background:white;
}
#print-zone .dato-row { display:flex; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
#print-zone .dato-item { font-size:10.5px; }
#print-zone .dato-label { font-weight:600; color:#555; }
#print-zone .aptitud-box {
  border:2px solid #1A6B45; background:#E6F4EC;
  padding:8px 12px; border-radius:6px; margin-bottom:10px;
  font-weight:600; font-size:12px; color:#1A6B45;
}
#print-zone .fuente { font-size:9px; color:#aaa; font-style:italic; margin-top:2px; }

/* ══════════════════════════════════════════════════
   UTILIDADES
══════════════════════════════════════════════════ */
.text-center { text-align:center; }
.mt-10 { margin-top:10px; }
.mt-14 { margin-top:14px; }
.mb-0  { margin-bottom:0; }
.text-muted { color:#888; font-size:11px; }
.badge-pill {
  display:inline-block;
  padding:2px 8px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
}

/* ══════════════════════════════════════════════════
   MEJORAS UX / MOBILE ADICIONALES v2.1
══════════════════════════════════════════════════ */

/* Pulse en botón generar recomendaciones */
@keyframes pulse-btn {
  0%,100% { box-shadow: 0 0 0 0 rgba(46,95,163,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(46,95,163,0); }
}
.btn-primary:not(:active) { animation: pulse-btn 2.5s ease infinite; }
.btn-primary:active { transform: scale(.97); animation: none; }

/* Cards: indicador visual de colapsado */
.card-head.open { border-bottom: none; }

/* Bottom nav: indicador activo más visible */
.bottom-nav-btn.active .bnav-icon { 
  filter: drop-shadow(0 0 4px rgba(46,95,163,.5));
  transform: translateY(-2px);
  display: inline-block;
  transition: transform .15s;
}

/* Scroll suave en el tab activo */
.section.active {
  scroll-margin-top: calc(var(--topbar-h) + var(--nav-h) + 10px);
}

/* Lab fields: mejor visual en mobile */
@media (max-width: 480px) {
  .lab-grid { grid-template-columns: 1fr 1fr; }
  .lab-field input { padding-right: 32px; font-size: 15px; }
  .lab-unit { font-size: 9px; right: 5px; }
}

/* Check items más cómodos en touch */
.check-item { min-height: 44px; }
.med-item   { min-height: 44px; }

/* Cards en mobile: sin margen lateral */
@media (max-width: 400px) {
  .main { padding-left: 8px; padding-right: 8px; }
  .card-body { padding: 12px 10px; }
}

/* Escalas: score badge más visible */
.score-display {
  background: var(--azulc);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
}

/* Resumen table: scroll horizontal en mobile */
@media (max-width: 600px) {
  .resumen-table th, .resumen-table td { 
    padding: 6px 8px; 
    font-size: 11px; 
    white-space: nowrap;
  }
}

/* Input numérico: sin spinners en mobile */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: .4; }

/* Safe area insets para iPhone con notch */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

/* ── INFO BANNER ── */
.info-banner {
  display:flex; align-items:flex-start; gap:10px;
  background:#E8F0FB; border-left:3px solid #2E5FA3;
  padding:10px 14px; border-radius:0 8px 8px 0;
  font-size:11.5px; color:#1B3A6B; margin-bottom:14px;
}
.info-icon { font-size:16px; flex-shrink:0; }

/* ── CARD HEAD COLORS ── */
.card-head.verde { background:#1A6B45 !important; }
.card-head.azul  { background:#2E5FA3 !important; }
.card-head.gris  { background:#4A5568 !important; }

/* ── BTN PRIMARY / LG ── */
.btn-primary { background:#1B3A6B !important; color:white !important; border-color:#1B3A6B !important; }
.btn-primary:hover { background:#2E5FA3 !important; }
.btn-lg { padding:9px 22px !important; font-size:13px !important; }

/* ── EMPTY MSG ── */
.empty-msg { text-align:center; color:#aaa; font-style:italic; font-size:11px; padding:12px 0; }