/* ============================================================================
   Sistema de Diseño — Portal Artmédica  (ver STYLE_GUIDE.md del portal)
   Base compartida por la app de Costeo de Notas Técnicas.
   ============================================================================ */
:root{
  --bg:#f1f6fb; --card:#ffffff; --border:#e2eaf3; --border-soft:#eef2f7;
  --ink:#0f172a; --ink-muted:#475569; --ink-subtle:#94a3b8;
  --blue-deep:#1e3a8a; --blue:#2563eb; --blue-mid:#3b82f6; --blue-sky:#0ea5e9; --blue-soft:#dbeafe;
  --accent:#fb7185; --accent-deep:#9f1239; --accent-soft:#ffe4e6;
  --green:#16a34a; --green-light:#dcfce7; --red:#dc2626; --red-light:#fee2e2;
  --orange:#ea580c; --orange-light:#fed7aa;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 4px rgba(15,23,42,.03);
  --shadow-md:0 4px 14px rgba(30,58,138,.08);
  --r:20px; --r-sm:12px; --r-pill:999px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.4;
}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--accent)}

h1,.kpi-val,.stat-val{font-family:'Outfit',sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1}

/* ---------- Header ---------- */
.header{
  background:var(--card); color:var(--ink); padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; border-bottom:1px solid var(--border-soft); position:relative;
}
.header::before{content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue),var(--accent));}
.header .brand-mark{display:flex; align-items:center; gap:14px}
.header .brand-mark .fallback{font-family:'Outfit',sans-serif; font-weight:800;
  font-size:.95rem; letter-spacing:.16em; color:var(--ink)}
.header .title-block{border-left:1px solid var(--border); padding-left:16px; margin-left:6px}
.header h1{font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:700; letter-spacing:-.02em; margin:0}
.header p{font-size:.76rem; color:var(--ink-muted); margin:3px 0 0; font-weight:500}
.header-right{display:flex; align-items:center; gap:12px}
.header-badge{display:inline-block; background:var(--blue-soft); color:var(--blue-deep);
  border-radius:var(--r-pill); padding:5px 14px; font-size:.7rem; font-weight:600}

/* ---------- Nav ---------- */
.nav{display:flex; gap:6px; padding:10px 32px; background:var(--card);
  border-bottom:1px solid var(--border-soft); flex-wrap:wrap}
.nav a{padding:7px 16px; border-radius:var(--r-pill); font-weight:600; font-size:.8rem;
  color:var(--ink-muted); transition:all .18s}
.nav a:hover{background:var(--blue-soft); color:var(--blue)}
.nav a.active{background:var(--ink); color:#fff}

/* ---------- Layout ---------- */
.page{padding:24px 32px; max-width:1400px; margin:0 auto}
.page.wide{max-width:none}
.page>*{animation:fadeUp .5s ease both}
.page>*:nth-child(2){animation-delay:.05s}
.page>*:nth-child(3){animation-delay:.10s}
.page>*:nth-child(4){animation-delay:.15s}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

.card{background:var(--card); border-radius:var(--r); padding:20px 22px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border); margin-bottom:20px}
.card-title{font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); margin:0 0 14px}
.section-title{font-family:'Outfit',sans-serif; font-weight:700; font-size:1.05rem; margin:0 0 4px}
.muted{color:var(--ink-muted)} .subtle{color:var(--ink-subtle)}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.spacer{flex:1}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}

/* ---------- KPI ---------- */
.kpi{position:relative; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow-sm)}
.kpi::before{content:''; position:absolute; top:22px; right:22px; width:8px; height:8px;
  border-radius:50%; background:var(--blue)}
.kpi.accent::before{background:var(--accent)}
.kpi-val{font-size:1.9rem; color:var(--ink)}
.kpi-label{font-size:.72rem; color:var(--ink-muted); margin-top:5px; font-weight:500}

/* ---------- Botones ---------- */
.btn{padding:9px 18px; background:var(--ink); color:#fff; border:none; border-radius:var(--r-pill);
  font-family:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  transition:background .2s, transform .15s; display:inline-flex; align-items:center; gap:7px}
.btn:hover{background:var(--accent); transform:translateY(-1px)}
.btn.ghost{background:var(--bg); color:var(--ink-muted); border:1px solid var(--border)}
.btn.ghost:hover{background:var(--blue-soft); color:var(--blue); border-color:var(--blue)}
.btn.sm{padding:6px 12px; font-size:.74rem}
.btn.danger{background:var(--red)} .btn.danger:hover{background:var(--accent-deep)}
.icon-btn{background:none; border:none; cursor:pointer; color:var(--ink-subtle); font-size:1rem;
  padding:4px 7px; border-radius:8px; line-height:1}
.icon-btn:hover{background:var(--red-light); color:var(--red)}

/* ---------- Inputs ---------- */
input,select,textarea{font-family:inherit; font-size:.85rem; font-weight:500; padding:8px 12px;
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); color:var(--ink);
  transition:border-color .2s, background .2s; width:100%}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); background:var(--card)}
