/* ==========================================================================
   Arard: estilo de herramienta, de la familia de Brael. Fácil de leer, en el
   ordenador (preparar) y en el móvil (la mesa). El color dice qué es cada cosa:
   la sección en la que estás y qué hace cada botón.
   ========================================================================== */

:root {
  --letra: 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Roboto Mono', monospace;

  --fondo: #ffffff;
  --tinta: #000000;
  --tenue: #595959;       /* 7:1 sobre blanco */
  --suave: #f4f4f4;
  --linea: #c9c9c9;
  --agua: #0b5cad;

  /* Las secciones: una por grupo del menú, en su orden */
  --sec-1: #166534;  --sec-2: #9a3412;  --sec-3: #6b21a8;  --sec-4: #1e40af;
  --sec-5: #0f766e;  --sec-6: #a21caf;  --sec-7: #a65e00;  --sec-8: #be123c;
  --sec-9: #4338ca;  --sec-10: #3f6212; --sec-11: #0369a1; --sec-12: #78350f;
  --sec-fuera: #374151;

  /* Lo que hace cada botón. Los sólidos, con letra blanca; los demás, con su tinta. */
  --crear: #15803d;
  --guardar: #1d4ed8;
  --borrar: #b91c1c;
  --ver-fondo: #dbeafe;    --ver-tinta: #1e40af;    --ver-borde: #93c5fd;
  --lugar-fondo: #ccfbf1;  --lugar-tinta: #115e59;  --lugar-borde: #5eead4;
  --fuera-fondo: #ede9fe;  --fuera-tinta: #5b21b6;  --fuera-borde: #c4b5fd;
  --volver-fondo: #f1f1f1; --volver-tinta: #333333; --volver-borde: #bdbdbd;

  --toque: 2.75rem;       /* 44 px: lo mínimo que se toca en el móvil */
  --alto-boton: 1.75rem;
  --radio: 4px;

  /* Los nombres de antes, para lo propio de cada app */
  --color-bg: var(--fondo);
  --color-text: var(--tinta);
  --color-muted: var(--tenue);
  --color-border: var(--linea);
  --color-light-bg: var(--suave);
  --color-table-bg: var(--suave);
  --color-table-head: var(--suave);
  --font-sans: var(--letra);
  --font-serif: var(--letra);
  --font-mono: var(--mono);
}

