/* Todos los checkbox de la web pintados como interruptor (pista + bolita blanca:
   gris y a la izquierda apagado, verde y a la derecha encendido).
   Va solo en CSS para no tocar el marcado de cada check: appearance:none y la bolita
   es un radial-gradient que se desliza con background-position (no ::before, que
   Firefox no pinta dentro de un <input>). Los !important ganan a los width/height/
   margin en línea y a los `.toggle-row input[type=checkbox]` de cada página.
   El interruptor grande de /admin → Pagos (.pay-switch) tiene su propio dibujo. */
input[type=checkbox]:not(.pay-switch input) {
  --sw-on: #4cae52;
  -webkit-appearance: none; appearance: none;
  flex-shrink: 0;
  width: 36px !important; height: 20px !important;
  margin: 0 !important; padding: 0; box-sizing: border-box;
  border: 0; border-radius: 999px;
  vertical-align: middle;
  cursor: pointer;
  background-color: #4a5354;
  background-image: radial-gradient(circle, #fff 0 7px, transparent 7.5px);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 1px 0;
  transition: background-color .16s, background-position .16s;
}
input[type=checkbox]:not(.pay-switch input):checked {
  background-color: var(--sw-on);
  background-position: 15px 0;
}
input[type=checkbox]:not(.pay-switch input):disabled { opacity: .45; cursor: not-allowed; }
input[type=checkbox]:not(.pay-switch input):focus-visible { outline: 2px solid var(--sw-on); outline-offset: 2px; }

/* Campos de fecha y hora en Safari de iOS/iPadOS: con su aspecto nativo no hacen caso del
   height ni del width que les pone cada página y traen un ancho mínimo propio, así que en
   una rejilla (cupones de /admin, edición de sala…) se salían de su columna, salían más
   altos que sus vecinos y descuadraban la fila entera. Sin aspecto nativo se comportan como
   cualquier otro input; el selector de fecha del sistema sigue abriéndose igual al tocar.
   El min-height del valor evita que, vacío, el campo se quede aplastado (solo en iOS). */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value {
  text-align: left; min-height: 1.4em;
}
/* El icono del calendario sale negro: sobre los fondos oscuros de la web no se veía. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.55); cursor: pointer; }