/* Cuadrícula pública del calendario nuevo (calendario/mes_vista.php): semana y mes de la web y mes del profesorado.
 * Geometría del antiguo: la hora (--hour) la fija calendario/js/grid.js para que el día ocupe unas 2,5 pantallas;
 * todas las filas miden lo mismo y el día se arrastra con la mano.
 * Colores de la web: petróleo #0E3B40 (antes el azul marino), amarillo #FFB703, salmón; cajas como el antiguo:
 * parejas #4e67ad, individual #d87557, Kids #efcf45. */
:root { --hour: 220px; --row: 80px; }
.smmes { font-family: Nunito, Arial, sans-serif; color: #0E3B40; }
.smmes__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 8px; }
.smmes__titulo { margin: 0; font-size: 17px; line-height: 24px; font-weight: 800; color: #fff; }
.smmes__nav { display: flex; flex-wrap: wrap; gap: 6px; }
.smmes__nav a { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #ff7048; color: #0A272B; font-size: 12px; line-height: 18px; font-weight: 700; text-decoration: none; }
.smmes__nav a:hover { background: #ff8f71; }
.smmes__vacio { margin: 0; padding: 16px; border-radius: 12px; background: #fff; }
.smmes__festivo { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #FFB703; color: #0E3B40; font-size: 12px; font-weight: 700; }

/* Un día como el antiguo: el nombre en vertical a la izquierda, la cuadrícula que se arrastra en el centro y los
 * números de sala a la derecha (con «Sala» arriba). Sin cabecera encima: todo compacto. */
.smg-dia { display: flex; align-items: stretch; margin: 0 0 8px; padding: 0 2px 2px 0; background: #0E3B40; border-radius: 6px; overflow: hidden; }
.smg-dianom { flex: none; width: 22px; display: flex; align-items: center; justify-content: center; margin: 24px 2px 0 0; background: #2D686E; }
.smg-dianom span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: #FFB703; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.smg-dia--vacio { align-items: center; }
.smg-dia--vacio .smg-dianom { margin-top: 0; align-self: stretch; min-height: 44px; }
.smg-dia__nada { margin: 0; padding: 12px; color: #fff; font-weight: 700; }
.smg-drag { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; cursor: grab; user-select: none; -webkit-user-select: none; scrollbar-width: thin; scrollbar-color: #2D686E #0E3B40; }
.smg-drag::-webkit-scrollbar { height: 6px; }
.smg-drag::-webkit-scrollbar-track { background: #0E3B40; }
.smg-drag::-webkit-scrollbar-thumb { background: #2D686E; border-radius: 3px; }
.smg-drag--activo, .smg-drag--activo * { cursor: grabbing !important; }
.smg-grid { width: calc((var(--h1) - var(--h0)) / 60 * var(--hour)); }
.smg-eje { position: relative; height: 24px; }
.smg-hora { position: absolute; top: 0; left: calc((var(--s) - var(--h0)) / 60 * var(--hour)); width: var(--hour); height: 24px; border-left: 1px solid rgba(255, 255, 255, .2);
    color: #ff7048; font-weight: 700; font-size: 11px; line-height: 24px; text-align: center; box-sizing: border-box; }
.smg-pista { position: relative; height: var(--row); border-top: 1px solid rgba(255, 255, 255, .12); }
.smg-linea { position: absolute; top: 0; bottom: 0; left: calc((var(--s) - var(--h0)) / 60 * var(--hour)); border-left: 1px solid rgba(255, 255, 255, .12); }
.smg-salas { flex: none; width: 34px; margin-left: 2px; display: flex; flex-direction: column; }
.smg-salas__head { height: 24px; color: #ff7048; font-weight: 800; font-size: 11px; line-height: 24px; text-align: center; }
.smg-salas__num { height: var(--row); display: flex; align-items: center; justify-content: center; border-top: 1px solid #0E3B40; background: #2D686E; color: #fff; font-weight: 800; font-size: 12px; box-sizing: border-box; }
.smg-caja { position: absolute; left: calc((var(--s) - var(--h0)) / 60 * var(--hour) + 1px); width: calc(var(--d) / 60 * var(--hour) - 2px);
    top: calc(1px + var(--c) * ((var(--row) - 2px) / var(--n))); height: calc((var(--row) - 2px) / var(--n) - 1px);
    display: flex; flex-direction: column; align-items: center; gap: 0; overflow: hidden; padding: 3px 6px; box-sizing: border-box;
    color: #fff; font-size: 11px; line-height: 13px; text-align: center; }
.smg-caja a { color: inherit; text-decoration: none; }
.smg-caja a:hover { text-decoration: underline; }
.smg-caja--pareja { background: #4e67ad; color: #efd78a; }
.smg-caja--individual { background: #d87557; color: #efd78a; }
.smg-caja--kids { background: #efcf45; color: #0E3B40; }
.smg-caja--jam { background: #4e67ad; color: #efd78a; justify-content: center; }
.smg-caja--profe { background: #1b2c60; }
.smg-m { position: absolute; top: 0; left: 0; width: 17px; height: 17px; padding: 1px 0 0 2px; box-sizing: border-box; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%);
    color: #0E3B40; font-size: 8px; font-weight: 800; line-height: 8px; text-align: left; }
.smg-baile { max-width: 100%; font-weight: 800; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smg-nivel { max-width: 100%; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smg-caja--kids .smg-nivel { color: #0E3B40; }
.smg-profe { max-width: 100%; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smg-caja--kids .smg-profe { color: #0E3B40; }
.smg-fechas { font-size: 10.5px; line-height: 13px; color: #fff; }
.smg-caja--kids .smg-fechas { color: #0E3B40; }
.smg-fechas s { opacity: .7; }
.smg-pie { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; }
.smg-plazas { display: inline-flex; gap: 3px; }
.smg-bola { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; color: #000; font-size: 10px; font-weight: 800; box-sizing: border-box; }
.smg-bola--ind, .smg-bola--lea { background: #fbaa00; }
.smg-bola--fol { background: #fff; }
.smg-bola--par { background: #009933; }
.smg-bola--0 { background: #ff3300; color: #fff; }
.smg-inscritos { font-weight: 800; }
.smg-caja--profe.smg-luz--verde { box-shadow: inset 0 -5px 0 #090; }
.smg-caja--profe.smg-luz--amarillo { box-shadow: inset 0 -5px 0 #ffd400; }
.smg-caja--profe.smg-luz--rojo { box-shadow: inset 0 -5px 0 #f00; }
@media (max-width: 640px) {
    .smg-salas { width: 30px; }
}
.smmes__centro { margin: 6px 0 8px; font-family: Nunito, Arial, sans-serif; color: #0E3B40; font-size: 20px; font-weight: 800; }