/* Caja de feria — Red Emprende
   Pensado para un salón con luz irregular y cajeros voluntarios.
   El color no decora: verde = entró, ámbar = hay que devolver, rojo = revise. */

:root{
  /* Paleta tomada del logo de Red Emprende: azul noche del fondo,
     azul brillante de las figuras, y el verde limón de los nodos. */
  --fondo:#0a1533;
  --panel:#122250;
  --panel-alto:#1c3272;
  --borde:#274284;
  --texto:#e9f0fb;
  --tenue:#9fb0c4;       /* el gris plata del "RED" del logo */
  --plata:#c2ccd8;
  --cian:#2ea8f5;        /* azul de marca: códigos, selección */
  --lima:#d8e818;        /* amarillo de los nodos */
  --ambar:#d8e818;       /* atención y vuelto: el mismo amarillo */
  --verde:#34d17f;
  --rojo:#ff5f5f;
  --morado:#8fb8ff;
  --escribe:#ff6b6b;   /* lo que digita el cajero */
  --num: ui-monospace,"SF Mono","Roboto Mono","DejaVu Sans Mono",monospace;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--fondo); color:var(--texto); font-family:var(--sans);
  font-size:17px; line-height:1.45; overscroll-behavior:none;
}
.num{font-family:var(--num); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* ─── barra superior ─── */
.barra{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 18px; background:var(--panel);
  border-bottom:1px solid var(--borde); border-top:3px solid var(--lima);
}
.barra .marca{display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit}
.barra .marca img{height:30px; width:auto; display:block}
.marca-texto{display:flex; align-items:baseline; gap:5px; line-height:1}
.marca-texto b{font-weight:900; letter-spacing:.04em; font-size:16px; color:var(--plata)}
.marca-texto i{font-style:italic; font-weight:600; font-size:15px; color:var(--cian)}
/* El nombre de la iglesia va en la misma línea del logo, separado por un filo */
.marca-lugar{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--plata);
  font-weight:700; white-space:nowrap;
  padding-left:12px; border-left:1px solid var(--borde);
}
.barra .marca{align-self:center}
@media (max-width:560px){
  .marca-lugar{font-size:9px; letter-spacing:.1em; padding-left:8px}
  .barra .marca img{height:24px}
}

/* Nodos del logo: tres puntos limón unidos, como firma discreta */
.nodos{display:inline-flex; align-items:center; gap:3px}
.nodos span{width:6px; height:6px; border-radius:50%; background:var(--lima); display:block}
.nodos span:nth-child(2){width:4px; height:4px; opacity:.75}
.nodos span:nth-child(3){width:5px; height:5px; opacity:.9}
.barra .sep{flex:1}
.barra .dato{font-size:14px; color:var(--tenue)}
.barra .dato b{color:var(--texto); font-weight:700}
.barra a{color:var(--cian); text-decoration:none; font-size:14px; font-weight:600}
.barra a:hover{text-decoration:underline}

/* ─── layout de caja ─── */
.caja-grid{
  display:grid; grid-template-columns: 1fr 380px; gap:16px;
  padding:16px; align-items:start;
}
@media (max-width:1000px){ .caja-grid{grid-template-columns:1fr} }

.panel{background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:16px}
.panel h2{margin:0 0 12px; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
          color:var(--plata); border-bottom:1px solid var(--borde); padding-bottom:8px}

/* ─── la pantalla grande ─── */
.pantalla{
  background:#060e26; border:2px solid var(--borde); border-radius:16px;
  padding:20px 24px; min-height:210px;
  display:flex; flex-direction:column; justify-content:center;
}
.pantalla .etiqueta{
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--plata); margin-bottom:4px;
}
.pantalla .grande{
  font-family:var(--num); font-weight:700; line-height:1;
  font-size:clamp(64px, 15vw, 150px);
  word-break:break-all;
}
.pantalla .sub{font-size:clamp(20px,3.2vw,34px); font-weight:700; margin-top:8px}
.pantalla .pista{color:var(--tenue); font-size:15px; margin-top:10px}

.c-cian{color:var(--cian)} .c-verde{color:var(--verde)}
.c-ambar{color:var(--ambar)} .c-rojo{color:var(--rojo)} .c-tenue{color:var(--tenue)}

/* el vuelto es el número que más se equivoca la gente: va al doble */
.vuelto-caja{
  margin-top:14px; padding:16px 20px; border-radius:14px;
  background:rgba(212,232,24,.10); border:2px solid var(--ambar);
}
.vuelto-caja .etiqueta{color:var(--ambar)}
.vuelto-caja .monto{
  font-family:var(--num); font-weight:800; color:var(--ambar);
  font-size:clamp(72px,18vw,190px); line-height:1;
}

