/* Issue #1836 — torneos presenciales: el formulario de la config. */

.pc-grupo { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; min-width: 0; }
.pc-grupo legend { padding: 0 6px; font-weight: 600; }
.pc-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 12px; }
.pc-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.pc-campo input, .pc-campo select { width: 130px; }
.pc-tilde { display: flex; align-items: center; gap: 6px; }
.pc-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.pc-mal { color: var(--red); margin: 4px 0; }

.pc-niveles { width: 100%; border-collapse: collapse; font-size: 13px; }
.pc-niveles th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 4px; }
.pc-niveles td { padding: 2px 4px; }
.pc-niveles input { width: 100%; min-width: 48px; }
.pc-niveles tr.pc-abierta td:first-child { color: var(--oro); font-weight: 600; }
.pc-niveles tr.pc-break td { background: rgba(255, 166, 0, .08); }

.pc-premio, .pc-ficha { display: flex; align-items: center; gap: 6px; width: 100%; }
.pc-premio span { width: 28px; }
.pc-premio input, .pc-ficha input { width: 90px; }
/* #1864: el selector % / $ fijo de los premios, en el formulario y en el control. */
.pc-modo { display: inline-flex; width: 100%; gap: 0; margin: 0 0 4px; }
.pc-modo button { flex: 1; border-radius: 0; }
.pc-modo button:first-child { border-radius: 8px 0 0 8px; }
.pc-modo button:last-child { border-radius: 0 8px 8px 0; }
.pc-modo button[aria-pressed="true"] { background: rgba(212, 175, 55, .16); border-color: var(--oro); color: var(--oro); }

/* Las fichas: un disco de color con borde punteado, como una ficha de verdad
   vista de arriba. Las usan el formulario y el reloj. */
