/* Oscuro de verdad: negro real, superficies que se levantan un paso, y bordes
   hechos de blanco translucido en vez de gris plano. La diferencia entre un
   oscuro bueno y uno mediocre esta en dos detalles: que los bordes sean
   `rgba(255,255,255,.08)` y que cada superficie lleve un reflejo de un pixel en
   el canto de arriba. Sin eso todo queda plano y muerto.

   El color del inquilino se sube de luminosidad antes de usarlo. Un verde
   corporativo como #0b6e4f sobre negro no brilla: se apaga. `color-mix` lo
   aclara conservando el matiz, de modo que la casa se reconoce y ademas se ve. */
:root {
  --casa:#0b6e4f;
  --luz:#4ade9f;
  --luz-honda:#0f2d22;
  --fondo:#08090a;
  --sup:#131518;
  --sup-alta:#1b1e22;
  --borde:rgba(255,255,255,.13);
  --borde-claro:rgba(255,255,255,.24);
  --brillo:inset 0 1px 0 0 rgba(255,255,255,.07);
  --texto:#ffffff;   /* la jerarquia la marcan tamano y peso, no el gris */
  --texto-2:#e6e8eb;
  --texto-3:#c5c8ce;
  --vivo:#ffb224;
  --curso:#4ade9f;
  --cerrado:#8b8f97;
  --alerta:#ff6369;
  --radio:10px;
  --display:system-ui,-apple-system,"Segoe UI Variable Display","Segoe UI",sans-serif;
  --rotulo:ui-monospace,"Cascadia Mono",Consolas,"SF Mono","DejaVu Sans Mono",monospace;
  --dato:ui-monospace,"Cascadia Mono",Consolas,"SF Mono","DejaVu Sans Mono",monospace;
  --texto-f:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root {
  --luz:color-mix(in oklab, var(--casa) 42%, #a7ffd8);
  --luz-honda:color-mix(in oklab, var(--casa) 55%, #000000);
  --curso:var(--luz);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--fondo); color:var(--texto);
  font:16px/1.65 var(--texto-f); -webkit-font-smoothing:antialiased;
  display:grid; grid-template-columns:15.5rem 1fr; min-height:100%;
}
a { color:inherit; }
::selection { background:var(--luz); color:#04120c; }

/* Rail: negro, separado por un pelo de luz. */
.rail {
  background:var(--fondo); border-right:1px solid var(--borde);
  display:flex; flex-direction:column; gap:1.8rem;
  padding:1.4rem 1rem; position:sticky; top:0; height:100vh;
}
.rail .casa { display:flex; align-items:center; gap:.65rem; min-width:0; padding:0 .4rem; }
.rail .sello {
  width:2rem; height:2rem; border-radius:7px; flex:none; display:grid; place-items:center;
  font:600 .9rem/1 var(--display); letter-spacing:-.02em;
  background:linear-gradient(160deg, var(--luz), var(--luz-honda)); color:#04120c;
  box-shadow:0 0 0 1px var(--borde), 0 2px 10px -2px color-mix(in oklab, var(--luz) 40%,
    transparent);
}
.rail .sello img { width:100%; height:100%; border-radius:7px; object-fit:cover; }
.rail .nombre {
  font:600 .95rem/1.2 var(--display); letter-spacing:-.01em; color:var(--texto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail nav { display:flex; flex-direction:column; gap:.1rem; }
.rail nav a {
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:.5rem .6rem; border-radius:7px; font-size:.93rem; color:var(--texto-2);
  transition:background .14s ease, color .14s ease;
}
.rail nav a:hover, .rail nav a:focus-visible {
  background:rgba(255,255,255,.05); color:var(--texto);
}
.rail nav a.aqui {
  background:rgba(255,255,255,.07); color:var(--texto); font-weight:500;
  box-shadow:var(--brillo);
}
.rail .grupo {
  font:.75rem/1 var(--rotulo); letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-3); margin:1.1rem 0 .5rem .65rem;
}
.rail .pie { margin-top:auto; font-size:.78rem; border-top:1px solid var(--borde);
  padding-top:.9rem; }
.rail .pie .quien {
  display:block; color:var(--texto-2); font:.78rem/1.6 var(--dato); word-break:break-all;
  margin-bottom:.5rem;
}
.rail .pie a { color:var(--texto-2); text-decoration:none; }
.rail .pie a:hover { color:var(--texto); }

.lienzo { min-width:0; display:flex; flex-direction:column; }
.aviso {
  background:var(--sup); border-bottom:1px solid var(--borde); color:var(--texto-3);
  font-size:.82rem; line-height:1.55; padding:.65rem 2.2rem;
}
main { padding:2.6rem 2.2rem 5rem; max-width:82rem; width:100%; }

/* Cabecera con un halo detras del titular: la unica luz de la pantalla. */
.encabezado { position:relative; margin:0 0 2.4rem; }
.encabezado::before {
  content:""; position:absolute; left:-6rem; top:-7rem; width:30rem; height:20rem;
  background:radial-gradient(closest-side,
    color-mix(in oklab, var(--luz) 12%, transparent), transparent);
  pointer-events:none; z-index:0;
}
.encabezado > * { position:relative; z-index:1; }
.rotulo {
  font:.75rem/1 var(--rotulo); letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-3); margin:0 0 1.1rem;
}
h1 {
  font:600 2.7rem/1.06 var(--display); letter-spacing:-.035em; margin:0;
  max-width:22ch; color:#fff;
}
h1 .cifra { color:var(--luz); font-variant-numeric:tabular-nums; }
h2 {
  font:600 1.1rem/1.2 var(--display); letter-spacing:-.02em; margin:2.8rem 0 1rem;
  color:#fff;
}
.entradilla { color:var(--texto-2); margin:1rem 0 0; max-width:62ch; font-size:1rem; }

/* Fichas: superficie elevada, borde de luz, reflejo arriba. */
.cola {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr));
  gap:.85rem; margin:0 0 1.4rem;
}
.ficha {
  display:grid; grid-template-columns:auto 1fr auto; gap:.1rem .85rem; align-items:center;
  text-decoration:none; background:var(--sup); border:1px solid var(--borde);
  border-radius:var(--radio); padding:1rem 1.1rem; box-shadow:var(--brillo);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.ficha:hover, .ficha:focus-visible {
  background:var(--sup-alta); border-color:var(--borde-claro); transform:translateY(-1px);
}
.inicial {
  grid-row:span 2; width:2.3rem; height:2.3rem; border-radius:8px; flex:none;
  display:grid; place-items:center; font:600 .92rem/1 var(--display); letter-spacing:-.02em;
  background:rgba(255,255,255,.06); color:var(--texto-2); box-shadow:var(--brillo);
}
.ficha.vivo .inicial {
  background:color-mix(in oklab, var(--vivo) 14%, transparent); color:var(--vivo);
}
.ficha.curso .inicial {
  background:color-mix(in oklab, var(--luz) 14%, transparent); color:var(--luz);
}
.clave {
  font:.75rem/1 var(--rotulo); letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-3);
}
.titulo {
  font:600 .98rem/1.35 var(--display); letter-spacing:-.015em; display:block;
  margin:.15rem 0 0; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.espera {
  grid-row:span 2; text-align:right; font:600 1.15rem/1 var(--dato);
  font-variant-numeric:tabular-nums; color:var(--texto); white-space:nowrap;
  letter-spacing:-.02em;
}
.espera small {
  display:block; font:.75rem/1.6 var(--rotulo); letter-spacing:.12em; color:var(--texto-3);
}
.ficha .cuerpo {
  grid-column:1 / -1; margin:.8rem 0 0; color:var(--texto-2); font-size:.93rem;
  line-height:1.6;
}
.ficha .pie { grid-column:1 / -1; margin:.85rem 0 0; display:flex; flex-wrap:wrap; gap:.35rem; }
.chip {
  display:inline-flex; align-items:center; gap:.4rem; padding:.15rem .55rem;
  border-radius:6px; font:.82rem/1.6 var(--texto-f); background:rgba(255,255,255,.07);
  border:1px solid var(--borde); color:var(--texto-2);
}
.chip.estado { color:var(--texto); }
.chip.estado.vivo {
  color:var(--vivo); border-color:color-mix(in oklab, var(--vivo) 28%, transparent);
  background:color-mix(in oklab, var(--vivo) 10%, transparent);
}
.chip.estado.curso {
  color:var(--luz); border-color:color-mix(in oklab, var(--luz) 28%, transparent);
  background:color-mix(in oklab, var(--luz) 9%, transparent);
}
.punto { width:.45rem; height:.45rem; border-radius:50%; background:var(--cerrado); }
.punto.vivo { background:var(--vivo); box-shadow:0 0 8px color-mix(in oklab, var(--vivo) 60%,
  transparent); }
.punto.curso { background:var(--luz); box-shadow:0 0 8px color-mix(in oklab, var(--luz) 60%,
  transparent); }

.vacio {
  background:var(--sup); border:1px solid var(--borde); border-radius:var(--radio);
  padding:3.2rem 2rem; text-align:center; box-shadow:var(--brillo); color:var(--texto-2);
}
.vacio .marca {
  width:3rem; height:3rem; margin:0 auto 1.1rem; border-radius:50%;
  background:color-mix(in oklab, var(--luz) 12%, transparent); color:var(--luz);
  display:grid; place-items:center; font:1.3rem/1 var(--texto-f);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--luz) 22%, transparent);
}
.vacio strong {
  display:block; color:#fff; font:600 1.1rem/1.3 var(--display); letter-spacing:-.02em;
  margin-bottom:.4rem;
}

