:root {
  --fondo: #f6f7f9; --panel: #fff; --texto: #1d2430; --suave: #5b6576; --borde: #dde2ea;
  --acento: #1f5fbf; --acento-t: #fff;
  --rojo: #c62828; --naranja: #e8710a; --amarillo: #d9a400; --verde: #2e7d32; --azul: #1e6fd9; --gris: #8a94a3;
  --rojo-f: #fdecea; --naranja-f: #fff1e3; --amarillo-f: #fff8d9; --verde-f: #e8f5e9; --azul-f: #e8f0fd; --gris-f: #f0f2f5;
  --radio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12161c; --panel: #1b2129; --texto: #e6e9ee; --suave: #9aa4b2; --borde: #2c3440;
    --acento: #5b9bff; --acento-t: #0b1220;
    --rojo-f: #3a1d1d; --naranja-f: #3a2814; --amarillo-f: #3a3214; --verde-f: #17301a; --azul-f: #172a45; --gris-f: #252c36;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--acento); }
.barra { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--borde); }
.marca { font-weight: 700; }
.barra nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barra nav a { padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--texto); }
.barra nav a.activo { background: var(--acento); color: var(--acento-t); }
.yo { margin-left: auto; color: var(--suave); font-size: 13px; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 4px 0 4px; } h2 { font-size: 17px; margin: 22px 0 8px; } h3 { margin: 0 0 4px; font-size: 16px; }
.sub { color: var(--suave); margin: 0 0 12px; font-size: 13px; }
select, input, textarea, button { font: inherit; color: inherit; }
select, input, textarea { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 7px 9px; width: 100%; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: 8px 14px; background: var(--acento); color: var(--acento-t); font-weight: 600; }
button.sec { background: var(--gris-f); color: var(--texto); font-weight: 500; }
button.chico { padding: 4px 10px; font-size: 13px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; cursor: pointer; }
.tarjeta .num { font-size: 26px; font-weight: 700; }
.barra-av { height: 6px; border-radius: 3px; background: var(--gris-f); overflow: hidden; display: flex; margin: 8px 0 6px; }
.barra-av span { display: block; height: 100%; }
.mini { font-size: 12px; color: var(--suave); display: flex; gap: 8px; flex-wrap: wrap; }
.lista { display: flex; flex-direction: column; gap: 8px; }
.item { display: grid; grid-template-columns: 6px 1fr auto; gap: 12px; align-items: center; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px 10px 0; overflow: hidden; }
.item .lado { align-self: stretch; }
.item .tit { font-weight: 600; }
.item .meta { font-size: 12.5px; color: var(--suave); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--gris-f); color: var(--texto); white-space: nowrap; }
.c-rojo { --c: var(--rojo); --cf: var(--rojo-f); } .c-naranja { --c: var(--naranja); --cf: var(--naranja-f); }
.c-amarillo { --c: var(--amarillo); --cf: var(--amarillo-f); } .c-verde { --c: var(--verde); --cf: var(--verde-f); }
.c-azul { --c: var(--azul); --cf: var(--azul-f); } .c-gris, .c-blanco, .c-evento { --c: var(--gris); --cf: var(--gris-f); }
.item .lado { background: var(--c); } .chip.estado { background: var(--cf); color: var(--c); font-weight: 600; }
.bloque { margin-bottom: 18px; }
.bloque-cab { display: flex; align-items: baseline; gap: 8px; }
.bloque-cab .n { font-weight: 700; color: var(--c); }
.vacio { color: var(--suave); background: var(--panel); border: 1px dashed var(--borde); border-radius: var(--radio); padding: 12px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros > * { width: auto; flex: 1 1 160px; }
.gantt { overflow-x: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.gantt table { border-collapse: collapse; width: 100%; font-size: 13px; }
.gantt th, .gantt td { border-bottom: 1px solid var(--borde); padding: 6px 8px; text-align: left; white-space: nowrap; }
.gantt td.t { white-space: normal; min-width: 260px; }
.gantt td.m { text-align: center; min-width: 56px; }
.punto-g { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
.punto-g.programado { background: transparent; border: 2px solid var(--gris); }
.centro { max-width: 380px; margin: 10vh auto; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; }
.centro label, dialog label { display: block; margin: 10px 0; font-size: 13px; color: var(--suave); }
.centro label input, dialog label input, dialog label select, dialog label textarea { margin-top: 4px; color: var(--texto); }
.error { color: var(--rojo); min-height: 1em; font-size: 13px; }
.aviso { font-size: 12.5px; color: var(--suave); background: var(--gris-f); padding: 8px 10px; border-radius: 8px; }
dialog { border: 1px solid var(--borde); border-radius: 14px; padding: 18px; width: min(520px, 94vw); background: var(--panel); color: var(--texto); }
dialog::backdrop { background: rgb(0 0 0 / .35); }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 12px 0 0; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila-enlace { display: flex; gap: 6px; margin-top: 4px; }
.fila-enlace button { white-space: nowrap; }
.detalle { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.detalle dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 10px 0; font-size: 14px; }
.detalle dt { color: var(--suave); }
.hist { font-size: 13px; }
.hist li { margin: 4px 0; }
.anulado { text-decoration: line-through; opacity: .6; }
@media (max-width: 600px) {
  .detalle dl { grid-template-columns: 1fr; } .fila2 { grid-template-columns: 1fr; }
  .yo { width: 100%; margin: 0; }
}