:root {
  --fondo: #f3f5f8;
  --panel: #ffffff;
  --texto: #1c2430;
  --suave: #5e6a79;
  --borde: #dce2e9;
  --primario: #1f5fae;
  --primario-osc: #184c8c;
  --ok: #17663f;      --ok-bg: #e2f3e9;
  --aviso: #8a5a00;   --aviso-bg: #fdf0d5;
  --info: #1f5fae;    --info-bg: #e5eefa;
  --error: #a8231b;   --error-bg: #fbe4e1;
  --gris-bg: #eceff3;
  --radio: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Ubuntu, Roboto, sans-serif;
  font-size: 15px; line-height: 1.45;
  background: var(--fondo); color: var(--texto);
}
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
code { background: var(--gris-bg); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.muted { color: var(--suave); }
.nowrap { white-space: nowrap; }
.texto-largo { white-space: pre-wrap; margin: 0 0 .8rem; }

/* ---------- Cabecera ---------- */
.topbar {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: #14243a; color: #fff; padding: .6rem 1.25rem;
}
.marca { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 650; }
.marca:hover { text-decoration: none; }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.menu a { color: #c9d4e3; padding: .4rem .75rem; border-radius: 6px; }
.menu a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.menu a.activo { background: rgba(255,255,255,.14); color: #fff; }
.sesion { display: flex; align-items: center; gap: .9rem; }
.sesion a { color: #fff; display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.sesion small { color: #9fb0c6; font-size: .75rem; }
.sesion form { margin: 0; }
.sesion .btn-link { color: #c9d4e3; }

/* ---------- Estructura ---------- */
.contenido { max-width: 1240px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
.contenido.centrado { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.miga { margin: 0 0 .2rem; font-size: .85rem; color: var(--suave); }
.botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dos-columnas > .panel { margin-bottom: 1rem; }
.vacio { color: var(--suave); margin: .2rem 0; }
.vacio-grande { text-align: center; padding: 3rem 1rem; }
.pie-tabla { margin: .6rem 0 0; font-size: .85rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  background: var(--primario); color: #fff; border: 1px solid var(--primario);
  padding: .5rem .95rem; border-radius: 6px; font: inherit; font-weight: 550;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--primario-osc); text-decoration: none; }
.btn-sec { background: #fff; color: var(--texto); border-color: var(--borde); }
.btn-sec:hover { background: var(--gris-bg); }
.btn-sm { padding: .25rem .6rem; font-size: .85rem; }
.btn-bloque { width: 100%; margin-top: .5rem; }
.btn-peligro { background: var(--error); border-color: var(--error); }
.btn-peligro:hover { background: #8a1c15; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primario); cursor: pointer; }
.btn-link.peligro { color: var(--error); font-size: .85rem; }

/* ---------- Alertas e insignias ---------- */
.alerta { padding: .7rem 1rem; border-radius: 6px; margin-bottom: .8rem; border: 1px solid transparent; }
.alerta-ok { background: var(--ok-bg); color: var(--ok); border-color: #bfe2cd; }
.alerta-error { background: var(--error-bg); color: var(--error); border-color: #f2c2bc; }
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--gris-bg); color: var(--suave); align-self: flex-start; height: fit-content; }
.badge-operativo, .badge-completada { background: var(--ok-bg); color: var(--ok); }
.badge-en-mantencion, .badge-en-curso, .badge-proximo { background: var(--info-bg); color: var(--info); }
.badge-pendiente, .badge-pronto { background: var(--aviso-bg); color: var(--aviso); }
.badge-fuera-de-servicio, .badge-vencida { background: var(--error-bg); color: var(--error); }
.badge-de-baja { background: var(--gris-bg); color: var(--suave); }

/* ---------- Indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-bottom: 1rem; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; display: flex; flex-direction: column; color: var(--texto); }
a.kpi:hover { border-color: var(--primario); text-decoration: none; }
.kpi-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-txt { color: var(--suave); font-size: .85rem; }
.kpi-alerta { border-color: #f0b7b0; background: var(--error-bg); }
.kpi-alerta .kpi-num { color: var(--error); }
.kpi-aviso { border-color: #f1d79c; background: var(--aviso-bg); }
.kpi-aviso .kpi-num { color: var(--aviso); }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); font-weight: 600; background: #f8f9fb; }
tbody tr:hover { background: #f8fafd; }
tr.fila-vencida { background: #fff8f7; }
tr.inactivo td { color: var(--suave); }
td.acciones { text-align: right; white-space: nowrap; }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { border-bottom: 1px solid var(--borde); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple a { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; color: var(--texto); }
.lista-simple a:hover { text-decoration: none; background: #f8fafd; }

/* ---------- Formularios ---------- */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: #344051; }
label small { font-weight: 400; color: var(--suave); }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--texto); width: 100%;
  padding: .5rem .6rem; border: 1px solid #c8d0da; border-radius: 6px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #a9c5ea; border-color: var(--primario); }
textarea { resize: vertical; }
label.check { flex-direction: row; align-items: center; gap: .5rem; }
label.check input { width: auto; }
.formulario { display: flex; flex-direction: column; gap: .9rem; }
.formulario.angosto { max-width: 520px; }
.grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem 1rem; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: 1 / -1; }
.form-botones { display: flex; gap: .5rem; padding-top: .3rem; }
.filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; align-items: end; }
.filtros-botones { display: flex; gap: .4rem; }
.campo-tipo { display: flex; flex-direction: column; gap: .4rem; }
.campo-tipo small { font-size: .8rem; color: var(--suave); }
.agregar-tipo { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.agregar-tipo label { flex: 1; min-width: 220px; max-width: 420px; }
.renombrar { display: flex; gap: .4rem; align-items: center; max-width: 420px; }
.renombrar input { padding: .3rem .5rem; flex: 1; min-width: 9rem; }
.tabla-tipos td { vertical-align: middle; }
td.acciones form { display: inline-flex; align-items: center; margin: 0 0 0 .6rem; }

.tarjeta-login { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 2rem; width: 100%; max-width: 380px; text-align: center; }
.tarjeta-login h1 { font-size: 1.3rem; margin: .6rem 0 .2rem; }
.tarjeta-login form { display: flex; flex-direction: column; gap: .8rem; text-align: left; margin-top: 1rem; }

/* ---------- Fichas ---------- */
.ficha { display: grid; grid-template-columns: 170px 1fr; gap: .45rem 1rem; margin: 0; }
.ficha dt { color: var(--suave); font-size: .88rem; }
.ficha dd { margin: 0; }
.ficha-ancha { grid-template-columns: 170px 1fr 170px 1fr; }

.adjuntos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.adjuntos li { border: 1px solid var(--borde); border-radius: 6px; padding: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.adjuntos a { display: flex; flex-direction: column; gap: .35rem; color: var(--texto); }
.adjuntos img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; background: var(--gris-bg); }
.icono-archivo { height: 110px; display: flex; align-items: center; justify-content: center; background: var(--gris-bg); border-radius: 4px; font-weight: 700; color: var(--suave); }
.nombre-archivo { font-size: .8rem; word-break: break-all; }
.subir { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.subir input { width: auto; flex: 1; min-width: 220px; }

.zona-peligro { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px dashed #e5aaa4; border-radius: var(--radio); padding: .8rem 1rem; color: var(--suave); font-size: .88rem; margin-top: 1.5rem; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--suave); font-size: .9rem; }
.ayuda ul { margin: 0; padding-left: 1.2rem; }
.ayuda li { margin-bottom: .3rem; }

.solo-impresion { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .ficha-ancha { grid-template-columns: 150px 1fr; }
}
@media (max-width: 760px) {
  .topbar { gap: .6rem; padding: .6rem 1rem; }
  .menu { order: 3; flex-basis: 100%; }
  .sesion { margin-left: auto; }
  .contenido { padding: 1rem 1rem 2.5rem; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dos-columnas, .grilla { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .ficha, .ficha-ancha { grid-template-columns: 1fr; gap: .1rem; }
  .ficha dd { margin-bottom: .5rem; }
  .lista-simple a { flex-direction: column; gap: .2rem; }
  /* Tipos de equipo: cada fila como tarjeta */
  .tabla-tipos thead { display: none; }
  .tabla-tipos, .tabla-tipos tbody, .tabla-tipos tr, .tabla-tipos td { display: block; width: 100%; }
  .tabla-tipos tr { padding: .7rem 0; border-bottom: 1px solid var(--borde); }
  .tabla-tipos td { border: 0; padding: .2rem 0; }
  .tabla-tipos td.col-equipos, .tabla-tipos td.col-estado { display: inline-block; width: auto; margin-right: .8rem; }
  .tabla-tipos td.col-equipos::before { content: "Equipos: "; color: var(--suave); }
  .tabla-tipos td.acciones { text-align: left; }
  .tabla-tipos td.acciones form:first-child { margin-left: 0; }
  .renombrar { max-width: none; }
}

/* ---------- Impresión ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11pt; }
  .topbar, .no-imprimir, .alerta, .btn { display: none !important; }
  .solo-impresion { display: block; }
  .contenido { max-width: none; padding: 0; }
  .panel { border: 1px solid #bbb; break-inside: avoid; }
  .dos-columnas { grid-template-columns: 1fr 1fr; }
  .cabecera-impresion { border-bottom: 2px solid #000; padding-bottom: 4pt; margin-bottom: 8pt; font-size: 9pt; }
  a { color: #000; }
  th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge { border: 1px solid #999; }
  .firmas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3.5rem; }
  .firmas div { border-top: 1px solid #000; padding-top: 4pt; text-align: center; font-size: 9pt; }
}