.fichero {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));
  gap:.7rem; padding:0; margin:0; list-style:none;
}
.fichero a {
  display:block; text-decoration:none; background:var(--sup); border:1px solid var(--borde);
  border-radius:var(--radio); padding:.9rem 1.1rem; box-shadow:var(--brillo);
  transition:background .16s ease, border-color .16s ease;
}
.fichero a:hover, .fichero a:focus-visible {
  background:var(--sup-alta); border-color:var(--borde-claro);
}
.fichero .cuantos {
  display:block; font:600 1.6rem/1.1 var(--dato); font-variant-numeric:tabular-nums;
  color:#fff; letter-spacing:-.03em;
}
.fichero .que { font-size:.87rem; color:var(--texto-2); }

.tabla { width:100%; border-collapse:separate; border-spacing:0 .4rem; }
.tabla th {
  text-align:left; font:.75rem/1 var(--rotulo); letter-spacing:.15em;
  text-transform:uppercase; color:var(--texto-3); font-weight:400; padding:0 .9rem .5rem;
}
.tabla td {
  background:var(--sup); padding:.8rem .9rem; border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde); color:var(--texto-2);
}
.tabla tr:hover td { background:var(--sup-alta); }
.tabla td:first-child {
  border-left:1px solid var(--borde); border-radius:var(--radio) 0 0 var(--radio);
  box-shadow:var(--brillo); color:var(--texto);
}
.tabla td:last-child {
  border-right:1px solid var(--borde); border-radius:0 var(--radio) var(--radio) 0;
}
.tabla tr.vivo td:first-child { border-left:2px solid var(--vivo); }
.tabla tr.curso td:first-child { border-left:2px solid var(--luz); }
.tabla td:first-child, .tabla .num {
  font:.83rem/1.4 var(--dato); font-variant-numeric:tabular-nums;
}
.filtros {
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; margin:0 0 1.4rem;
  background:var(--sup); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1rem 1.1rem; box-shadow:var(--brillo);
}
.filtros label {
  display:flex; flex-direction:column; gap:.4rem; font:.75rem/1 var(--rotulo);
  letter-spacing:.14em; text-transform:uppercase; color:var(--texto-2);
}
input, select {
  font:14px/1.3 var(--texto-f); padding:.45rem .6rem; background:#000; color:var(--texto);
  border:1px solid var(--borde); border-radius:7px;
}
input:hover { border-color:var(--borde-claro); }
input:focus { outline:none; border-color:var(--luz); }