/* ─── teclado ─── */
.teclado{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.tecla{
  font-family:var(--num); font-size:clamp(28px,5vw,42px); font-weight:700;
  padding:18px 0; border-radius:12px; cursor:pointer;
  background:var(--panel-alto); color:var(--texto);
  border:1px solid var(--borde); transition:transform .06s, background .12s;
  touch-action:manipulation; user-select:none;
}
.tecla:active{transform:scale(.96); background:#254091}
.tecla.aux{font-size:clamp(15px,2.4vw,20px); font-family:var(--sans); font-weight:700; color:var(--tenue)}
.tecla.ok{background:var(--verde); color:#04180b; border-color:var(--verde)}
.tecla.ancha{grid-column:span 2}

/* Regla de lectura en toda la caja:
   gris pequeño = lo puso el sistema · rojo grande = esto lo escribe usted.
   El prefijo del talonario casi nunca cambia; los últimos dígitos sí. */
.pantalla .prefijo{font-size:.4em;color:var(--tenue);font-weight:600;letter-spacing:0}
.pantalla .grande.escribiendo{color:var(--escribe)}

.campo-partido{
  display:flex; align-items:baseline; gap:4px;
  background:#060e26; border:1px solid var(--borde); border-radius:10px; padding:8px 14px;
}
.campo-partido:focus-within{outline:3px solid var(--cian); outline-offset:2px}
.campo-partido .parte-fija{
  font-family:var(--num); font-size:22px; font-weight:600; color:var(--tenue);
}
.campo-partido .parte-fija:empty{display:none}
.campo-partido .parte-escrita{
  flex:1; min-width:0; background:none; border:none; padding:4px 0;
  font-family:var(--num); font-size:42px; font-weight:800; color:var(--escribe);
  letter-spacing:.02em;
}
.campo-partido .parte-escrita:focus{outline:none}

.directos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.directos .btn{padding:16px 6px;font-size:15px}
.directos.oculto{display:none}
@media (max-width:520px){ .directos{grid-template-columns:repeat(2,1fr)} }

.billetes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.billetes .btn{padding:18px 4px;font-size:18px;font-family:var(--num);font-weight:700}
.billetes .btn.exacto{font-family:var(--sans);font-size:16px;background:var(--verde);color:#04180b;border-color:var(--verde)}

/* ─── botones ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:18px; font-weight:700;
  padding:14px 20px; border-radius:12px; cursor:pointer;
  background:var(--panel-alto); color:var(--texto); border:1px solid var(--borde);
  touch-action:manipulation;
}
.btn:active{transform:scale(.98)}
.btn.principal{background:var(--verde); color:#04180b; border-color:var(--verde)}
.btn.peligro{background:transparent; color:var(--rojo); border-color:var(--rojo)}
.btn.bloque{width:100%; padding:22px; font-size:22px; margin-bottom:10px}
.btn[disabled]{opacity:.4; cursor:not-allowed}

.metodos{display:grid; gap:12px; grid-template-columns:1fr}
.metodos .btn{padding:26px; font-size:24px}

/* ─── lista de líneas de la venta ─── */
.lineas{list-style:none; margin:0; padding:0}
.lineas li{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--borde);
}
.lineas .cod{
  font-family:var(--num); font-size:30px; font-weight:800; color:var(--cian);
  min-width:56px;
}
.lineas .det{flex:1; min-width:0}
.lineas .det b{display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lineas .det span{font-size:13px; color:var(--tenue)}
.lineas .mon{font-family:var(--num); font-size:22px; font-weight:700}
.lineas .quitar{background:none;border:none;color:var(--rojo);font-size:22px;cursor:pointer;padding:4px 8px}

.total-venta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding-top:14px; border-top:2px solid var(--borde);
}
.total-venta span{font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--tenue)}
.total-venta b{font-family:var(--num); font-size:42px; font-weight:800}

/* ─── formularios ─── */
label{display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
      color:var(--plata); margin:14px 0 6px; font-weight:700}
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea{
  width:100%; padding:14px; font-size:20px; font-family:var(--sans);
  background:#060e26; color:var(--texto);
  border:1px solid var(--borde); border-radius:10px;
}
input.num-in{font-family:var(--num); font-size:30px; font-weight:700; text-align:right}
input:focus, select:focus, textarea:focus, .btn:focus-visible, .tecla:focus-visible{
  outline:3px solid var(--cian); outline-offset:2px;
}

/* ─── tablas ─── */
table{width:100%; border-collapse:collapse; font-size:15px}
th{
  text-align:left; padding:10px 8px; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--plata); border-bottom:2px solid var(--borde);
}
td{padding:10px 8px; border-bottom:1px solid var(--borde)}
td.n, th.n{text-align:right; font-family:var(--num); font-variant-numeric:tabular-nums}
tr.total-fila td{font-weight:800; border-top:2px solid var(--borde); background:rgba(46,168,245,.09)}

/* ─── arqueo ─── */
.arqueo{display:grid; gap:10px}
.arqueo .fila{
  display:grid; grid-template-columns:120px 1fr 140px; gap:12px; align-items:center;
  padding:8px; background:var(--panel-alto); border-radius:10px;
}
.arqueo .den{font-family:var(--num); font-size:24px; font-weight:700}
.arqueo .sub{font-family:var(--num); font-size:20px; text-align:right; color:var(--tenue)}
.arqueo input{padding:10px; font-size:24px; text-align:center; font-family:var(--num)}

/* ─── avisos ─── */
.aviso{padding:14px 16px; border-radius:12px; margin:12px 0; font-size:16px; font-weight:600}
.aviso.mal{background:rgba(255,92,92,.14); border:1px solid var(--rojo); color:#ffc9c9}
.aviso.bien{background:rgba(47,208,122,.14); border:1px solid var(--verde); color:#b6f4d3}
.aviso.ojo{background:rgba(255,176,32,.14); border:1px solid var(--ambar); color:#ffe0a8}
.aviso ul{margin:8px 0 0 18px; padding:0; font-weight:400; font-size:15px}

/* ─── modal ─── */
.fondo-modal{
  position:fixed; inset:0; background:rgba(4,9,24,.90);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:50;
}
.modal{
  background:var(--panel); border:1px solid var(--borde); border-radius:18px;
  padding:24px; width:100%; max-width:620px; max-height:92vh; overflow:auto;
}
.modal h3{margin:0 0 6px; font-size:22px}
.oculto{display:none !important}

/* ─── centrado simple (login, mensajes) ─── */
.centro{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px}
.tarjeta{background:var(--panel); border:1px solid var(--borde); border-radius:18px;
         padding:32px; width:100%; max-width:420px}
.tarjeta .marca img{height:36px; width:auto}
.tarjeta h1{margin:0 0 4px; font-size:26px}
.tarjeta p.lead{margin:0 0 18px; color:var(--tenue); font-size:15px}

.cinta{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.cinta.efectivo{background:rgba(47,208,122,.18); color:var(--verde)}
.cinta.tarjeta{background:rgba(56,189,248,.18); color:var(--cian)}
.cinta.sinpe{background:rgba(255,176,32,.18); color:var(--ambar)}
.cinta.anulada{background:rgba(255,92,92,.18); color:var(--rojo)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}


/* ═══════════ Pantallas de configuración e informes: página completa ═══════════
   Nada de hoja angosta al centro. Los bloques se reparten en la pantalla y los
   pasos se van abriendo en orden para que nadie llene algo que va después. */
.ancho-total{max-width:1500px; margin:0 auto; padding:20px 22px 60px}

.encabezado-pasos{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:20px; padding-bottom:16px;
  border-bottom:1px solid var(--borde);
}
.encabezado-pasos h1{margin:0; font-size:26px; letter-spacing:-.01em}
.encabezado-pasos p{margin:4px 0 0; color:var(--tenue); font-size:15px}
.progreso{display:flex; align-items:center; gap:8px}
.progreso .punto{
  width:11px; height:11px; border-radius:50%;
  border:2px solid var(--borde); background:transparent;
}
.progreso .punto.lleno{background:var(--lima); border-color:var(--lima)}
.progreso b{color:var(--plata); font-size:13px; letter-spacing:.1em;
            text-transform:uppercase; margin-left:6px}

.pasos-grid{
  display:grid; gap:16px; align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(430px, 1fr));
}
@media (max-width:900px){ .pasos-grid{grid-template-columns:1fr} }

.paso-card{
  background:var(--panel); border:1px solid var(--borde); border-radius:14px;
  overflow:hidden; transition:opacity .2s;
}
.paso-card > header{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-bottom:1px solid var(--borde);
}
.paso-card > header h2{
  margin:0; font-size:17px; font-weight:800; letter-spacing:0;
  text-transform:none; color:var(--texto); border:none; padding:0;
}
.paso-card > header p{margin:2px 0 0; font-size:13px; color:var(--tenue)}
.paso-card .numero{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--num); font-size:17px; font-weight:800;
  background:var(--panel-alto); color:var(--tenue); border:2px solid var(--borde);
}
.paso-card .cuerpo{padding:16px 18px}
.paso-card .cuerpo > :first-child{margin-top:0}
.paso-card .cuerpo label:first-child{margin-top:0}

/* activo: es el que toca ahora */
.paso-card.activo{border-color:var(--cian); box-shadow:0 0 0 1px rgba(46,168,245,.25)}
.paso-card.activo .numero{background:var(--cian); color:#05203a; border-color:var(--cian)}

/* hecho: ya quedó, se puede volver pero no llama la atención */
.paso-card.hecho .numero{background:var(--verde); color:#04180b; border-color:var(--verde)}

/* cerrado: todavía no toca */
.paso-card.cerrado{opacity:.55}
.paso-card.cerrado .numero{background:transparent}
.cuerpo.bloqueado{
  color:var(--tenue); font-size:14px; font-style:italic;
  padding:22px 18px; text-align:center;
}

.paso-card .ayuda{color:var(--tenue); font-size:14px; margin:0 0 12px}
.paso-card details{margin-top:14px; border-top:1px solid var(--borde); padding-top:12px}
.paso-card details summary{
  cursor:pointer; color:var(--cian); font-weight:700; font-size:14px; list-style:none;
}
.paso-card details summary::before{content:"+ "; font-weight:900}
.paso-card details[open] summary::before{content:"− "}

.dos-columnas{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:560px){ .dos-columnas{grid-template-columns:1fr} }

.listo-cobrar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:18px; padding:16px 20px; border-radius:14px;
  background:rgba(52,209,127,.10); border:1px solid var(--verde);
}
.listo-cobrar b{display:block; font-size:17px; color:var(--verde)}
.listo-cobrar span{font-size:14px; color:var(--tenue)}


/* ─── ver la clave mientras se escribe ─── */
.campo-clave{position:relative; display:block}
.campo-clave input{padding-right:86px}
.ver-clave{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:var(--panel-alto); color:var(--plata); border:1px solid var(--borde);
  border-radius:8px; padding:8px 12px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:var(--sans);
}
.ver-clave:active{transform:translateY(-50%) scale(.96)}

/* ─── interruptor de participación ─── */
.sub-titulo{
  margin:22px 0 4px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--plata); border-top:1px solid var(--borde); padding-top:16px;
}
.interruptor{display:inline-flex; margin:0; cursor:pointer}
.interruptor input{position:absolute; opacity:0; width:0; height:0}
.interruptor span{
  width:44px; height:24px; border-radius:999px; background:var(--panel-alto);
  border:1px solid var(--borde); position:relative; transition:background .15s;
}
.interruptor span::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--tenue); transition:transform .15s, background .15s;
}
.interruptor input:checked + span{background:rgba(52,209,127,.25); border-color:var(--verde)}
.interruptor input:checked + span::after{transform:translateX(20px); background:var(--verde)}
.interruptor input:disabled + span{opacity:.5; cursor:not-allowed}
.interruptor input:focus-visible + span{outline:3px solid var(--cian); outline-offset:2px}
.tabla-cajeros td{vertical-align:middle}
.btn.chico{padding:7px 11px; font-size:13px}

.tres-columnas{display:grid; grid-template-columns:repeat(3,1fr); gap:0 10px}
.tres-columnas input{padding:10px; font-size:22px}
.suma-reparto{font-weight:700; margin-top:6px}
.suma-reparto.bien{color:var(--verde)}
.suma-reparto.mal{color:var(--rojo)}

/* ─── escoger si la caja cobra de todo o de un solo método ─── */
.metodo-fijo{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.metodo-fijo .btn{padding:16px 6px; font-size:15px}
.metodo-fijo .btn.on{background:var(--cian); color:#05203a; border-color:var(--cian)}
@media (max-width:640px){ .metodo-fijo{grid-template-columns:1fr 1fr} }

/* ─── cinta de la caja en la barra de cobro ─── */
.cinta-caja{
  display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:999px;
  background:var(--panel-alto); border:1px solid var(--borde); font-size:13px; font-weight:700;
}
.cinta-caja b{color:var(--cian); font-family:var(--num); font-size:15px}
.cinta-caja .fijo{color:var(--lima); text-transform:uppercase; letter-spacing:.08em}
.cinta-caja button{
  background:none; border:none; color:var(--tenue); cursor:pointer;
  font-size:12px; text-decoration:underline; font-family:var(--sans); padding:0;
}