/* 29/10/2026 - Estilo del catálogo de referencias. Ancho completo, funciona en el móvil,
   modo claro y oscuro. Sin Vite ni npm. */
:root { --fondo:#f4f5f8; --panel:#fff; --texto:#1c2030; --suave:#5f677a; --borde:#e0e3ea; --campo:#fafbfd;
  --acento:#2f4fb4; --acento-suave:#e7ecfb; --acento-texto:#fff; --oro:#c78a1a; --ok:#21835a; --error:#b3261e;
  --sombra:0 4px 14px rgba(20,30,70,.07); color-scheme:light; }
@media (prefers-color-scheme: dark) { :root { --fondo:#12141b; --panel:#1b1e28; --texto:#e8ebf2; --suave:#9aa2b4; --borde:#2c3140;
  --campo:#161922; --acento:#7f9cff; --acento-suave:#232c4a; --acento-texto:#0d1020; --oro:#e8b04a; --ok:#5fd09a; --error:#f08a82;
  --sombra:0 4px 14px rgba(0,0,0,.35); color-scheme:dark; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--fondo); color:var(--texto); font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--acento); }
h1 { margin:0; font-size:1.7rem; } h2 { margin:0 0 10px; font-size:1.2rem; } h3 { margin:18px 0 6px; font-size:1rem; }
.barra { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:22px; padding:10px 28px; background:#161b33; color:#fff; flex-wrap:wrap; }
.barra .logo { color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px; font-size:1.1rem; }
.barra .logo span { color:#9fb3ff; }
.barra nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.barra nav a { color:#dfe5ff; text-decoration:none; padding:6px 12px; border-radius:8px; font-weight:600; }
.barra nav a.actual, .barra nav a:hover { background:rgba(255,255,255,.14); color:#fff; }
.barra .cuenta { display:flex; gap:10px; align-items:center; font-size:.92rem; }
.barra .cuenta form { margin:0; }
.barra .cuenta button { background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; padding:4px 12px; border-radius:8px; box-shadow:none; }
main { padding:22px 28px 40px; }
.cabeza { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.sub, .meta { color:var(--suave); font-size:.9rem; margin:2px 0 0; }
section, .panel { background:var(--panel); border:1px solid var(--borde); border-radius:12px; padding:18px; box-shadow:var(--sombra); margin-bottom:16px; min-width:0; }
.flash { padding:10px 14px; border-radius:10px; border-left:5px solid var(--ok); background:var(--panel); color:var(--ok); margin-bottom:14px; font-weight:600; }
.flash.error { color:var(--error); border-left-color:var(--error); }
label { display:block; font-weight:600; margin:10px 0 4px; font-size:.9rem; }
input[type=text], input[type=number], input[type=password], input[type=search], select, textarea { width:100%; font:inherit; color:var(--texto);
  background:var(--campo); border:1px solid var(--borde); border-radius:8px; padding:7px 10px; }
textarea { min-height:90px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
button, .boton { display:inline-flex; align-items:center; gap:6px; background:var(--acento); color:var(--acento-texto); border:1px solid var(--acento);
  border-radius:8px; padding:7px 16px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.secundario { background:transparent; color:var(--acento); }
.chico { padding:3px 10px; font-size:.85rem; }
.filtros { display:grid; grid-template-columns:2fr repeat(6, minmax(120px,1fr)) auto; gap:10px; align-items:end; }
.filtros label { margin-top:0; }
@media (max-width:1100px) { .filtros { grid-template-columns:1fr 1fr; } }
.tabla { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.9rem; }
th, td { text-align:left; padding:8px 8px; border-bottom:1px solid var(--borde); vertical-align:top; }
th { font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; color:var(--suave); }
tr:hover td { background:var(--acento-suave); }
td.titulo a { font-weight:700; text-decoration:none; }
.orig { color:var(--suave); font-size:.85rem; }
.marcas { display:flex; gap:3px; flex-wrap:wrap; }
.marca { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:6px; background:var(--acento-suave);
  color:var(--acento); font-weight:800; font-size:.78rem; }
.marca.temas { background:var(--borde); color:var(--suave); }
.etq { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.78rem; font-weight:700; background:var(--borde); color:var(--suave); }
.etq.ok { background:transparent; border:1px solid var(--ok); color:var(--ok); }
.ficha { display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:16px; align-items:start; }
@media (max-width:900px) { .ficha { grid-template-columns:1fr; } main { padding:14px 12px 30px; } .barra { padding:10px 14px; } }
dl.datos { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0; }
dl.datos dt { color:var(--suave); font-size:.88rem; } dl.datos dd { margin:0; }
.texto { white-space:pre-wrap; }
.paginas { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.paginas a, .paginas span { padding:4px 10px; border-radius:6px; border:1px solid var(--borde); text-decoration:none; }
.paginas span.actual { background:var(--acento); color:var(--acento-texto); border-color:var(--acento); }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px; }
.tarjeta { background:var(--panel); border:1px solid var(--borde); border-radius:10px; padding:12px; text-decoration:none; color:inherit; display:block; }
.tarjeta:hover { border-color:var(--acento); }
.tarjeta b { display:block; }
.marcas-elegir { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:6px; }
.marcas-elegir label { font-weight:400; margin:0; display:flex; gap:6px; align-items:center; border:1px solid var(--borde); border-radius:8px; padding:5px 8px; }
.acceso { min-height:100vh; display:grid; place-items:center; padding:16px; }
.acceso form { width:100%; max-width:380px; background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:26px; box-shadow:var(--sombra); }
.acceso button { width:100%; justify-content:center; margin-top:16px; }
/* Móvil: menú en una línea y la tabla de títulos como tarjetas */
@media (max-width:700px) {
  .barra { gap:8px 14px; }
  .barra nav { order:3; flex-basis:100%; }
  .barra .cuenta { margin-left:auto; }
  .tabla.tarjetas-movil table, .tabla.tarjetas-movil tbody, .tabla.tarjetas-movil tr, .tabla.tarjetas-movil td { display:block; width:100%; }
  .tabla.tarjetas-movil thead { display:none; }
  .tabla.tarjetas-movil tr { border:1px solid var(--borde); border-radius:10px; padding:8px 10px; margin-bottom:10px; }
  .tabla.tarjetas-movil td { border:0; padding:2px 0; }
  .tabla.tarjetas-movil td[data-e]:not(:empty)::before { content:attr(data-e) ": "; color:var(--suave); font-size:.8rem; }
}
/* 30/10/2026 - Filtros activos */
.activos { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.chip { display:inline-flex; gap:6px; align-items:center; padding:3px 10px; border-radius:999px; background:var(--acento-suave); color:var(--acento); text-decoration:none; font-size:.85rem; font-weight:600; }
.chip:hover { background:var(--acento); color:var(--acento-texto); }