/* Boton primario blanco sobre negro: es lo que se lee al instante en un oscuro. */
button {
  font:500 .85rem/1 var(--texto-f); padding:.55rem 1rem; border:1px solid transparent;
  border-radius:7px; background:#fff; color:#08090a; cursor:pointer;
  transition:opacity .14s ease, transform .1s ease;
}
button:hover { opacity:.86; }
button:active { transform:translateY(1px); }
button.secundario {
  background:rgba(255,255,255,.06); color:var(--texto); border-color:var(--borde);
  box-shadow:var(--brillo);
}
button.secundario:hover { background:rgba(255,255,255,.1); opacity:1; }
:focus-visible { outline:2px solid var(--luz); outline-offset:2px; }

.detalle { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:1rem; }
.plato {
  background:var(--sup); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.3rem 1.4rem; box-shadow:var(--brillo);
}
.plato + .plato { margin-top:.85rem; }
.plato h3 {
  font:.75rem/1 var(--rotulo); letter-spacing:.17em; text-transform:uppercase;
  color:var(--texto-3); margin:0 0 1.2rem; font-weight:400;
}
.plato dl { display:grid; grid-template-columns:10.5rem 1fr; gap:.55rem 1.2rem; margin:0; }
.plato dt { font-size:.88rem; color:var(--texto-2); }
.plato dd { margin:0; color:var(--texto); font-size:.96rem; }
.plato dd.num { font:.85rem/1.4 var(--dato); font-variant-numeric:tabular-nums; }
.cita {
  margin:0; padding:.9rem 1.1rem; background:#000; border:1px solid var(--borde);
  border-radius:8px; font-size:.92rem; color:var(--texto); line-height:1.65;
}
.nota { font-size:.85rem; color:var(--texto-2); margin:1.2rem 0 0; }