label.field{display:block; margin-bottom:12px}
label.field>span{display:block; font-size:.65rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-muted); margin-bottom:5px}
.inline-input{padding:5px 8px; font-size:.82rem}
input.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Tablas ---------- */
.tbl-wrap{overflow:auto; border-radius:var(--r-sm); border:1px solid var(--border)}
table{width:100%; border-collapse:collapse; font-size:.82rem}
thead th{background:var(--bg); color:var(--ink-muted); font-size:.63rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; padding:9px 12px; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1; text-align:left; white-space:nowrap}
tbody td{padding:7px 12px; border-bottom:1px solid var(--border-soft); color:var(--ink);
  font-weight:500; vertical-align:middle}
tbody tr:hover td{background:var(--bg)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tfoot td{padding:9px 12px; font-weight:700; border-top:2px solid var(--border); background:var(--bg)}
.tbl-compact td{padding:5px 10px}
.tbl-compact thead th{padding:7px 10px}

/* ---------- Badges / pills ---------- */
.badge{display:inline-block; border-radius:var(--r-pill); padding:3px 10px; font-size:.68rem; font-weight:600}
.badge.blue{background:var(--blue-soft); color:var(--blue-deep)}
.badge.green{background:var(--green-light); color:var(--green)}
.badge.red{background:var(--red-light); color:var(--red)}
.badge.orange{background:var(--orange-light); color:var(--orange)}
.badge.gray{background:#eef2f7; color:var(--ink-muted)}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px}
.tab{padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--card);
  color:var(--ink-muted); font-weight:600; font-size:.78rem; cursor:pointer; transition:all .18s}
.tab:hover{border-color:var(--blue); color:var(--blue)}
.tab.active{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- Toast ---------- */
#toast{position:fixed; bottom:24px; right:24px; z-index:50; display:flex; flex-direction:column; gap:8px}
.toast{background:var(--ink); color:#fff; padding:11px 18px; border-radius:var(--r-sm);
  font-size:.8rem; font-weight:600; box-shadow:var(--shadow-md); animation:fadeUp .3s ease}
.toast.err{background:var(--red)}
.toast.ok{background:var(--green)}

/* ---------- Progress bar ---------- */
.bar-track{height:8px; background:var(--blue-soft); border-radius:var(--r-pill); overflow:hidden}
.bar-fill{height:100%; border-radius:var(--r-pill); background:var(--accent); transition:width .5s cubic-bezier(.4,0,.2,1)}

/* ---------- Footer ---------- */
.footer{text-align:center; font-size:.7rem; color:var(--ink-subtle); padding:24px;
  border-top:1px solid var(--border); font-weight:500}

/* ---------- Secciones plegables ---------- */
.sect-toggle{cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:8px}
.sect-toggle .caret{display:inline-block; transition:transform .18s; font-size:.7rem; color:var(--ink-subtle)}
.sect-toggle:hover .card-title{color:var(--blue)}
.sect-toggle:hover{background:var(--blue-soft); border-radius:8px}

/* Pares apilados (mes/año, %/N°) en tablas compactas */
.io-pair{display:inline-flex; flex-direction:column; gap:2px}
.io-pair > div{display:flex; align-items:center; gap:4px; justify-content:flex-end}
.io-pair input.num{width:60px; padding:3px 6px}
.io-pair .u{font-size:.55rem; color:var(--ink-subtle); width:22px; text-align:left}
.tbl-compact td input.num{min-width:54px}

.empty{text-align:center; padding:50px 20px; color:var(--ink-subtle)}
.empty h2{font-family:'Outfit',sans-serif; color:var(--ink-muted); font-weight:700}

@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3,.grid-2{grid-template-columns:1fr}
  .header,.nav,.page{padding-left:16px; padding-right:16px}
}
.print-only{display:none}
@media print{
  .nav,.no-print,.header-right,#toast,.screen-only{display:none!important}
  .print-only{display:block!important}
  /* La animación de entrada (fadeUp arranca en opacity:0) deja el contenido invisible
     al imprimir: se desactiva para que las hojas salgan con todo visible. */
  .page>*{animation:none!important; opacity:1!important; transform:none!important}
  body{background:#fff} .card{box-shadow:none; border:1px solid #ddd; break-inside:avoid}
  .page{max-width:none}
  .print-only .card{margin-bottom:14px}
  #inclCard,#comorbPrintCard{break-inside:auto}
  #inclCard thead{display:table-header-group}
  #inclCard tr,#comorbPrintCard tr{break-inside:avoid}
}

/* ---------- Buscador de la tabla de construcción ---------- */
.cg-hidden{display:none !important}
.cg-find{display:inline-flex; align-items:center; gap:4px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-pill); padding:1px 4px 1px 9px; width:auto}
.cg-find:focus-within{border-color:var(--accent)}
.cg-find input{border:none; background:transparent; padding:3px 2px; font-size:.75rem;
  font-weight:600; width:170px; border-radius:0}
.cg-find input:focus{outline:none; background:transparent; border:none}
.cg-find .cg-x{background:none; border:none; cursor:pointer; color:var(--ink-subtle);
  font-size:.72rem; line-height:1; padding:3px 5px; border-radius:var(--r-pill); width:auto}
.cg-find .cg-x:hover{background:var(--blue-soft); color:var(--blue)}