:root {
  --fondo: #f6f3ee; --tarjeta: #ffffff; --tinta: #1d1b16; --suave: #6b665c; --linea: #e4dfd5;
  --verde: #2f6b4f; --verde-f: #e3efe8; --rojo: #b5483a; --rojo-f: #f6e4e0; --ambar: #b07a12; --ambar-f: #f7ecd2;
  --azul: #3a5f86; --azul-f: #e1e9f2; --morado: #6b4f86; --morado-f: #ece5f2;
  --radio: 16px; --sombra: 0 1px 2px rgba(40, 30, 10, .06), 0 4px 16px rgba(40, 30, 10, .04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14130f; --tarjeta: #1e1c17; --tinta: #f1ede4; --suave: #a39d8f; --linea: #34312a;
    --verde: #6fc29a; --verde-f: #1d2e26; --rojo: #e58b7d; --rojo-f: #35211d; --ambar: #e0b04f; --ambar-f: #342b14;
    --azul: #8fb4dc; --azul-f: #1b2633; --morado: #b99ad4; --morado-f: #2a2133; --sombra: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 18px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.pagina { max-width: 1080px; margin: 0 auto; padding: 20px 16px 64px; }
header.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
h1 { font-size: 1.7rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
.sub { color: var(--suave); font-size: .9rem; }
.acciones { display: flex; gap: 8px; align-items: center; }
button, .boton { font: inherit; font-weight: 600; color: var(--tinta); background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 16px; min-height: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
button.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
@media (prefers-color-scheme: dark) { button.primario { color: #10231a; } }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 14px; }
.card { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); min-width: 0; }
.kpi { border-left: 6px solid var(--c, var(--linea)); }
.kpi .t { font-size: .85rem; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .v { font-size: 2.1rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 2px; }
.kpi .n { font-size: .85rem; color: var(--suave); margin-top: 2px; }
.neg { color: var(--rojo); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista li:last-child { border-bottom: 0; }
.lista .m { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.lista small { color: var(--suave); display: block; }
.vacio { color: var(--suave); padding: 6px 0; }
svg.g { width: 100%; height: auto; display: block; }
svg.g text { fill: var(--suave); font-size: 11px; font-family: inherit; }
.leyenda { display: flex; gap: 16px; font-size: .85rem; color: var(--suave); margin-top: 8px; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.barra-h { display: grid; grid-template-columns: 112px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: .95rem; }
.barra-h .pista { background: var(--linea); border-radius: 6px; height: 14px; overflow: hidden; }
.barra-h .pista b { display: block; height: 100%; background: var(--c, var(--azul)); border-radius: 6px; }
.barra-h .m { font-variant-numeric: tabular-nums; font-weight: 650; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.mensajes { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; }
.burbuja { padding: 10px 14px; border-radius: 14px; max-width: 88%; white-space: pre-wrap; }
.burbuja.yo { align-self: flex-end; background: var(--verde); color: #fff; }
@media (prefers-color-scheme: dark) { .burbuja.yo { color: #10231a; } }
.burbuja.ia { align-self: flex-start; background: var(--azul-f); }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.fichas button { font-weight: 500; font-size: .92rem; padding: 6px 12px; min-height: 36px; border-radius: 20px; }
form.envio { display: flex; gap: 8px; }
form.envio input { flex: 1; font: inherit; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); min-height: 44px; min-width: 0; }
.aviso { padding: 12px 16px; border-radius: 12px; margin-bottom: 10px; font-weight: 600; }
.aviso.rojo { background: var(--rojo-f); color: var(--rojo); }
.aviso.amarillo { background: var(--ambar-f); color: var(--ambar); }
.aviso.verde { background: var(--verde-f); color: var(--verde); }
.entrada { position: fixed; inset: 0; background: var(--fondo); display: grid; place-items: center; padding: 20px; z-index: 10; }
.entrada .card { width: min(420px, 100%); }
.entrada input { width: 100%; font: inherit; padding: 12px; border-radius: 12px; border: 1px solid var(--linea); margin: 10px 0 14px; background: var(--fondo); color: var(--tinta); }
table.t { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.t th { text-align: left; color: var(--suave); font-weight: 600; padding: 6px 8px; }
table.t td { padding: 8px; border-top: 1px solid var(--linea); vertical-align: top; word-break: break-word; }
.medidor { height: 12px; background: var(--linea); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.medidor b { display: block; height: 100%; background: var(--c, var(--verde)); }
.oculto { display: none !important; }
@media (max-width: 480px) { .kpi .v { font-size: 1.85rem; } h1 { font-size: 1.45rem; } .barra-h { grid-template-columns: 90px 1fr auto; } }
@media (prefers-reduced-motion: no-preference) { .medidor b, .barra-h .pista b { transition: width .5s ease; } }