/* Tema Soproteco — se carga DESPUES de estilo.css y solo redefine lo propio.
   El estilo.css original viene del inventario de la Colombo Japonesa: su
   acento es el rojo hinomaru, que es identidad de ese cliente. Aqui se pasa a
   azul corporativo y se anade lo que la app nueva necesita (cabecera, menu,
   rejillas de despliegue). */

:root {
  --acento: #1f5fa8;
  --acento-suave: #e6eef9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acento: #7fb2ee;
    --acento-suave: #1a2a3f;
  }
}
:root[data-theme="dark"] { --acento: #7fb2ee; --acento-suave: #1a2a3f; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- cabecera y menu --- */
.cabecera {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.marca strong { color: var(--acento); letter-spacing: .5px; }
.marca .tenue { margin-left: 8px; font-size: 13px; }
.menu { display: flex; gap: 4px; flex-wrap: wrap; }
.menu a {
  padding: 6px 12px; border-radius: var(--radio);
  color: var(--texto); text-decoration: none; font-size: 14px;
}
.menu a:hover { background: var(--gris-suave); }
.menu a.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

.contenido { max-width: 1240px; margin: 0 auto; padding: 22px 20px 40px; }
.pie { max-width: 1240px; margin: 0 auto; padding: 0 20px 28px; font-size: 12px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 26px 0 10px; }
.tenue { color: var(--tenue); }

/* --- tarjetas de resumen --- */
.tarjetas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 16px 0 4px; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px;
}
.tarjeta .cifra { font-size: 26px; font-weight: 700; line-height: 1.1; }
.tarjeta .rotulo { font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; }
.tarjeta.alerta { border-color: var(--malo); background: var(--malo-suave); }
.tarjeta.alerta .cifra { color: var(--malo); }

/* --- tablas --- */
table.datos { width: 100%; border-collapse: collapse; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
table.datos th, table.datos td { padding: 8px 10px; text-align: left; font-size: 14px;
  border-bottom: 1px solid var(--borde); }
table.datos th { background: var(--gris-suave); font-size: 12px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--tenue); }
table.datos tr:last-child td { border-bottom: 0; }
table.datos tbody tr:hover { background: var(--gris-suave); }
table.datos a { color: var(--enlace); text-decoration: none; }
table.datos a:hover { text-decoration: underline; }

/* --- etiquetas de estado --- */
.etq { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.etq-ok    { background: var(--ok-suave);    color: var(--ok); }
.etq-aviso { background: var(--aviso-suave); color: var(--aviso); }
.etq-malo  { background: var(--malo-suave);  color: var(--malo); }
.etq-info  { background: var(--info-suave);  color: var(--info); }
.etq-gris  { background: var(--gris-suave);  color: var(--tenue); }

/* --- barra de progreso --- */
.barra { height: 7px; background: var(--gris-suave); border-radius: 999px; overflow: hidden; min-width: 90px; }
.barra > span { display: block; height: 100%; background: var(--acento); }
.barra.lleno > span { background: var(--ok); }

/* --- rejilla de pasos del despliegue --- */
.pasos { display: flex; gap: 3px; }
.paso {
  width: 15px; height: 15px; border-radius: 3px; background: var(--gris-suave);
  border: 1px solid var(--borde); display: inline-block;
}
.paso.hecho     { background: var(--ok);    border-color: var(--ok); }
.paso.en_curso  { background: var(--aviso); border-color: var(--aviso); }
.paso.fallido   { background: var(--malo);  border-color: var(--malo); }
.paso.no_aplica { background: var(--borde); border-color: var(--borde); }

.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--tenue); margin: 10px 0 0; }
.leyenda span.paso { vertical-align: -2px; margin-right: 4px; }

/* --- filtros --- */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.filtros select, .filtros input[type=search] {
  padding: 6px 9px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto); font-size: 14px;
}
.filtros button {
  padding: 6px 14px; border: 1px solid var(--acento); border-radius: var(--radio);
  background: var(--acento); color: #fff; font-size: 14px; cursor: pointer;
}
.filtros a.limpiar { font-size: 13px; color: var(--enlace); }

/* --- ficha --- */
.ficha { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.bloque { background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; }
.bloque h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--tenue); }
dl.pares { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 14px; }
dl.pares dt { color: var(--tenue); }
dl.pares dd { margin: 0; }

.aviso-caja { border-left: 3px solid var(--malo); background: var(--malo-suave);
  padding: 10px 14px; border-radius: var(--radio); margin: 12px 0; font-size: 14px; }
.aviso-caja.ok { border-left-color: var(--ok); background: var(--ok-suave); }
.vacio { padding: 26px; text-align: center; color: var(--tenue);
  background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio); }