/* =======================================================================
   Encuesta de atención · estilos de las pantallas de selección
   Archivo nuevo (v2.1). Se carga después de estilo.css y manda sobre él,
   así ninguna copia antigua guardada en el navegador puede descuadrar
   las tarjetas de unidad, área, oficina ni los rangos de tiempo.
   ======================================================================= */

/* --- nada puede desbordar la pantalla, sin ensanchar la tarjeta --- */
body.kiosco{overflow-x:hidden}
.kiosco-caja{max-width:880px;width:100%}
.kiosco-caja input,.kiosco-caja select,.kiosco-caja textarea{max-width:100%}
/* un elemento oculto se queda oculto aunque su clase traiga display */
.kiosco-caja [hidden]{display:none !important}

/* --- campo del DNI: nunca debe salirse de la tarjeta --- */
.kiosco-caja .dni-caja{width:100%;max-width:380px;margin:0 auto}
.kiosco-caja .dni-vista{
  display:block;
  width:100% !important;
  max-width:100%;
  box-sizing:border-box;
  min-height:68px;
  padding:12px 8px;
  border:2.5px solid var(--borde,#DCE6D3);
  border-radius:16px;
  background:#FCFDFB;
  color:var(--tinta,#12301A);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:34px;
  letter-spacing:8px;
  text-indent:8px;          /* compensa el espacio que el interletrado deja al final */
  text-align:center;
}
.kiosco-caja input.dni-vista::placeholder{color:#C3CFC0;letter-spacing:8px}
.kiosco-caja .dni-vista:focus{outline:none;border-color:var(--verde,#4E9A2F);box-shadow:0 0 0 3px rgba(78,154,47,.16)}
.kiosco-caja .dni-vista.err{border-color:var(--llama,#E32227)}
/* en modo quiosco es un div, no un input: mantiene el alto cómodo */
.kiosco-caja div.dni-vista{display:flex;align-items:center;justify-content:center;min-height:74px}

/* --- rejilla con íconos: unidades, áreas y oficinas --- */
.kiosco-caja .rejilla-op{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  margin-top:4px;
  align-items:stretch;
}
.kiosco-caja .rejilla-op.densa{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}

.kiosco-caja .rejilla-op .tarjeta-op{
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  width:100%;
  max-width:none !important;
  min-height:0;
  height:100%;
  margin:0;
  padding:14px 9px 12px;
  border:2px solid var(--borde,#DCE6D3);
  border-radius:16px;
  background:#fff;
  font-family:inherit;
  text-align:center;
  cursor:pointer;
  transition:.15s;
}
.kiosco-caja .rejilla-op .tarjeta-op:hover,
.kiosco-caja .rejilla-op .tarjeta-op:focus,
.kiosco-caja .rejilla-op .tarjeta-op.sel{
  border-color:var(--verde,#4E9A2F);
  background:var(--claro,#EAF2E0);
  transform:translateY(-2px);
  outline:none;
}
.kiosco-caja .rejilla-op .tarjeta-op .ic{font-size:29px;line-height:1;display:block}
.kiosco-caja .rejilla-op .tarjeta-op .nom{
  font-size:13.5px;font-weight:600;color:var(--tinta,#12301A);line-height:1.28;display:block}
.kiosco-caja .rejilla-op .tarjeta-op .sub{
  font-size:11.5px;font-weight:400;color:var(--plomo,#67746A);line-height:1.2;display:block;margin:0}

/* --- filas compactas: rangos de tiempo, sí / en parte / no --- */
.kiosco-caja .opciones.filas{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:10px;
  margin-top:6px;
}
.kiosco-caja .opciones.filas .opcion{
  flex:0 0 auto !important;
  width:100%;
  max-width:none !important;
  min-height:0 !important;
  height:auto;
  margin:0;
  padding:15px 16px;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
  text-align:left;
}
.kiosco-caja .opciones.filas .opcion .ic{font-size:22px;flex:none}

/* --- por si quedara alguna lista vertical antigua --- */
.kiosco-caja .opciones.lista{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.kiosco-caja .opciones.lista .opcion{flex:0 0 auto !important;max-width:none !important;min-height:0}

@media(max-width:760px){
  .kiosco-caja .dni-vista{font-size:27px;letter-spacing:5px;text-indent:5px;min-height:60px}
  .kiosco-caja input.dni-vista::placeholder{letter-spacing:5px}
  .kiosco-caja .rejilla-op{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:8px}
  .kiosco-caja .rejilla-op .tarjeta-op{padding:12px 7px 10px}
  .kiosco-caja .rejilla-op .tarjeta-op .ic{font-size:26px}
  .kiosco-caja .rejilla-op .tarjeta-op .nom{font-size:12.5px}
  .kiosco-caja .opciones.filas{grid-template-columns:1fr}
}
@media(max-width:400px){
  .kiosco-caja .dni-vista{font-size:23px;letter-spacing:3px;text-indent:3px}
  .kiosco-caja input.dni-vista::placeholder{letter-spacing:3px}
  .kiosco-caja .teclado button{padding:13px 0;font-size:21px}
}