@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:        #EEF0EA;
  --paper:     #FBFAF6;
  --linea:     #D8D9CE;
  --primario:  #2C4A43;
  --primario-2:#3D6259;
  --ocre:      #B8763A;
  --alerta:    #A8433C;
  --texto:     #232620;
  --texto-sua: #5C6259;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--texto);
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.5;
}

h1,h2,h3{
  font-family:'Lora', serif;
  margin:0 0 .3em 0;
  color:var(--primario);
}

.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------- Encabezado institucional ---------- */
.encabezado{
  background:var(--primario);
  color:#F3F1E8;
  padding:22px 32px;
  display:flex;
  align-items:center;
  gap:16px;
}
.encabezado .sello{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--ocre);
  display:flex; align-items:center; justify-content:center;
  font-family:'Lora',serif; font-weight:700; color:#fff;
  flex-shrink:0;
}
.encabezado h1{ color:#fff; font-size:1.35rem; }
.encabezado p{ margin:0; color:#CBD6CF; font-size:.85rem; }

/* ---------- Contenedor general ---------- */
.contenedor{
  max-width:1080px;
  margin:0 auto;
  padding:28px 24px 60px;
}

/* ---------- Pestañas tipo carpeta física ---------- */
.pestanas{
  display:flex;
  gap:4px;
  margin-bottom:0;
  padding-left:6px;
}
.pestana{
  position:relative;
  padding:11px 22px 12px;
  background:#DEE1D6;
  color:var(--texto-sua);
  text-decoration:none;
  font-weight:500;
  font-size:.92rem;
  border-radius:10px 10px 0 0;
  border:1px solid var(--linea);
  border-bottom:none;
  top:3px;
  transition:transform .12s ease, background .12s ease;
}
.pestana:hover{ background:#E8EAE0; transform:translateY(-2px); }
.pestana.activa{
  background:var(--paper);
  color:var(--primario);
  font-weight:600;
  top:0;
  box-shadow:0 -2px 0 rgba(0,0,0,.02);
}
.pestana .clip{
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  margin-right:7px;
}
.clip-leve{ background:#7FA593; }
.clip-moderado{ background:var(--ocre); }
.clip-grave{ background:var(--alerta); }

.panel{
  background:var(--paper);
  border:1px solid var(--linea);
  border-radius:0 10px 10px 10px;
  padding:28px;
  min-height:420px;
}

/* ---------- Tarjetas de estadística ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:16px;
  margin-bottom:28px;
}
.stat{
  border:1px solid var(--linea);
  border-left:4px solid var(--primario-2);
  border-radius:6px;
  padding:14px 16px;
  background:#fff;
}
.stat .num{
  font-family:'Lora',serif;
  font-size:1.7rem;
  font-weight:700;
  color:var(--primario);
}
.stat .label{ font-size:.8rem; color:var(--texto-sua); }
.stat.alerta{ border-left-color:var(--alerta); }
.stat.ocre{ border-left-color:var(--ocre); }

/* ---------- Tablas ---------- */
table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
thead th{
  text-align:left;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--texto-sua);
  border-bottom:2px solid var(--linea);
  padding:8px 10px;
}
tbody td{
  padding:11px 10px;
  border-bottom:1px solid var(--linea);
  vertical-align:top;
}
tbody tr:hover{ background:#F5F4EE; }

.etiqueta{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:600;
}
.etiqueta.leve{ background:#E4EEE8; color:#3D6B58; }
.etiqueta.moderado{ background:#F3E4D2; color:var(--ocre); }
.etiqueta.grave{ background:#F2DEDC; color:var(--alerta); }

.estado{ font-size:.78rem; color:var(--texto-sua); }

/* ---------- Formularios ---------- */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 20px;
}
.form-grid .full{ grid-column:1 / -1; }
label{
  display:block;
  font-size:.78rem;
  font-weight:600;
  color:var(--texto-sua);
  margin-bottom:5px;
}
input, select, textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--linea);
  border-radius:6px;
  font-family:inherit;
  font-size:.9rem;
  background:#fff;
  color:var(--texto);
}
textarea{ resize:vertical; min-height:80px; }
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--primario-2);
  outline-offset:1px;
}
button, .boton{
  background:var(--primario);
  color:#fff;
  border:none;
  padding:10px 20px;
  border-radius:6px;
  font-weight:600;
  font-size:.88rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
button:hover, .boton:hover{ background:var(--primario-2); }

.aviso{
  padding:12px 16px;
  border-radius:6px;
  margin-bottom:18px;
  font-size:.88rem;
}
.aviso.exito{ background:#E4EEE8; color:#3D6B58; }
.aviso.error{ background:#F2DEDC; color:var(--alerta); }
.aviso.info{ background:#EAE6DA; color:var(--texto-sua); }

.fila-superior{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

@media (max-width:640px){
  .form-grid{ grid-template-columns:1fr; }
  .pestana{ padding:9px 13px; font-size:.82rem; }
}

/* ---------- Estilos de Impresión / Exportación PDF ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .encabezado, .pestanas, .no-print, nav, button, .boton { display: none !important; }
  .contenedor { max-width: 100%; padding: 0; margin: 0; }
  .panel { border: none; padding: 0; background: transparent; }
  .informe-imprimible { border: none !important; padding: 0 !important; }
  table { page-break-inside: avoid; }
}