/* Plataforma IAAS-UCIA — hoja de estilo unica */

:root{
  --tinta:#16242b; --tinta-2:#4a5d67; --tinta-3:#7b8c96;
  --papel:#f3f6f7; --blanco:#fff; --linea:#dde5e9;
  --marca:#0d5c63; --marca-osc:#094248; --marca-cl:#e5f1f1;
  --ok:#1c7a4a; --ok-cl:#e6f4ec;
  --aviso:#9a6206; --aviso-cl:#fdf3e2;
  --malo:#a32b2b; --malo-cl:#fbeaea;
  --radio:8px;
  --sombra:0 1px 2px rgba(22,36,43,.06), 0 2px 8px rgba(22,36,43,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
a{color:var(--marca)}

/* ---------- Cabecera ---------- */
.top{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--marca); color:#fff; padding:0 20px; min-height:56px;
}
.marca{display:flex; align-items:baseline; gap:8px; text-decoration:none; color:#fff}
.marca-sigla{font-weight:700; letter-spacing:.06em}
.marca-txt{font-size:12px; opacity:.8}
.nav{display:flex; gap:2px; flex:1; flex-wrap:wrap}
.nav a{
  color:#dfeced; text-decoration:none; padding:8px 12px; border-radius:6px;
  font-size:14px; white-space:nowrap;
}
.nav a:hover{background:rgba(255,255,255,.12); color:#fff}
.nav a.on{background:var(--marca-osc); color:#fff; font-weight:600}
.nav-alertas{position:relative}
.badge{
  background:#e9573f; color:#fff; font-size:11px; font-weight:700;
  border-radius:9px; padding:1px 6px; margin-left:5px;
}
.usuario{display:flex; align-items:center; gap:12px; padding:6px 0}
.usuario-info{text-align:right; line-height:1.25}
.usuario-info b{font-size:13px; display:block}
.usuario-info small{font-size:11px; opacity:.8}
.salir{
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.35);
  padding:5px 11px; border-radius:6px; font-size:13px;
}
.salir:hover{background:rgba(255,255,255,.14)}

/* ---------- Estructura ---------- */
.contenido{max-width:1180px; margin:0 auto; padding:22px 20px 60px}
.pagina-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:18px;
}
.pagina-head h1{font-size:22px; margin:0 0 3px}
.pagina-head .sub{margin:0; color:var(--tinta-2); font-size:14px; max-width:70ch}
.acciones{display:flex; gap:8px; flex-wrap:wrap}
.pie{
  max-width:1180px; margin:0 auto; padding:16px 20px 30px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--tinta-3); font-size:12px; border-top:1px solid var(--linea);
}

.tarjeta{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); padding:18px; margin-bottom:18px; box-shadow:var(--sombra);
}
.tarjeta h2{font-size:16px; margin:0 0 12px}
.tarjeta h2 .sub{font-weight:400; color:var(--tinta-3); font-size:13px}
.rejilla{display:grid; gap:16px}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ---------- Indicadores ---------- */
.kpi{
  background:var(--blanco); border:1px solid var(--linea); border-left:3px solid var(--marca);
  border-radius:var(--radio); padding:14px 16px;
}
.kpi-val{font-size:26px; font-weight:700; line-height:1.15}
.kpi-lab{font-size:13px; color:var(--tinta-2); margin-top:2px}
.kpi-nota{font-size:12px; color:var(--tinta-3); margin-top:5px}
.kpi.ok{border-left-color:var(--ok)}
.kpi.aviso{border-left-color:var(--aviso)}
.kpi.malo{border-left-color:var(--malo)}