/* La via: puntos conectados, el actual encendido. */
.via { list-style:none; padding:0; margin:0 0 1.3rem; display:flex; flex-direction:column; }
.via li {
  display:flex; align-items:center; gap:.7rem; padding:.35rem 0; position:relative;
  font:.79rem/1 var(--rotulo); letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-3);
}
.via li .bola {
  width:.7rem; height:.7rem; border-radius:50%; border:1px solid var(--borde-claro);
  background:var(--fondo); flex:none;
}
.via li:not(:last-child)::before {
  content:""; position:absolute; left:.33rem; top:1.35rem; width:1px; height:.85rem;
  background:var(--borde-claro);
}
.via li.actual { color:#fff; }
.via li.actual .bola {
  background:var(--luz); border-color:var(--luz);
  box-shadow:0 0 10px color-mix(in oklab, var(--luz) 70%, transparent);
}
.via li.actual.vivo .bola {
  background:var(--vivo); border-color:var(--vivo);
  box-shadow:0 0 10px color-mix(in oklab, var(--vivo) 70%, transparent);
}
.via li.alcanzable { color:var(--texto-2); }
.via li.alcanzable .bola { border-color:var(--texto-2); }
.acciones { display:flex; flex-direction:column; gap:.45rem; }
.acciones form { display:block; }
.acciones button { width:100%; }

.error {
  background:color-mix(in oklab, var(--alerta) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--alerta) 30%, transparent);
  border-radius:var(--radio); padding:.9rem 1.1rem; color:#ffb3b6;
}
.volver { display:inline-block; margin-top:1.6rem; font-size:.92rem; color:var(--texto-2); }
.volver:hover { color:var(--texto); }

body.entrada { grid-template-columns:1fr; place-items:center; }
body.entrada main { max-width:24rem; padding:2rem; }
body.entrada .plato { padding:1.8rem; }
body.entrada label { display:block; margin:0 0 1rem; font-size:.8rem; color:var(--texto-3); }
body.entrada input { width:100%; margin-top:.4rem; }
body.entrada button { width:100%; margin-top:.4rem; }
body.entrada h1 { font-size:1.9rem; }

