/* Palma Eat en 8 bits: paleta de consola clásica, bordes de píxel con esquinas recortadas,
   cero redondeos. Compartido por index.html (ocupación) y precios.html. */
:root {
  color-scheme: light;
  --page: #f8f0d8;
  --surface: #fffcf0;
  --ink: #1c1838;
  --ink-2: #4c4878;
  --muted: #7c78a0;
  --grid: #e8dcc0;
  --axis: #c8b898;
  --borde: #1c1838;
  --habitual: #0078f8;
  --directo: #d82800;
  --acento: #e45c10;
  --amarillo: #f8b800;
  --cielo: linear-gradient(180deg,
    #3c1c78 0 18%, #6844a8 18% 34%, #a85cb8 34% 50%, #e47c98 50% 66%, #f8a868 66% 82%, #fcd080 82% 100%);
  --silueta: #1c1838;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0c0c20;
    --surface: #181838;
    --ink: #fcfcfc;
    --ink-2: #bcbcdc;
    --muted: #8484ac;
    --grid: #2c2c54;
    --axis: #44447c;
    --borde: #5c5ca8;
    --habitual: #3cbcfc;
    --directo: #f878f8;
    --acento: #fca044;
    --amarillo: #f8b800;
    --cielo: linear-gradient(180deg,
      #0c0c20 0 18%, #201848 18% 34%, #44207c 34% 50%, #8c2c8c 50% 66%, #d84c6c 66% 82%, #f8885c 82% 100%);
    --silueta: #0c0c20;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0c0c20;
  --surface: #181838;
  --ink: #fcfcfc;
  --ink-2: #bcbcdc;
  --muted: #8484ac;
  --grid: #2c2c54;
  --axis: #44447c;
  --borde: #5c5ca8;
  --habitual: #3cbcfc;
  --directo: #f878f8;
  --acento: #fca044;
  --amarillo: #f8b800;
  --cielo: linear-gradient(180deg,
    #0c0c20 0 18%, #201848 18% 34%, #44207c 34% 50%, #8c2c8c 50% 66%, #d84c6c 66% 82%, #f8885c 82% 100%);
  --silueta: #0c0c20;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 18px/1.35 "Pixelify Sans", ui-monospace, monospace;
  -webkit-font-smoothing: none;
}
main { max-width: 1120px; margin: 0 auto; padding: 0 16px 64px; }

/* Borde de píxel de 4px con las esquinas recortadas, como las ventanas de los juegos de 8 bits */
.panel, .chip, select, #tooltip, nav.pestanas a {
  border: 0;
  box-shadow: -4px 0 0 0 var(--borde), 4px 0 0 0 var(--borde), 0 -4px 0 0 var(--borde), 0 4px 0 0 var(--borde);
}

/* Cabecera: cielo a franjas, sol y palmeras de píxeles, suelo a cuadros */
.cabecera {
  position: relative; overflow: hidden; text-align: center;
  background: var(--cielo); padding: 40px 16px 0; min-height: 300px;
}
.cabecera::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: repeating-linear-gradient(90deg, var(--silueta) 0 16px, #2c2c54 16px 32px);
}
.sol { position: absolute; left: 50%; bottom: 16px; width: 176px; height: 176px; margin-left: -88px; }
.palmera { position: absolute; bottom: 16px; width: 112px; height: 168px; fill: var(--silueta); pointer-events: none; }
.palmera.izq { left: max(0px, calc(50% - 560px)); }
.palmera.der { right: max(0px, calc(50% - 560px)); transform: scaleX(-1); width: 88px; height: 132px; }
.cabecera > *:not(.palmera):not(.sol) { position: relative; }
h1 {
  font: 400 clamp(30px, 7vw, 64px)/1.1 "Press Start 2P", ui-monospace, monospace;
  margin: 0; color: var(--amarillo); letter-spacing: 0.02em;
  text-shadow: 4px 4px 0 #d82800, 8px 8px 0 #1c1838;
}
.sub {
  display: inline-block; margin: 18px 0 0; padding: 4px 10px; color: #fcfcfc; background: rgba(12, 12, 32, 0.55);
  font: 16px/1.3 "Pixelify Sans", monospace;
}
nav.pestanas { display: flex; justify-content: center; gap: 16px; margin: 20px 0 210px; }
nav.pestanas a {
  /* Press Start 2P no tiene tildes: para textos con acentos, Pixelify Sans */
  font: 600 18px/1 "Pixelify Sans", monospace; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink); background: var(--surface); text-decoration: none; padding: 8px 14px;
}
nav.pestanas a:hover { background: var(--grid); }
nav.pestanas a[aria-current="page"] { background: var(--amarillo); color: #1c1838; --borde: #1c1838; }
nav.pestanas a[aria-current="page"]::before { content: "▶ "; }

h2 {
  font: 600 26px/1.2 "Pixelify Sans", monospace; text-transform: uppercase; letter-spacing: 0.04em;
  margin: 48px 0 20px; display: flex; align-items: center; gap: 16px;
}
h2::after {
  content: ""; flex: 1; height: 4px;
  background: repeating-linear-gradient(90deg, var(--acento) 0 8px, transparent 8px 16px);
}

.controles {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: center;
  margin-top: 32px;
}
.controles label { color: var(--ink-2); display: flex; gap: 12px; align-items: center; }
select {
  font: 18px "Pixelify Sans", monospace; color: var(--ink); background: var(--surface);
  border-radius: 0; padding: 4px 8px;
}
.leyenda { display: flex; gap: 16px; color: var(--ink-2); font-size: 16px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.key-barra { width: 10px; height: 14px; background: var(--habitual); }
.key-punto { width: 10px; height: 10px; background: var(--directo); }

.panel { background: var(--surface); margin: 4px; }

/* Ranking "ahora mismo" */
.ranking { padding: 8px 16px; }
.fila {
  display: grid; grid-template-columns: minmax(0, 1fr) 160px 64px 96px;
  gap: 12px; align-items: center; padding: 10px 0; border-bottom: 2px dashed var(--grid);
}
.fila:last-child { border-bottom: 0; }
.fila .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Medidor como barra de vida: segmentos de píxel */
.medidor { position: relative; height: 12px; background: var(--grid); }
.medidor .relleno {
  position: absolute; inset: 0 auto 0 0; background: var(--directo);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
          mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
}
.medidor .marca {
  position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px;
  background: var(--habitual); box-shadow: 0 0 0 2px var(--surface);
}
.fila .pct { font: 14px "Press Start 2P", monospace; text-align: right; }
.fila .delta { color: var(--ink-2); text-align: right; font-size: 16px; }
.vacio { color: var(--ink-2); padding: 12px 0; margin: 0; }

/* Tarjetas */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.tarjeta { padding: 16px; min-width: 0; }
.tarjeta h3 { font: 600 20px/1.2 "Pixelify Sans", monospace; margin: 0; }
.estado { color: var(--ink-2); font-size: 16px; margin: 4px 0 10px; min-height: 22px; }
.estado strong { color: var(--ink); }
svg { display: block; width: 100%; height: auto; overflow: visible; }
svg text { fill: var(--muted); font: 11px "Pixelify Sans", monospace; }
.barra { fill: var(--habitual); pointer-events: none; shape-rendering: crispEdges; }
.hit { fill: transparent; cursor: default; outline: none; }
.hit:hover + .barra, .hit:focus + .barra { fill: var(--amarillo); }
/* Punto cuadrado con anillo de 2px del color de la superficie */
.punto {
  fill: var(--directo); stroke: var(--surface); stroke-width: 4; paint-order: stroke; pointer-events: none;
  shape-rendering: crispEdges;
}
details { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
summary { cursor: pointer; }
table { border-collapse: collapse; width: 100%; margin-top: 6px; font-size: 16px; }
th, td { text-align: right; padding: 2px 6px; border-bottom: 2px dashed var(--grid); }
th:first-child, td:first-child { text-align: left; }

.sin-datos { color: var(--ink-2); font-size: 17px; }

/* Filtro por tipo de cocina */
.tipos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px; }
.chip {
  font: 16px/1 "Pixelify Sans", monospace; color: var(--ink-2); background: var(--surface);
  border-radius: 0; padding: 6px 10px; cursor: pointer;
}
.chip:hover { color: var(--ink); background: var(--grid); }
.chip[aria-pressed="true"] { color: #1c1838; background: var(--amarillo); --borde: #1c1838; }
.chip .n { opacity: 0.7; margin-left: 4px; }
.tarjeta .tipo, .etiqueta {
  font: 15px "Pixelify Sans", monospace; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--acento); margin: 4px 0 0;
}

#tooltip {
  position: fixed; pointer-events: none; z-index: 10; display: none;
  background: var(--surface); color: var(--ink); padding: 8px 10px; font-size: 16px;
}
#tooltip .t-hora { color: var(--ink-2); margin-bottom: 4px; }
#tooltip .t-fila { display: flex; align-items: center; gap: 8px; }
#tooltip .t-fila i { width: 12px; height: 4px; display: inline-block; }
#tooltip .t-fila b { min-width: 40px; }

@media (max-width: 560px) {
  .cabecera { min-height: 240px; padding-top: 28px; }
  h1 { text-shadow: 3px 3px 0 #d82800, 6px 6px 0 #1c1838; }
  nav.pestanas { margin-bottom: 150px; }
  .sol { width: 128px; height: 128px; margin-left: -64px; }
  .palmera { width: 64px; height: 96px; }
  .palmera.der { width: 48px; height: 72px; }
  .fila { grid-template-columns: minmax(0, 1fr) 56px 84px; }
  .fila .medidor { display: none; }
}