:root {
  --fondo: #f5f6f8;
  --tarjeta: #ffffff;
  --texto: #1c2430;
  --tenue: #5d6675;
  --borde: #d8dde5;
  --acento: #1f5fbf;
  --acento-texto: #ffffff;
  --ok: #17703a;
  --mal: #b3261e;
  --aviso: #7a5200;
  --radio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #13171e;
    --tarjeta: #1d232d;
    --texto: #e7ebf1;
    --tenue: #9aa4b4;
    --borde: #333d4c;
    --acento: #6ea8ff;
    --acento-texto: #0d1420;
    --ok: #5fd08a;
    --mal: #ff8a80;
    --aviso: #f2c26b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #13171e;
  --tarjeta: #1d232d;
  --texto: #e7ebf1;
  --tenue: #9aa4b4;
  --borde: #333d4c;
  --acento: #6ea8ff;
  --acento-texto: #0d1420;
  --ok: #5fd08a;
  --mal: #ff8a80;
  --aviso: #f2c26b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: anywhere;
}
h1 { font-size: 1.5rem; margin: 0.6em 0 0.4em; }
h2 { font-size: 1.1rem; margin: 0 0 0.6em; }
a { color: var(--acento); }

.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 700; color: var(--texto); text-decoration: none; }
.contenedor { max-width: 720px; margin: 0 auto; padding: 16px; }
.en-linea { display: inline; margin: 0; }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; margin: 0 0 16px;
}
.centrada { max-width: 380px; margin: 40px auto; }

.formulario { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-size: 0.95rem; color: var(--tenue); }
input, select, textarea, button {
  font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px;
  width: 100%; min-height: 44px;
}
textarea { min-height: 96px; resize: vertical; }
button, .boton {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; width: auto; min-width: 120px;
}
button.principal, .principal {
  background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 600;
}
button.secundario, .secundario {
  background: transparent; color: var(--acento); border-color: var(--borde);
}

.aviso { padding: 10px 12px; border-radius: 8px; border: 1px solid currentColor; }
.aviso.mal { color: var(--mal); }
.vacio, .detalle, .contador, .mac { color: var(--tenue); }
.contador { font-size: 0.85rem; margin-left: 4px; }
.mac { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; }

.buscador { display: grid; gap: 10px; margin-bottom: 16px; }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  border-bottom: 1px solid var(--borde); padding: 10px 0;
}
.lista li:last-child { border-bottom: 0; }
.lista li a { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; text-decoration: none; color: var(--texto); }
.lista.compacta li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.codigo-grande { font-family: ui-monospace, Menlo, Consolas, monospace; }
.etiqueta-tipo { font-size: 0.8rem; color: var(--tenue); text-transform: uppercase; }

.estado {
  font-size: 0.8rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--tenue); white-space: nowrap;
}
.estado-ok { color: var(--ok); border-color: var(--ok); }
.estado-averiada, .estado-baja { color: var(--mal); border-color: var(--mal); }
.estado-en_reparacion, .estado-devuelta_proveedor { color: var(--aviso); border-color: var(--aviso); }

.nivel { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; min-width: 44px; }
.nivel-fail, .nivel-fatal, .nivel-hw { color: var(--mal); }
.nivel-warn { color: var(--aviso); }
.nivel-pass, .nivel-ok { color: var(--ok); }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 16px; }
.datos dt { color: var(--tenue); }
.datos dd { margin: 0; }

.paginas { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

.log {
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px;
  padding: 10px; font-size: 0.85rem; max-height: 60vh; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
}

@media (max-width: 480px) {
  .filtros { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .datos dt { margin-top: 6px; }
  .contenedor { padding: 12px; }
}