/* CONTROL · panel de administración de HOLVA */
:root {
  --tinta: #0f172a; --acento: #0e7490; --acento-osc: #155e75;
  --verde: #16a34a; --rojo: #dc2626; --ambar: #b45309; --azul: #2563eb;
  --gris: #64748b; --borde: #e2e8f0; --fondo: #f6f8fb; --blanco: #fff;
  --sombra: 0 6px 22px rgba(15, 23, 42, .07);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--acento-osc); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .8em; }
.contenedor { width: min(1240px, 95%); margin: 0 auto; }

/* barra superior */
.barra { background: var(--tinta); color: #fff; }
.barra .contenedor { display: flex; align-items: center; gap: 1.2rem; min-height: 58px; flex-wrap: wrap; }
.barra .logo { font-weight: 800; letter-spacing: .03em; color: #fff; }
.barra .logo span { color: #38bdf8; }
.barra nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.barra nav a { color: #cbd5e1; padding: .5rem .7rem; border-radius: 8px; font-size: .91rem; font-weight: 600; }
.barra nav a:hover { background: #1e293b; color: #fff; text-decoration: none; }
.barra nav a.activo { background: #1e293b; color: #fff; }
.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: .7rem; font-size: .87rem; color: #94a3b8; }

/* estructura */
main { padding: 1.6rem 0 3rem; }
.encabezado-pag { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.encabezado-pag h1 { margin: 0; }
.encabezado-pag .acciones { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: var(--sombra); }
.reja { display: grid; gap: 1rem; }
.reja-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.reja-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.reja-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.kpi { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gris); font-weight: 700; }
.kpi-num { font-size: 1.5rem; font-weight: 800; margin: .15rem 0 0; }
.kpi-nota { font-size: .85rem; color: var(--gris); }
.verde { color: var(--verde); } .rojo { color: var(--rojo); } .ambar { color: var(--ambar); } .gris-t { color: var(--gris); }

/* botones y chips */
.btn { display: inline-flex; align-items: center; gap: .4em; background: var(--acento); color: #fff;
  border: 0; border-radius: 10px; padding: .6em 1em; font-weight: 700; font-size: .9rem; cursor: pointer; }
.btn:hover { background: var(--acento-osc); text-decoration: none; color: #fff; }
.btn.gris { background: #e2e8f0; color: #334155; }
.btn.gris:hover { background: #cbd5e1; color: #1e293b; }
.btn.rojo { background: var(--rojo); } .btn.rojo:hover { background: #b91c1c; }
.btn.chico { padding: .38em .7em; font-size: .82rem; border-radius: 8px; }
.chip { display: inline-block; padding: .22em .62em; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.chip.verde { background: #dcfce7; color: #15803d; } .chip.rojo { background: #fee2e2; color: #b91c1c; }
.chip.ambar { background: #fef3c7; color: #92400e; } .chip.azul { background: #dbeafe; color: #1d4ed8; }
.chip.gris { background: #e2e8f0; color: #475569; }

/* tablas */
.tabla-envoltura { overflow-x: auto; background: #fff; border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .62rem .7rem; text-align: left; border-bottom: 1px solid #eef2f7; vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); background: #fbfdff; position: sticky; top: 0; }
tbody tr:hover { background: #fafcff; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 800; background: #f8fafc; }

/* formularios */
.campo { margin-bottom: .85rem; }
label { display: block; font-weight: 700; font-size: .83rem; margin-bottom: .3rem; color: #334155; }
input, select, textarea { width: 100%; padding: .58em .7em; border: 1.5px solid var(--borde); border-radius: 9px;
  font: inherit; font-size: .93rem; background: #fff; color: var(--tinta); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(14,116,144,.13); }
.fila-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.ayuda { font-size: .82rem; color: var(--gris); margin-top: .25rem; }
.mensajes { margin-bottom: 1rem; }
.aviso { border-radius: 12px; padding: .7rem 1rem; margin-bottom: .6rem; font-size: .92rem; border: 1px solid; }
.aviso.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.aviso.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.vacio { padding: 1.6rem; text-align: center; color: var(--gris); }

/* login */
.login-pantalla { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(150deg, #0f172a, #155e75); padding: 1.5rem; }
.login-caja { background: #fff; border-radius: 18px; padding: 2rem; width: min(430px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-caja h1 { font-size: 1.5rem; }

/* barras de avance */
.barra-avance { height: 9px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.barra-avance > i { display: block; height: 100%; background: var(--acento); }
.mini-lista { list-style: none; padding: 0; margin: 0; font-size: .89rem; }
.mini-lista li { padding: .45rem 0; border-bottom: 1px dashed var(--borde); display: flex; gap: .6rem; align-items: baseline; }
.mini-lista li:last-child { border-bottom: 0; }
.mini-lista .fecha { color: var(--gris); font-size: .8rem; white-space: nowrap; }
details { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: .7rem 1rem; margin-bottom: .6rem; box-shadow: var(--sombra); }
details summary { cursor: pointer; font-weight: 700; }
.seccion-t { display: flex; align-items: baseline; gap: .6rem; margin: 1.6rem 0 .7rem; }
.seccion-t h2 { margin: 0; }
.seccion-t .nota { color: var(--gris); font-size: .86rem; }
@media (max-width: 720px) {
  .barra .contenedor { gap: .5rem; }
  .barra nav a { padding: .45rem .5rem; font-size: .85rem; }
  .encabezado-pag h1 { font-size: 1.25rem; }
}