@media (max-width:62rem) { .detalle { grid-template-columns:1fr; } }
@media (max-width:52rem) {
  body { grid-template-columns:1fr; }
  .rail {
    position:static; height:auto; flex-direction:row; align-items:center; gap:1rem;
    padding:.7rem 1rem; overflow-x:auto; border-right:0; border-bottom:1px solid var(--borde);
  }
  .rail nav { flex-direction:row; gap:.25rem; }
  .rail .grupo, .rail .pie .quien { display:none; }
  .rail .pie { margin:0 0 0 auto; border:0; padding:0; }
  main { padding:1.7rem 1.1rem 4rem; }
  .aviso { padding:.6rem 1.1rem; }
  h1 { font-size:2rem; }
}

/* Un solo momento de movimiento: la cola entra escalonada al cargar. */
@media (prefers-reduced-motion:no-preference) {
  .cola .ficha { animation:entrar .32s cubic-bezier(.2,.7,.3,1) backwards; }
  .cola .ficha:nth-child(1) { animation-delay:.02s; }
  .cola .ficha:nth-child(2) { animation-delay:.06s; }
  .cola .ficha:nth-child(3) { animation-delay:.1s; }
  .cola .ficha:nth-child(4) { animation-delay:.14s; }
  .cola .ficha:nth-child(5) { animation-delay:.18s; }
  .cola .ficha:nth-child(6) { animation-delay:.22s; }
  .cola .ficha:nth-child(7) { animation-delay:.26s; }
  .cola .ficha:nth-child(8) { animation-delay:.3s; }
}
@keyframes entrar {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}
/* --- Administracion ------------------------------------------------------ */
/* Fuera de la pantalla de entrada, una `label` es inline por defecto, asi que
   un formulario escrito como `<label>Nombre<input></label>` sale todo en una
   fila y apelotonado. Se vio mirando la pantalla, con las pruebas en verde. */
.formulario label {
  display:block; margin:0 0 1.15rem;
  font:.75rem/1 var(--rotulo); letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-2);
}
/* En bloque, no al lado: con la etiqueta a un lado en unos campos y encima en
   otros, el formulario parece dos formularios pegados. */
.formulario label input, .formulario label select {
  display:block; margin:.45rem 0 0; min-width:min(24rem, 100%);
}
.formulario label input[type="color"] { min-width:4rem; }
.formulario > button { margin-top:.4rem; }
.con-ojo { position:relative; display:block; }
.con-ojo input { padding-right:2.9rem; width:100%; }
.ojo {
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  width:2.1rem; height:2.1rem; padding:0; display:grid; place-items:center;
  background:transparent; border:0; color:var(--texto-3); cursor:pointer;
  border-radius:6px;
}
.ojo:hover { color:var(--texto); background:var(--sup-alta); }
.ojo:focus-visible { outline:2px solid var(--casa); outline-offset:1px; }
.hecho {
  border-radius:var(--radio); padding:.85rem 1.1rem; margin:0 0 1.2rem;
  border:1px solid color-mix(in oklab, var(--curso) 34%, transparent);
  background:color-mix(in oklab, var(--curso) 10%, var(--sup)); color:var(--texto-2);
}
.plato.peligro { border-color:color-mix(in oklab, var(--alerta) 34%, transparent); }
.plato.peligro h3 { color:var(--alerta); }
.fila { display:flex; gap:.4rem; align-items:center; margin:0; flex-wrap:wrap; }
/* El porque de un boton apagado, al lado del boton y no en un aviso lejos. */
.porque { font-size:.78rem; line-height:1.4; color:var(--texto-3); flex-basis:100%;
          max-width:22rem; }
.fila label { margin:0; flex:1; }
.fila select, .fila input { margin:0; }
input[type=color].color { height:2.6rem; padding:.2rem; cursor:pointer; }
input[type=file] {
  width:100%; background:var(--fondo); color:var(--texto-2);
  border:1px solid var(--borde); border-radius:8px; padding:.55rem .7rem;
  margin:0 0 1rem; font:14px/1.4 var(--texto-f);
}