.ficha { display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, .7); box-sizing: border-box; flex: none; }
.ficha-blanco { background: #e8e8e8; border-color: #888; }
.ficha-rojo { background: #c62828; }
.ficha-azul { background: #1e5bd8; }
.ficha-verde { background: #2e7d32; }
.ficha-rosa { background: #d63384; }
.ficha-negro { background: #222; border-color: #aaa; }
.ficha-violeta { background: #7b3fbf; }
.ficha-amarillo { background: #e3c300; border-color: #6b5a00; }
.ficha-naranja { background: #e8730c; }

/* --- Issue #1837: el control (teléfono) --- */

.ct-reloj { text-align: center; padding: 8px 0; }
.ct-nivel { color: var(--muted); font-size: 13px; }
.ct-tiempo { font-size: 56px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ct-ciegas { font-size: 18px; }
.ct-mandos { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 8px; margin: 8px 0; }
.ct-mandos button { min-height: 52px; font-size: 18px; }
.ct-slider { width: 100%; margin: 4px 0 12px; }
.ct-busca input { width: 100%; min-height: 44px; font-size: 16px; }
.ct-opciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.ct-opciones button, .prow2 .give button { min-height: 40px; }
.ct-caido { opacity: .55; }
.ct-baja { border-color: var(--red); color: var(--red); }
.ct-resultado { border: 1px solid var(--oro); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.ct-resultado p { display: flex; justify-content: space-between; margin: 4px 0; }

/* Issue #1852 — el control en la compu: tres columnas, botones de su tamaño. */
.ct-head { align-items: center; }
.ct-col { min-width: 0; }
.ct-prox { font-size: 13px; margin-top: 4px; }
.ct-minutos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ct-atajos { display: none; }
.ct-caja { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  background: rgba(255, 255, 255, .02); }
.ct-caja h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; }
.ct-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ct-datos div { display: flex; flex-direction: column; }
.ct-datos b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ct-premio { display: grid; grid-template-columns: 28px 64px 14px 1fr; align-items: center; gap: 4px; margin: 4px 0; }
.ct-premio.fijo { grid-template-columns: 28px 14px 1fr; }
.ct-premio input { width: 100%; }
.ct-premio b { text-align: right; font-variant-numeric: tabular-nums; }
.ct-caja .pc-campo { margin-top: 6px; }
.ct-caja .pc-campo input { width: 100%; }
@media (min-width: 1000px) {
  .ct { display: grid; grid-template-columns: 320px minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  .ct-col:first-child { position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; background: radial-gradient(ellipse at 50% 0%, rgba(var(--oro-rgb), .10), transparent 70%); }
  .ct-tiempo { font-size: 72px; }
  .ct-mandos button { min-height: 44px; }
  .ct-atajos { display: block; font-size: 12px; }
}

/* --- Issue #1837: el reloj (tele) --- */

body.en-reloj #topbar { display: none; }
#relojView { position: fixed; inset: 0; z-index: 50; background: #07090d; color: #f2f2f2; overflow: hidden; }
.rl-cargando { display: grid; place-items: center; height: 100%; font-size: 3vh; color: var(--muted); }
.rl { height: 100%; display: grid; gap: 1.5vh 2vw; padding: 2vh 2vw; box-sizing: border-box;
  grid-template-columns: 1fr 2.4fr 1fr; grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top top" "izq centro der" "fichas fichas fichas"; }
.rl-top { grid-area: top; display: flex; justify-content: space-between; align-items: baseline; }
.rl-top h1 { margin: 0; font-size: 4.5vh; color: var(--oro); }
.rl-top span { font-size: 3.5vh; color: var(--muted); font-variant-numeric: tabular-nums; }
.rl-izq, .rl-der { display: flex; flex-direction: column; gap: 1.6vh; }
.rl-izq { grid-area: izq; }
.rl-der { grid-area: der; text-align: right; }
.rl h3 { margin: 0; font-size: 2.2vh; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.rl-der b { font-size: 4.2vh; font-variant-numeric: tabular-nums; }
.rl-premios { list-style: none; margin: 0; padding: 0; font-size: 3.4vh; }
.rl-premios li { display: flex; justify-content: space-between; border-bottom: 1px dotted #333; padding: .6vh 0; }
.rl-centro { grid-area: centro; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rl-nivel { font-size: 5vh; text-transform: uppercase; letter-spacing: .1em; color: var(--oro); }
.rl-tiempo { font-size: 26vh; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rl-ciegas { font-size: 11vh; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.rl-ciegas small { display: block; font-size: 4vh; font-weight: 500; color: var(--muted); }
.rl-prox { font-size: 3.6vh; color: var(--muted); margin-top: 1vh; }
.rl-en-break .rl-tiempo, .rl-en-break .rl-nivel { color: var(--amber); }
.rl-pausado .rl-tiempo { opacity: .5; }
.rl-fichas { grid-area: fichas; display: flex; justify-content: center; gap: 3vw; font-size: 3vh; }
.rl-ficha { display: flex; align-items: center; gap: .8vw; }
.rl-ficha .ficha { width: 4.5vh; height: 4.5vh; border-width: .6vh; }
.rl-botones { position: absolute; right: 1vw; bottom: 1vh; display: flex; gap: 6px; opacity: .25; }
.rl-botones:hover, .rl-botones:focus-within { opacity: 1; }

/* Angosto (un teléfono mirando el reloj): una columna, y la letra se escala
   con el ancho y no con el alto, que si no se sale por el costado. */
@media (max-width: 760px) {
  #relojView { overflow-y: auto; }
  .rl { height: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "top" "centro" "der" "izq" "fichas"; }
  .rl-top { flex-wrap: wrap; gap: 4px 12px; }
  .rl-top h1 { font-size: 7vw; }
  .rl-nivel { font-size: 6vw; }
  .rl-tiempo { font-size: 24vw; }
  .rl-ciegas { font-size: 12vw; }
  .rl-der { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
  .rl-der b { font-size: 6vw; }
  .rl-fichas { flex-wrap: wrap; gap: 12px 20px; padding-bottom: 48px; }
}