/* Línea «Centralita» (versión B): grises de la pestaña Code de Claude, un color
   vivo por origen, cuadros teñidos enteros a claridad fija en OKLCH y el cian
   solo para lo elegido y «Encargar a Claude». Ver ~/.claude/estilos-usados.md. */
:root {
  --fondo: #111111;
  --placa: #222222;
  --filo: #333333;
  --texto: #f2f2f2;
  --tenue: #a8a8a8;
  --acento: #29b6f6;
  --acento-texto: #06222f;
  --error: #ff6b6b;
  --f: "Onest", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f);
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* Cuadro teñido con el color de su origen (--c) */
.caja { background: oklch(from var(--c, #888) 0.38 calc(c * 0.8) h); border-radius: 8px; --tenue: #d6d6d6; }
.caja.elegido { background: oklch(from var(--c, #888) 0.44 calc(c * 0.85) h); outline: 3px solid var(--acento); outline-offset: -3px; }
.caja.leido { background: oklch(from var(--c, #888) 0.29 calc(c * 0.55) h); }

.lampara { width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--c); display: inline-block; }
.lampara.apagada { background: none; box-shadow: inset 0 0 0 2px var(--c); }
@keyframes destello { 0%, 40%, 80% { opacity: 1 } 20%, 60% { opacity: .15 } }
.destella { animation: destello 1.4s ease-in-out 2; }
@keyframes entra { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.entra { animation: entra .35s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .destella, .entra { animation: none; } }

.etiqueta {
  font-size: 16px; font-weight: 600; padding: 3px 11px; border-radius: 14px; white-space: nowrap;
  border: 1px solid var(--tenue); color: var(--tenue);
}
.etiqueta.nueva { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.etiqueta.fuerte { border-color: var(--texto); color: var(--texto); }

kbd {
  font-family: var(--f); font-size: 14px; font-weight: 600;
  border: 1px solid currentColor; border-bottom-width: 3px; border-radius: 4px; padding: 0 6px;
}
.boton {
  font-weight: 600; font-size: 17px; padding: 13px 20px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--filo); background: var(--placa); color: var(--texto); text-decoration: none; display: inline-block;
}
.boton:hover { border-color: var(--tenue); }
.boton.principal { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); font-weight: 700; }
.boton:disabled { opacity: .5; cursor: default; }