/* tema.css — el kit visual de Domenia.
 *
 * Los colores viven en variables: los tres modos (claro, oscuro y alto contraste) son el mismo
 * diseño con otros valores, así que cambiar de modo no toca ninguna pantalla.
 *
 * Modos: se eligen con el atributo `data-modo` en <html> («claro», «oscuro», «contraste» o
 * «sistema»). «Sistema» no fija nada: deja actuar a `prefers-color-scheme`, o sea respeta el modo
 * oscuro de Windows o Android. La elección se guarda por dispositivo (public/tema.js).
 *
 * Acento: índigo #5b21b6 (elegido por el Product Owner el 09-10-2026). No puede cambiarse por un
 * verde: se parece a la marca de EdiPro, y un acento no debe leerse como el de un proveedor.
 */
:root{
  --fondo:#f4f6f9; --card:#ffffff; --tinta:#15202b; --gris:#6b7c8a; --linea:#e3e9ee;
  --acento:#5b21b6; --acento-suave:#f1e9ff; --acento-texto:#ffffff;
  --ok:#0f7a52; --ok-suave:#e6f4ee; --pend:#b45309; --pend-suave:#fdf0e3;
  --alerta:#b91c1c; --alerta-suave:#fdeaea;
  --sombra:0 1px 2px rgba(20,33,43,.06), 0 6px 18px rgba(20,33,43,.05);
  --radio:14px; --radio-chico:10px; --radio-pastilla:999px;
}
html[data-modo="oscuro"]{
  --fondo:#0e1620; --card:#17222e; --tinta:#e8eef3; --gris:#93a4b3; --linea:#26333f;
  --acento:#a78bfa; --acento-suave:#241a3d; --acento-texto:#14061f;
  --ok:#4ade80; --ok-suave:#12301f; --pend:#fbbf24; --pend-suave:#33270c;
  --alerta:#f87171; --alerta-suave:#3a1414;
  --sombra:none;
}
html[data-modo="contraste"]{
  --fondo:#000000; --card:#0d0d0d; --tinta:#ffffff; --gris:#c9d4dd; --linea:#5b6b78;
  --acento:#c4b5fd; --acento-suave:#1a1030; --acento-texto:#0b0614;
  --ok:#86efac; --ok-suave:#0d2417; --pend:#fcd34d; --pend-suave:#2e2306;
  --alerta:#fca5a5; --alerta-suave:#2e1010;
  --sombra:none;
}
@media (prefers-color-scheme: dark){
  html[data-modo="sistema"]{
    --fondo:#0e1620; --card:#17222e; --tinta:#e8eef3; --gris:#93a4b3; --linea:#26333f;
    --acento:#a78bfa; --acento-suave:#241a3d; --acento-texto:#14061f;
    --ok:#4ade80; --ok-suave:#12301f; --pend:#fbbf24; --pend-suave:#33270c;
    --alerta:#f87171; --alerta-suave:#3a1414;
    --sombra:none;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px; line-height:1.5;
}
a{color:var(--acento)}

/* --- cabecera y pie --- */
.cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--linea)}
.cab b{font-size:14px}
.cab .quien{color:var(--gris);font-size:12px}
.cab .crece{flex:1}
.volver{text-decoration:none;color:var(--acento);font-weight:600}
.pie{color:var(--gris);font-size:11.5px;padding:14px 16px}
.lienzo{padding:16px;max-width:1080px;margin:0 auto}

/* --- tarjetas --- */
.card{background:var(--card);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:14px 16px;margin-bottom:14px}
html[data-modo="contraste"] .card{border-width:2px;box-shadow:none}
.card h2{font-size:12px;margin:0 0 10px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}

/* --- pestañas --- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{font:inherit;font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:var(--radio-pastilla);border:1px solid var(--linea);background:var(--card);color:var(--tinta);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--acento);border-color:var(--acento);color:var(--acento-texto)}
html[data-modo="contraste"] .tabs button{border-width:2px}

/* --- tablas --- */
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--linea)}
th{font-size:10.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
.der{text-align:right}

/* --- pastillas de estado --- */
.tag{display:inline-block;border-radius:var(--radio-pastilla);padding:2px 9px;font-size:11px;font-weight:700;background:var(--acento-suave);color:var(--acento)}
.tag.ok{background:var(--ok-suave);color:var(--ok)}
.tag.pend{background:var(--pend-suave);color:var(--pend)}
.tag.alerta{background:var(--alerta-suave);color:var(--alerta)}

/* --- botones --- */
.b{font:inherit;font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--radio-pastilla);border:0;background:var(--acento);color:var(--acento-texto);cursor:pointer}
.b.sec{background:transparent;color:var(--acento);border:1px solid var(--acento)}
.b.plano{background:transparent;color:var(--tinta);border:1px solid var(--linea)}
.b:disabled{opacity:.5;cursor:not-allowed}
html[data-modo="contraste"] .b,html[data-modo="contraste"] .b.sec,html[data-modo="contraste"] .b.plano{border:2px solid var(--tinta)}
.acciones{display:flex;gap:6px;flex-wrap:wrap}

/* --- campos --- */
label{display:block;font-size:11.5px;color:var(--gris);margin:0 0 3px;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{font:inherit;font-size:13px;padding:8px 10px;border-radius:var(--radio-chico);border:1px solid var(--linea);background:var(--card);color:var(--tinta);width:100%}
html[data-modo="contraste"] input,html[data-modo="contraste"] select{border-width:2px}
.campo{margin-bottom:10px}
.fila-campos{display:flex;gap:12px;flex-wrap:wrap}
.fila-campos > *{flex:1 1 200px}

/* --- avisos --- */
.aviso{border-radius:var(--radio-chico);padding:10px 12px;font-size:12px;margin:0 0 14px;background:var(--acento-suave);color:var(--tinta);border:1px solid var(--linea)}
.aviso.ok{background:var(--ok-suave)}
.aviso.pend{background:var(--pend-suave)}
.aviso.alerta{background:var(--alerta-suave)}
code{background:var(--acento-suave);padding:1px 5px;border-radius:5px;font-size:12px}

/* --- selector de modo --- */
.modo{display:flex;gap:6px;align-items:center}
.modo button{font:inherit;font-size:11.5px;padding:5px 11px;border-radius:var(--radio-pastilla);border:1px solid var(--linea);background:var(--card);color:var(--tinta);cursor:pointer}
.modo button[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--acento-texto)}

/* --- ficha de reserva (la usa la conserjería) --- */
.ficha{border:1px solid var(--linea);border-radius:var(--radio);padding:12px 14px;margin-bottom:10px;background:var(--card)}
.ficha .h{font-weight:700}
.ficha .m{color:var(--gris);font-size:11.5px;margin:3px 0 8px}
.cifras{display:flex;gap:14px;flex-wrap:wrap}
.cifras div{flex:1;min-width:90px}
.cifras b{display:block;font-size:17px;color:var(--acento)}
.cifras small{color:var(--gris);font-size:11px}

@media (max-width:560px){
  body{font-size:15px}
  .lienzo{padding:12px}
  .card{padding:12px}
  th,td{padding:9px 5px}
  .b{padding:9px 16px;min-height:44px}
}