.sec-1 { --sec: var(--sec-1); }   .sec-2 { --sec: var(--sec-2); }
.sec-3 { --sec: var(--sec-3); }   .sec-4 { --sec: var(--sec-4); }
.sec-5 { --sec: var(--sec-5); }   .sec-6 { --sec: var(--sec-6); }
.sec-7 { --sec: var(--sec-7); }   .sec-8 { --sec: var(--sec-8); }
.sec-9 { --sec: var(--sec-9); }   .sec-10 { --sec: var(--sec-10); }
.sec-11 { --sec: var(--sec-11); } .sec-12 { --sec: var(--sec-12); }
.sec-fuera { --sec: var(--sec-fuera); }

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` manda siempre: un display de botón no debe volver a enseñarlo. */
[hidden] { display: none !important; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Sin peso: lo que diga cualquier clase, o el botón por defecto de abajo, manda. */
:where(a) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
:where(a):hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; margin: 1.5em 0 0.5em; }
h1 { font-size: 1.75rem; margin-top: 0; }
h2 { font-size: 1.3rem; color: var(--sec); }
h3 { font-size: 1.1rem; }
h4, h5, h6 { font-size: 1rem; }
h1 a, h2 a, h3 a { text-decoration: none; }
/* El título de la página es su primer h2: el h1 es el nombre de la herramienta. */
main > h2:first-of-type { font-size: 1.6rem; color: var(--tinta); margin-top: 0.5rem; padding-bottom: 0.3rem; border-bottom: 3px solid var(--sec); }
.titulo-icono { display: flex; align-items: center; gap: 0.6rem; }
.icono-hex { width: 2.75rem; height: auto; flex: none; }
.icono-hex.chico { width: 2rem; }

p { margin: 0 0 0.9em; }
main p, main li { max-width: 75ch; }
ul, ol { margin: 0 0 0.9em; padding-left: 1.25rem; }
li { margin-bottom: 0.3em; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 1.5em 0; }
img { max-width: 100%; height: auto; }
.simbolo { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor;
           stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

code, pre, kbd { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--suave); padding: 0.1em 0.3em; border-radius: var(--radio); }
pre { background: var(--suave); padding: 0.75rem; overflow-x: auto; border-radius: var(--radio); }
pre code { background: none; padding: 0; }
blockquote { margin: 0.75rem 0; padding: 0.25rem 0 0.25rem 0.9rem; border-left: 3px solid var(--sec); }

.pista, .tenue { color: var(--tenue); font-size: 0.92rem; }
.sep { color: var(--tenue); }
.nota-ayuda em { font-style: normal; }
.sin-ayuda .nota-ayuda { display: none; }

/* --- Tablas -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.25rem; font-size: 0.95rem; }
th, td { padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
th { font-weight: 700; }
tr:first-child:not(:has(td)) th, thead th { border-bottom: 2px solid var(--sec); background: var(--suave); }
td:first-child code { white-space: nowrap; }

/* --- Armazón ------------------------------------------------------------- */
.envoltorio { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }

.cabecera-sitio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--sec);
}
.cabecera-sitio h1 { margin: 0; font-size: 1.35rem; }
.marca { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--toque); text-decoration: none; }
.marca:hover { text-decoration: none; }
/* El detalle de cada herramienta, con el color de la sección. */
.marca-detalle { width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--sec); stroke-width: 2;
                 stroke-linecap: round; stroke-linejoin: round; }
.lema { margin: 0; color: var(--tenue); font-size: 0.95rem; }

.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 2.5rem;
  align-items: start;
}
.tablero > * { min-width: 0; }
.tablero--sin-menu { grid-template-columns: minmax(0, 32rem); justify-content: center; }

.pie-sitio {
  margin-top: 3rem;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--linea);
  color: var(--tenue);
  font-size: 0.875rem;
}
.pie-sitio p { margin: 0 0 0.2rem; }

/* --- Menú: bloques por grupo --------------------------------------------- */
.nav-lateral { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: 0.95rem; }
.nav-lateral > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--toque);
  padding: 0 0.75rem;
  font-weight: 700;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  cursor: pointer;
  list-style: none;
}
.nav-lateral > summary::-webkit-details-marker { display: none; }
/* En ancho va siempre abierto: el botón de plegar sobra. */
@media (min-width: 901px) { .nav-lateral > summary { display: none; } }

.nav-lateral .nav-inicio {
  display: flex;
  align-items: center;
  min-height: 2rem;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.65rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
}
.nav-bloque { border: 1px solid var(--sec); border-radius: var(--radio); margin-bottom: 0.75rem; overflow: hidden; }
.nav-grupo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.65rem;
  background: var(--sec);
  color: var(--fondo);
  font-weight: 700;
}
.nav-lateral ul { list-style: none; margin: 0; padding: 0; }
.nav-lateral li { margin: 0; max-width: none; }
.nav-lateral li + li { border-top: 1px solid var(--linea); }
.nav-lateral li a {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.65rem;
  text-decoration: none;
}
.nav-lateral li a:hover, .nav-lateral .nav-inicio:hover { background: var(--suave); text-decoration: underline; }
.nav-lateral a.activo { background: var(--suave); color: var(--sec); font-weight: 700; box-shadow: inset 4px 0 0 var(--sec); }

/* --- Botones ------------------------------------------------------------- */
/* Todo enlace es un botón pequeño, salvo los que van en medio de un texto: con
   :where no pesa nada, y así cualquier plantilla nueva sale bien sin hacer nada.
   El color dice qué hace; sin clase, abre una ficha. */
:where(main a:not(.parchment-note a, .habitacion p a, blockquote a, .comarca-hex)),
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-boton);
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0.1rem 0.55rem;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  background: var(--b-fondo, var(--ver-fondo));
  color: var(--b-tinta, var(--ver-tinta));
  border: 1px solid var(--b-borde, var(--ver-borde));
  border-radius: var(--radio);
  cursor: pointer;
}
:where(main a:not(.parchment-note a, .habitacion p a, blockquote a, .comarca-hex)):hover,
.boton:hover { text-decoration: none; filter: brightness(0.93); box-shadow: inset 0 0 0 1px currentColor; }

.b-crear { --b-fondo: var(--crear); --b-tinta: #ffffff; --b-borde: var(--crear); font-weight: 700; }
.b-lugar { --b-fondo: var(--lugar-fondo); --b-tinta: var(--lugar-tinta); --b-borde: var(--lugar-borde); }
.b-fuera, .enlace-api { --b-fondo: var(--fuera-fondo); --b-tinta: var(--fuera-tinta); --b-borde: var(--fuera-borde); }
.b-volver { --b-fondo: var(--volver-fondo); --b-tinta: var(--volver-tinta); --b-borde: var(--volver-borde); }

/* Los enlaces en medio de un texto se leen como enlaces. */
.parchment-note a, .habitacion p a, blockquote a { color: var(--ver-tinta); }

main h3 > a { font-size: 1.05rem; font-weight: 700; }
.generadores { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.6rem 0; }
.migas { margin-bottom: 0.5rem; }

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  background: var(--guardar);
  color: #ffffff;
  border: 1px solid var(--guardar);
  border-radius: var(--radio);
  cursor: pointer;
}
button:hover { filter: brightness(0.88); }

/* Lo que se despliega dentro de una página también se ve que se toca. */
main details > summary {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: var(--alto-boton);
  margin: 0.25rem 0;
  padding: 0.1rem 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--volver-fondo);
  color: var(--volver-tinta);
  border: 1px solid var(--volver-borde);
  border-radius: var(--radio);
  cursor: pointer;
}

/* --- Formularios --------------------------------------------------------- */
input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid #767676;
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  max-width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--tinta); }
.consulta { margin: 0 0 1.25rem; padding: 0.9rem 1rem; background: var(--suave); border-radius: var(--radio); }
.consulta .campos { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.consulta label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.consulta input[type="number"] { width: 7rem; }
.consulta .casilla { display: flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; }
.consulta .casilla label { margin: 0; font-weight: 400; }
.consulta > label { margin-bottom: 0.6rem; }
.consulta > label input:not([type="checkbox"]), .consulta > label select { display: block; width: 100%; margin-top: 0.2rem; }
.consulta > button { width: 100%; }
/* Bloque 32: las casillas que quitan tipos de cierre. */
.consulta .casillas-cierres { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.75rem 0 0; padding: 0.4rem 0.75rem 0.6rem; border: 1px solid var(--tinta); border-radius: var(--radio); }
.consulta .casillas-cierres legend { font-weight: 700; font-size: 0.95rem; padding: 0 0.3rem; }
.consulta .casillas-cierres label { display: flex; align-items: center; gap: 0.4rem; min-height: var(--toque); margin: 0; font-weight: 400; }
.esquema-cierres { overflow-x: auto; }
.esquema-cierres svg { max-width: none; }
/* La guía de colores (arard/colores.py): cada paso de la cadena y cada
   etiqueta de sala, en el color de su cierre. */
ol.cadena-cierres { padding-left: 0; list-style: none; counter-reset: paso; }
ol.cadena-cierres li { counter-increment: paso; margin: 0.35rem 0; padding: 0.3rem 0.6rem 0.3rem 2.4rem; position: relative; border-left: 4px solid var(--guia); background: var(--fondo); border-radius: var(--radio); }
ol.cadena-cierres li::before { content: counter(paso); position: absolute; left: 0.5rem; top: 0.3rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--guia); color: #fff; font-weight: 700; font-size: 0.85rem; line-height: 1.4rem; text-align: center; }
.chip-guia { display: inline-block; margin: 0.1rem 0.2rem 0.1rem 0; padding: 0 0.45rem; border: 1.5px solid var(--guia); border-radius: 999px; color: var(--guia); font-size: 0.8rem; font-weight: 700; line-height: 1.4rem; white-space: nowrap; }
h3 .chip-guia { vertical-align: middle; }
.plano-web a:hover text, .plano-web a:focus text { text-decoration: underline; }

/* --- Cajas --------------------------------------------------------------- */
.stat-block { margin: 0.9rem 0; padding: 0.75rem 0.9rem; border: 1px solid var(--linea); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.stat-block header { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; }
.stat-block .stat-line { margin: 0 0 0.2rem; display: flex; flex-wrap: wrap; column-gap: 1.1rem; }
.stat-block .stat-desc { margin: 0.4rem 0 0; }
.stat-block .stat-notes { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--linea); }
.stat-block .stat-notes > :last-child { margin-bottom: 0; }
.stat-block code { font-size: 0.95em; }

.parchment-note { margin: 0.75rem 0; padding: 0.6rem 0.8rem; background: var(--suave); border-radius: var(--radio); color: #333333; font-size: 0.95rem; }
.npc-box { margin: 0.75rem 0; padding: 0.75rem 0.9rem; border: 1px solid var(--linea); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.npc-title, .callout-title { font-weight: 700; margin-bottom: 0.25rem; }
.callout-box { margin: 0.75rem 0; padding: 0.75rem 0.9rem; background: var(--suave); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.danger-box { margin: 0.75rem 0; padding: 0.75rem 0.9rem; background: var(--borrar); color: var(--fondo); border-radius: var(--radio); }
.danger-box p { margin: 0 0 0.3rem; }
.danger-box p:last-child { margin-bottom: 0; }

.datos { margin: 0; }
.datos div { display: flex; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--linea); }
.datos div:last-child { border-bottom: 0; }
.datos dt { font-weight: 700; min-width: 9.5rem; }
.datos dd { margin: 0; min-width: 0; }

.semilla { margin-top: 1.25rem; padding-top: 0.6rem; border-top: 1px solid var(--linea); color: var(--tenue); font-size: 0.92rem; }
.semilla strong { font-family: var(--mono); color: var(--tinta); }
.semilla-arriba { margin: 0.5rem 0; padding-top: 0; border-top: 0; }

.copiar { margin: 1.25rem 0 0; }
.copiar .pista { margin: 0.5rem 0; }
.copiar textarea { display: block; width: 100%; font-family: var(--mono); font-size: 0.85rem; line-height: 1.4; resize: vertical; white-space: pre; }
.copiar p:last-child { margin: 0.5rem 0 0; }
.copiar:not([open]) > summary { margin-bottom: 0; }

/* --- Ancho de tableta y móvil: el menú, plegado, encima del contenido ------- */
@media (max-width: 900px) {
  .envoltorio { padding: 0 1rem; }
  .cabecera-sitio { padding: 0.4rem 0; margin-bottom: 0.75rem; }
  .tablero { display: flex; flex-direction: column-reverse; gap: 1rem; }
  .tablero > * { width: 100%; }
  .nav-lateral { position: static; max-height: none; overflow: visible; }
  .nav-lateral[open] > summary { margin-bottom: 0.75rem; }
  .nav-lateral nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 0.75rem; align-items: start; }
  .nav-lateral .nav-inicio { grid-column: 1 / -1; min-height: var(--toque); }
  .nav-lateral li a { min-height: var(--toque); }
}

/* --- Móvil: la mesa. Se lee a un brazo y todo se toca con el dedo --------- */
@media (max-width: 640px) {
  :root { --alto-boton: var(--toque); }
  body { font-size: 1.0625rem; }
  main > h2:first-of-type { font-size: 1.45rem; }
  .lema { display: none; }

  button { min-height: var(--toque); padding: 0.4rem 0.9rem; font-size: 1rem; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: var(--toque); font-size: 1.0625rem; }
  input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; }
  .consulta { padding: 0.75rem; }
  .consulta .campos { flex-direction: column; align-items: stretch; }
  .consulta .campos > div { width: 100%; }
  .consulta input[type="number"], .consulta select, .consulta input[type="text"] { width: 100%; }
  .consulta .casilla, .consulta label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 0.4rem; min-height: var(--toque); margin: 0; }
  .consulta .casilla label { flex: 1; display: flex; align-items: center; min-height: var(--toque); }
  .consulta .campos > div:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.4rem; }
  .consulta .campos > div:has(> input[type="checkbox"]) > label { flex: 1; display: flex; align-items: center; min-height: var(--toque); margin: 0; font-weight: 400; }
  /* Las tablas son lo que más se lee en la mesa: compactas, para no alargar la página. */
  table { font-size: 0.94rem; line-height: 1.32; }
  th, td { padding: 0.3rem 0.35rem; }
  main p, main li { line-height: 1.42; }
  .pie-sitio a { display: inline-flex; align-items: center; min-height: var(--toque); }

  .datos div { flex-direction: column; gap: 0; }
  .datos dt { min-width: 0; }
  .stat-block .stat-line { flex-direction: column; }

  /* La tabla ancha pasa a fichas: una caja por fila, cada dato con su rótulo.
     La clase y los rótulos los pone el script de base.html. */
  table.fichas, table.fichas tbody, table.fichas tr, table.fichas td { display: block; width: 100%; }
  table.fichas thead, table.fichas tr.cabeza { display: none; }
  table.fichas tr { margin-bottom: 0.6rem; padding: 0.4rem 0.75rem; border: 1px solid var(--linea); border-radius: var(--radio); }
  table.fichas td { padding: 0.15rem 0; border: 0; }
  table.fichas td[data-rotulo] { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: 0.5rem; }
  table.fichas td[data-rotulo]::before { content: attr(data-rotulo); font-family: var(--letra); font-weight: 700; font-size: 0.875rem; color: var(--tenue); }
  table.fichas td.sin-dato { display: none; }
}

@media print {
  .nav-lateral, .pie-sitio { display: none; }
  .tablero { display: block; }
}

/* ==========================================================================
   Arard: lo suyo
   ========================================================================== */

/* En una mazmorra de veinte salas, sin corte visual se pierde dónde acaba una. */
.habitacion { margin-top: 1.5rem; padding-top: 1rem; border-top: 3px solid var(--sec); }
.habitacion h3 { margin-top: 0; font-size: 1.25rem; color: var(--sec); }
.habitacion h4 { margin: 1rem 0 0.4rem; font-size: 1rem; }
.habitacion.recorriendo { margin-top: 0; padding-top: 0; border-top: 0; }

.callout-box.atrezzo { margin: 0.6rem 0; }
.callout-box.atrezzo .huella { float: right; margin-left: 0.5rem; color: var(--tenue); font-size: 0.875rem; font-weight: 400; }
.tirada-cab { margin: 0.4rem 0 0.25rem; }
.tirada-lista { margin: 0 0 0.4rem; padding-left: 1.25rem; }
/* Los avisos pendientes son deuda del mazo, no contenido de juego. */
.pendiente { margin: 0.4rem 0 0; padding-left: 0.5rem; border-left: 3px solid #f59e0b; font-size: 0.92rem; }
.casillas-uso { font-family: var(--mono); letter-spacing: 1px; }
.tabla-botin td { vertical-align: top; }

/* El plano que da arard: se adapta al ancho. */
.plano-web, .plano-web svg { display: block; max-width: 100%; height: auto; }

/* Recorriendo la Mazmorra: una habitación por pantalla. */
.recorrido { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0; padding: 0.5rem 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.recorrido .cuenta { font-family: var(--mono); font-size: 1.1rem; }
/* El extremo se marca en gris, no se esconde: los otros dos no se mueven de sitio. */
.recorrido .paso.inactivo { display: inline-flex; align-items: center; min-height: var(--alto-boton); padding: 0.1rem 0.55rem; font-size: 0.9rem; color: var(--tenue); background: var(--suave); border: 1px solid var(--linea); border-radius: var(--radio); cursor: default; }

/* --- El reloj de mazmorra. Todo el estado lo lleva el navegador. ------------ */
.reloj-turnos { margin: 1rem 0; padding: 0.9rem; text-align: center; background: var(--suave); border-left: 4px solid var(--sec); border-radius: var(--radio); }
.reloj-cara { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4rem 1.1rem; }
.reloj-dia { font-weight: 700; font-size: 1.1rem; }
.reloj-hora { font-family: var(--mono); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.reloj-turno { font-family: var(--mono); color: var(--tenue); }
.reloj-inicio { margin: 0.6rem 0 0; color: var(--tenue); }
.reloj-inicio label { font-weight: 700; }
.reloj-inicio input { width: 6rem; margin-left: 0.25rem; font-family: var(--mono); }
.reloj-inicio input:disabled { color: var(--tenue); background: var(--suave); }

.tt-avisos:empty { display: none; }
.tt-avisos { margin: 0.75rem 0; }
.tt-botonera { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin: 0.75rem 0; }
.tt-botonera button.secundario, button.tt-mini { background: var(--volver-fondo); color: var(--volver-tinta); border-color: var(--volver-borde); font-weight: 400; }
/* Lo que más se pulsa: grande y lleno, blanco fácil con una mano en la mesa. */
.tt-botonera.principal { gap: 0.6rem; margin: 0.9rem 0; }
.tt-botonera.principal button { flex: 1 1 auto; min-height: 3.25rem; font-size: 1rem; }
.tt-botonera.principal #tt-avanzar { flex-grow: 2; }
.tt-cuentas { margin: 0.75rem 0 1.1rem; }
.tt-cuentas dd { font-family: var(--mono); }
.tt-lista { margin: 0.5rem 0 1.1rem; padding: 0; list-style: none; border: 1px solid var(--linea); border-radius: var(--radio); }
.tt-item { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--linea); }
.tt-lista .tt-item:last-child { border-bottom: 0; }
.tt-item-nombre { flex: 1; font-weight: 700; }
.tt-item-estado { font-family: var(--mono); font-size: 0.875rem; color: var(--tenue); white-space: nowrap; }
.tt-item.tt-al-limite .tt-item-estado { color: var(--borrar); font-weight: 700; }
.tt-item.tt-agotado { background: var(--suave); }
.tt-item.tt-agotado .tt-item-nombre, .tt-item.tt-agotado .tt-item-estado { font-weight: 400; font-style: italic; text-decoration: line-through; color: var(--tenue); }
.tt-item.tt-vacio, .tt-log .tt-vacio { color: var(--tenue); font-style: italic; }
button.tt-mini { min-height: 1.75rem; padding: 0.1rem 0.5rem; font-size: 0.875rem; }
.tt-registro { margin: 0.5rem 0 0; }
.tt-log { margin: 0.6rem 0 0; padding: 0; max-height: 20rem; overflow-y: auto; list-style: none; border: 1px solid var(--linea); border-radius: var(--radio); font-size: 0.92rem; }
.tt-log li { display: flex; gap: 0.6rem; margin: 0; padding: 0.25rem 0.6rem; border-bottom: 1px solid var(--linea); }
.tt-log li:last-child { border-bottom: 0; }
.tt-log .tt-log-hora { min-width: 9.5rem; font-family: var(--mono); font-size: 0.875rem; color: var(--tenue); white-space: nowrap; }
.tt-reset { margin-top: 1.25rem; }

@media (max-width: 640px) {
  .reloj-hora { font-size: 2rem; }
  .tt-botonera button { flex: 1 1 100%; }
  button.tt-mini { min-height: var(--toque); }
  .tt-log li { flex-direction: column; gap: 0; }
  .tt-log .tt-log-hora { min-width: 0; }
}