/* LOS DÍAS CERRADOS (12-nov-2026): el día en el calendario (club, profesor y alumna), la pantalla Días cerrados y la página
   pública. Va después de tema.css (lib/layout.php e index.php): usa las variables del tema del club. Sobrio: sin color fuerte,
   un rayado suave en la columna del día cerrado y el motivo en letras. */

/* El calendario: la tira del teléfono, el día y la grilla de la compu */
.pm-semana-cerrado{font-weight:800}
.pm-cerrado-dia{margin:0 0 14px; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r); background:var(--suave)}
.pm-cerrar-dia{margin-top:16px}
.pm-cerrar-dia form{margin:0}
.pm-grilla-cab .pm-grilla-dia a{color:inherit; text-decoration:none}
.pm-grilla-cab .pm-grilla-dia a:hover{text-decoration:underline}
.pm-grilla-cab .pm-grilla-dia.cerrado small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--texto); font-weight:700}
.pm-grilla-celda.cerrado{background:repeating-linear-gradient(135deg, transparent 0 9px, var(--linea) 9px 10px)}
.pm-cerrados-semana{margin:12px 0 0; color:var(--texto-2); font-size:var(--t-chico)}
.pm-cerrados-semana span{display:block}
.pm-cerrados-semana b{color:var(--texto)}

/* La pantalla Días cerrados */
.pm-cerrados{margin:0; padding:0; list-style:none}
.pm-cerrados li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea)}
.pm-cerrados li:last-child{border-bottom:0}
.pm-cerrados li > span{min-width:0}
.pm-cerrados li b{display:block}
.pm-cerrados li span span{color:var(--texto-2)}
.pm-cerrados form{margin:0; flex:none}
.pm-cerrado-ya{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:12px 14px; border:1px solid var(--linea); border-radius:var(--r); background:var(--suave)}
.pm-cerrado-ya p{margin:0}
.pm-cerrado-ya form{margin:0}
.pm-anios{display:flex; gap:10px; margin:0 0 14px}
.pm-anios .boton{flex:0 1 120px}
/* El año elegido, como «Ver» en pm.css (tema.css pone todo .boton blanco con !important): borde doble y letra fuerte. */
body .pm-anios .boton.activo{background:#fff !important; color:var(--fuerte) !important; border-color:var(--fuerte) !important; box-shadow:inset 0 0 0 1px var(--fuerte) !important; font-weight:800}
.pm-feriados{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 12px}
.pm-feriados .pm-elige{margin:0 0 10px; background:#fff}
.pm-feriados .pm-elige.paso{opacity:.55; cursor:default}
.pm-campo small.pm-nota{display:block; margin:4px 0 0}
@media (max-width:700px){
  .pm-feriados{grid-template-columns:minmax(0,1fr)}
}

/* La página pública: el día cerrado en el horario de los próximos 7 días */
.horario .cerrado{padding-top:5px; color:var(--texto-2)}

/* Clases canceladas (12-nov-2026): el tercer botón de «Para atender» y la pantalla para reagendar */
@media (min-width:700px){ .pm-atender{grid-template-columns:repeat(3, 200px) !important} }
@media (max-width:699px){ .pm-atender .boton:nth-child(3){grid-column:1 / -1} }
.pm-cancelada-clase{margin:18px 0 6px; font-size:var(--t-grande)}
.pm-cancelada-clase:first-child{margin-top:0}
.pm-cancelada-clase a{color:inherit}

/* «Ver turno» (12-nov-2026): el desplegable del calendario, al lado de la semana (compu) y arriba de la tira (teléfono) */
.pm-turno{display:flex; align-items:center; gap:10px; margin:0}
.pm-turno label{font-weight:700; white-space:nowrap}
.pm-turno .busca-caja, .pm-turno select{width:170px}
.pm-cal-nav .pm-turno{margin-left:auto}
.pm-cal-tel .pm-turno{margin:0 0 12px}
.pm-cal-tel .pm-turno .busca-caja, .pm-cal-tel .pm-turno select{flex:1; width:auto}

/* La configuración del calendario (12-nov-2026): una sección aparte abajo del calendario */
.pm-config-cal{margin-top:28px}

/* LOS BOTONES CON ÍCONO (12-nov-2026, lib/layout.php: boton_icono()): chicos y cuadrados. La pausa prendida, con color. */
body .boton.pm-ico{width:44px !important; min-width:44px; height:44px; min-height:44px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; flex:none; list-style:none}
body .boton.pm-ico::-webkit-details-marker{display:none}
body .boton.pm-ico svg{display:block}
body .boton.pm-ico-quitar{color:var(--rojo)}
body .boton.pm-ico-pausa.activo{background:#FDF0E1 !important; border-color:var(--naranja) !important; color:#7A4106}
.pm-ico-fila{display:flex; flex-wrap:nowrap; gap:8px; align-items:center; flex:none}

/* Las tarjetas (el inicio, Estadísticas, los portales): SIEMPRE centradas, también si son menos que una fila (Sebastian, 12-nov-2026:
   en Estadísticas las dos tarjetas quedaban contra la izquierda). La grilla de 4 de tema.css llenaba de izquierda a derecha. */
.pm-area-apps{display:flex !important; flex-wrap:wrap; justify-content:center; max-width:722px; margin-left:auto !important; margin-right:auto !important}
.pm-area-apps > .pm-app-tarjeta{width:170px !important; flex:none}
@media (max-width:820px) and (min-width:701px){ .pm-area-apps{max-width:538px} }
@media (max-width:700px){ .pm-area-apps{max-width:332px; gap:12px} .pm-area-apps > .pm-app-tarjeta{width:160px !important} }

/* Los números grandes (12-nov-2026, Sebastian: «necesito los números grandes»), en todos los recuadros de números: Finanzas, Altas y
   bajas, el inicio. La plata en un tamaño que entra en el recuadro; en el teléfono, un poco menos. */
.pm-numeros > div b{font-size:var(--t-titulo); line-height:1.15}
@media (max-width:700px){ .pm-numeros > div b{font-size:var(--t-grande)} }
/* Finanzas: el mes, del tamaño del título de la tabla; los filtros en tres columnas (en el teléfono, una debajo de la otra) */
.pm-mes .fz-mes{font-size:var(--t-grande)}
.fz-filtros{grid-template-columns:repeat(3, minmax(0,1fr)) !important}
@media (max-width:700px){ .fz-filtros{grid-template-columns:minmax(0,1fr) !important} }
.fz-filtros input[type=search]{width:100%}

/* Días feriados y cerrados, simplificada (12-nov-2026, a la noche): «Un día» o «Varios días» (el Hasta, solo con varios); la fecha
   del ancho de una fecha; el motivo y el por qué al lado. En el teléfono, uno debajo del otro. */
.fc-cuantos{margin:0 0 14px; max-width:420px}
.fc-campos{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-start}
.fc-campos .pm-campo{margin:0}
.fc-fecha{width:11.5em !important; max-width:100%}
.fc-campos select, .fc-campos .busca-caja{width:12em}
.fc-porque{flex:1 1 16em; min-width:0}
.fc-form .fc-varios{display:none}
.fc-form.varios .fc-varios{display:inline}
.fc-form.varios .fc-uno{display:none}
.fc-form.con-js:not(.varios) .fc-hasta{display:none}
@media (max-width:700px){ .fc-campos > .pm-campo{flex:1 1 100%} .fc-campos select, .fc-campos .busca-caja{width:100%} }