.barra{background:#e7edf0; border-radius:99px; height:8px; overflow:hidden; margin:6px 0}
.barra span{display:block; height:100%; background:var(--marca); border-radius:99px}
.barra.ok span{background:var(--ok)}
.barra.aviso span{background:var(--aviso)}
.barra.malo span{background:var(--malo)}

/* ---------- Avisos ---------- */
.flash, .aviso-caja{
  padding:11px 14px; border-radius:var(--radio); margin-bottom:14px;
  border:1px solid var(--linea); background:var(--blanco); font-size:14px;
}
.flash-ok{background:var(--ok-cl); border-color:#bfe3ce; color:#125c37}
.flash-error{background:var(--malo-cl); border-color:#f0c9c9; color:#8d2222}
.flash-aviso{background:var(--aviso-cl); border-color:#f0dcb4; color:#7d4f05}
.flash-info{background:var(--marca-cl); border-color:#c4dede; color:#0b4a50}

.nota{
  border-left:3px solid var(--marca); background:var(--marca-cl);
  padding:10px 14px; border-radius:0 var(--radio) var(--radio) 0;
  font-size:13.5px; color:#0b4a50; margin:12px 0;
}
.nota.aviso{border-left-color:var(--aviso); background:var(--aviso-cl); color:#7d4f05}
.nota.malo{border-left-color:var(--malo); background:var(--malo-cl); color:#8d2222}

/* ---------- Formularios ---------- */
.seccion{
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:16px 18px 4px; margin:0 0 18px; background:var(--blanco);
}
.seccion legend{
  font-weight:600; font-size:14px; color:var(--marca-osc);
  padding:2px 9px; background:var(--marca-cl); border-radius:5px;
}
.sec-desc{color:var(--tinta-2); font-size:13px; margin:2px 0 14px}
.campo{margin-bottom:17px}
.etiqueta{display:block; font-weight:600; font-size:14px; margin-bottom:3px}
.req{color:var(--malo)}
.unidad{font-weight:400; color:var(--tinta-3); font-size:13px}
.ayuda{margin:0 0 6px; font-size:12.5px; color:var(--tinta-3); max-width:80ch}

input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=email], select, textarea{
  width:100%; max-width:480px; padding:8px 10px; font:inherit;
  border:1px solid #c8d3d9; border-radius:6px; background:#fff; color:var(--tinta);
}
textarea{max-width:640px; resize:vertical}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--marca); outline-offset:1px; border-color:var(--marca);
}
input[readonly]{background:#f2f5f6; color:var(--tinta-2)}

.opciones{display:flex; flex-direction:column; gap:5px; margin-top:4px}
.opcion{
  display:flex; align-items:flex-start; gap:8px; padding:6px 9px;
  border:1px solid var(--linea); border-radius:6px; background:#fbfcfd;
  cursor:pointer; font-size:14px; max-width:640px;
}
.opcion:hover{border-color:var(--marca); background:var(--marca-cl)}
.opcion input{margin-top:3px; flex:none; accent-color:var(--marca)}
.escala{display:flex; gap:6px; flex-wrap:wrap}
.escala-op{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1px solid var(--linea); border-radius:6px; padding:6px 10px; cursor:pointer;
}

.campo-error input, .campo-error select, .campo-error textarea{border-color:var(--malo)}
.error-campo{color:var(--malo); font-size:12.5px; margin:4px 0 0; font-weight:600}

.form-pie{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding-top:6px; border-top:1px solid var(--linea); margin-top:6px;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block; padding:9px 16px; border-radius:6px; font:inherit;
  font-weight:600; font-size:14px; cursor:pointer; text-decoration:none;
  border:1px solid transparent; background:var(--marca); color:#fff;
}
.btn:hover{background:var(--marca-osc)}
.btn[disabled], .btn.off{background:#b6c3c9; cursor:not-allowed; pointer-events:none}
.btn-sec{background:#fff; color:var(--marca); border-color:#bcd2d3}
.btn-sec:hover{background:var(--marca-cl)}
.btn-mal{background:var(--malo)}
.btn-mal:hover{background:#842020}
.btn-sm{padding:5px 11px; font-size:13px}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); background:#fff}
table.tabla{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
.tabla th, .tabla td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--linea)}
.tabla th{
  background:#eef3f5; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--tinta-2); font-weight:700; white-space:nowrap;
}
.tabla tbody tr:hover{background:#f7fafb}
.tabla td.num, .tabla th.num{text-align:right; font-variant-numeric:tabular-nums}
.tabla .codigo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:13px}

.etq{
  display:inline-block; padding:2px 8px; border-radius:99px; font-size:12px;
  font-weight:600; border:1px solid transparent; white-space:nowrap;
}
.etq-ok{background:var(--ok-cl); color:#125c37; border-color:#bfe3ce}
.etq-av{background:var(--aviso-cl); color:#7d4f05; border-color:#f0dcb4}
.etq-mal{background:var(--malo-cl); color:#8d2222; border-color:#f0c9c9}
.etq-neu{background:#eef2f4; color:var(--tinta-2); border-color:var(--linea)}

/* ---------- Lista de verificacion (precheck) ---------- */
.check{list-style:none; padding:0; margin:0}
.check li{
  display:flex; gap:12px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--linea);
}
.check li:last-child{border-bottom:0}
.check .marca-est{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid;
  place-items:center; font-weight:700; font-size:14px; color:#fff;
}
.check .si{background:var(--ok)}
.check .no{background:var(--malo)}
.check .txt{flex:1}
.check .txt b{display:block; font-size:14px}
.check .txt small{color:var(--tinta-2); font-size:13px}

/* ---------- Calendario de cumplimiento ---------- */
.calendario{display:flex; flex-wrap:wrap; gap:3px; margin:10px 0}
.dia{
  width:15px; height:15px; border-radius:3px; background:#e3eaed;
  border:1px solid rgba(0,0,0,.05);
}
.dia.si{background:var(--ok)}
.dia.no{background:#e79a9a}
.dia.hoy{outline:2px solid var(--marca); outline-offset:1px}
.dia.fuera{background:#f0f3f5}
.leyenda{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--tinta-2)}
.leyenda span{display:flex; align-items:center; gap:5px}

/* ---------- Login ---------- */
.login-caja{
  max-width:390px; margin:8vh auto; background:#fff; border:1px solid var(--linea);
  border-radius:12px; padding:30px 28px; box-shadow:var(--sombra);
}
.login-caja h1{font-size:19px; margin:0 0 4px}
.login-caja .sub{color:var(--tinta-2); font-size:13.5px; margin:0 0 20px}
.login-caja .campo{margin-bottom:14px}
.login-caja input{max-width:none}
.login-caja .btn{width:100%; text-align:center}

/* ---------- Barras simples de grafica ---------- */
.grafica{display:flex; align-items:flex-end; gap:3px; height:110px; margin-top:8px}
.grafica .col{flex:1; min-width:5px; background:var(--marca-cl); border-radius:2px 2px 0 0; position:relative}
.grafica .col i{display:block; background:var(--marca); border-radius:2px 2px 0 0; width:100%}

.vacio{text-align:center; padding:34px 18px; color:var(--tinta-3)}
.vacio p{margin:6px 0}

@media (max-width:720px){
  .top{gap:10px; padding:8px 14px}
  .nav{order:3; width:100%}
  .contenido{padding:16px 14px 40px}
  .pagina-head h1{font-size:19px}
}
@media print{
  .top,.pie,.acciones,.btn{display:none !important}
  body{background:#fff}
  .tarjeta{break-inside:avoid; box-shadow:none}
}