@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap");
/* ============================================================
   Pilates Mood — EL TEMA DEL CLUB (Sebastian eligió la opción 1, «Lino», el 10-nov-2026; opciones en
   Claude_rediseno-opciones/). Sale del logo (arena #D2C4AC y negro) y de la sala (blanco cálido, roble, tapizado negro).
   · Fondo del tono del logo, más claro (#EDE5D8). Botones BLANCOS, que contrastan con el fondo.
   · Letra con serifa, delicada: Cormorant Garamond. Es finita, así que va más grande (base 19 px) y en 600.
   · Bordes casi rectos (2 px). Secciones sin caja: una línea fina arriba.
   · Lo elegido (el día) y lo que pide atención (la clase llena) en negro, como el logo.
   Va ÚLTIMA (después de pm.css, publica.css e ingreso.css) y manda. Para volver al diseño de VIBE: sacar esta hoja.
   ⚠️ El @media va al final.
   ============================================================ */
:root, body[class], body.ing{
  --ff:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fondo:#EDE5D8; --fondo-2:#E5DCCC; --linea-arena:#CDBFA8; --borde:#D9CCB8;
  --fuerte:#1F1C1A; --texto:#1F1C1A; --texto-2:#5F564B; --linea:#DDD2C1; --suave:#F3EEE5; --banda:transparent;
  --naranja:#9A4A2A; --rojo:#9A3B26;
  /* Un poco más grande (Sebastian, 11-nov-2026: «hay gente que no tiene buena visión»): la Cormorant se ve chica. */
  --r:2px; --t-mini:17px; --t-chico:18px; --t-base:20px; --t-grande:24px; --t-titulo:31px; --t-numero:42px;
}
body, body[class], body.ing{background:var(--fondo) !important; font-size:var(--t-base)}
body, button, input, select, textarea, summary, h1, h2, h3, .boton, .pm-app, .pm-marca, .marca{font-family:var(--ff) !important}
body, body *{font-variant-numeric:lining-nums tabular-nums !important}   /* Cormorant trae números «antiguos» (o8:oo) */
body[class] *{font-weight:inherit}
b, strong, h1, h2, h3, summary, .boton, .pm-app, .pm-sub, .pm-clase-hora, .pm-cupo, .pm-app-tarjeta, .marca, .hora,
.ing-boton, .ing h1, .ing h2{font-weight:600 !important}

/* Bordes casi rectos */
.pm-cupo, .pm-estado, .hora, .pm-barra, .pm-barra > span, .pm-semana a, .boton, .pm-boton-cabeza, .pm-panel, .pm-app-tarjeta,
.pm-cal-clase, .pm-icono, .pm-aviso, .modal, .aviso, .ing-caja, .ing-boton, .ing-panel, .ing-form input, input, select, textarea,
.mapa, .galeria a{border-radius:var(--r) !important}

/* Botones blancos */
body .boton, .pm-boton-cabeza, .pm-semana a, .pm-app-tarjeta, .pm-cal-clase, .ing-boton{background:#fff !important; color:var(--texto)}
body .boton, .pm-boton-cabeza, .pm-app-tarjeta, .pm-cal-clase, .pm-semana a{border:1px solid var(--borde) !important; box-shadow:none !important}
body .boton:hover, .pm-boton-cabeza:hover, .pm-app-tarjeta:hover, .pm-cal-clase:hover{border-color:var(--fuerte) !important}
body .boton.lleno, .ing-boton{border:1px solid var(--fuerte) !important; box-shadow:none !important}
/* La página del alumno: portal.css pinta el texto de .lleno en blanco (era con fondo azul); acá el fondo es blanco (11-nov-2026) */
.telefono .boton.lleno, .telefono .boton.lleno:hover{color:var(--texto)}
body .boton.peligro{color:var(--rojo)}
.pm-semana a.pm-semana-flecha{background:transparent !important; border:0 !important}

/* Encabezado y secciones */
.pm-cabeza{background:var(--fondo); border-bottom-color:var(--linea-arena)}
.pm-icono{background:transparent; color:var(--fuerte)}
.pm-logo{display:block; width:40px; height:40px; border-radius:var(--r); object-fit:cover}
.pm-marca .pm-logo{width:48px; height:48px}
.pm-panel, details.pm-panel{background:transparent; border:0 !important; border-top:1px solid var(--linea-arena) !important; border-radius:0 !important}
.pm-panel > h2, details.pm-panel > summary{background:transparent !important; padding-left:0; padding-right:0; border-radius:0 !important}
details.pm-panel[open] > summary, details.pm-panel > summary:hover{background:transparent !important}
.pm-panel-cuerpo{padding-left:0; padding-right:0}
.pm-area h2, .pm-dia-titulo, .pm-panel-sub{letter-spacing:.8px}

/* El inicio: las tarjetas centradas; dos columnas en el teléfono, tres en la compu (Sebastian, 10-nov-2026) */
.pm-areas{justify-content:center}
.pm-area{width:100%; text-align:center}
.pm-area-apps{display:grid; grid-template-columns:repeat(4, 170px); justify-content:center; gap:14px}   /* 4 columnas en la computadora (Sebastian, 11-nov-2026) */
.pm-app-tarjeta{width:auto !important; min-height:150px}
.pm-app-tarjeta .pm-icono{width:64px; height:64px}
.pm-app-tarjeta .pm-icono svg{width:52px; height:52px}

/* El subtítulo del encabezado, del tamaño del nombre de la pantalla (Sebastian, 10-nov-2026: «Horario de la semana» se veía chico) */
.pm-sub{font-size:26px; line-height:1.15}
.pm-panel.sin-titulo{padding-top:6px}

/* El inicio: el logo arriba, centrado y del ancho de una tarjeta (Sebastian, 10-nov-2026) */
.pm-inicio-logo{display:block; width:170px; height:auto; margin:6px auto 22px}

/* Lugares, el día elegido, hoy */
.pm-cupo{background:#fff; color:var(--texto); box-shadow:inset 0 0 0 1px var(--borde)}
.pm-cupo.llena{background:var(--fuerte); color:#fff; box-shadow:none}
.pm-cupo.gris{background:transparent; color:var(--texto-2)}
.pm-semana-dia.activo{background:var(--fuerte) !important; border-color:var(--fuerte) !important}
.pm-semana-dia.activo span, .pm-semana-dia.activo b, .pm-semana-dia.activo .pm-semana-n{color:#fff}
.pm-semana-dia.hoy b, .pm-cal-dia.hoy h3 b{color:var(--fuerte); text-decoration:underline; text-underline-offset:3px}
.pm-semana-dia.activo.hoy b{color:#fff}   /* hoy y elegido: el número quedaba negro sobre negro (11-nov-2026) */
.pm-cal-dia.hoy h3{border-bottom-color:var(--fuerte)}
.pm-cal-clase.llena{background:#fff !important}

/* El total de la ocupación: blanco, como el resumen de Alumnos (el verde era del diseño de VIBE) */
.pm-quedo:not(.negativo){background:#fff; color:var(--texto); border:1px solid var(--borde)}

/* Campos y avisos */
input:not([type=checkbox]):not([type=radio]), select, textarea{background:#fff}
.pm-aviso.atencion{background:#F3E2D2; color:#6E3418}
.modal{background:#FBF8F3}

/* La página pública */
.telefono{background:var(--fondo); box-shadow:none}
.portada{background:var(--fondo)}
/* El logo, abajo de la portada y a la izquierda del nombre (Sebastian, 10-nov-2026) */
.presentacion.con-logo{display:flex; align-items:center; gap:20px}
.presentacion.con-logo .logo{flex:0 0 auto; width:104px; height:104px; max-width:none; max-height:none}
.presentacion-texto{min-width:0}
.pie{background:var(--fondo-2)}
.pie .acceder{background:#D2C4AC; color:var(--texto); border:1px solid #BFAE92}   /* la arena del logo */
.bloque{border-bottom-color:var(--linea-arena)}
.hora{background:#fff; color:var(--texto); box-shadow:inset 0 0 0 1px var(--borde)}

/* Entrar, «me olvidé» y la contraseña (el módulo de ingreso: ING_HOJA_EXTRA) */
.ing-caja{background:#FBF8F3; box-shadow:0 0 0 1px var(--linea-arena)}

/* La página del alumno (entrar, registrarse) y el perfil del instructor (11-nov-2026) */
.cta-registro{margin-top:4px !important}
.cta-demo{margin-top:22px}
.cta-demo p{margin:0 0 6px}
.cta-demo p:last-child{margin:0}
.cta-error{color:var(--rojo) !important; margin:-10px 0 14px !important}
.cta-opcional{font-weight:400; color:var(--texto-2)}
.pm-ins-hola{margin:4px 0 14px; font-size:var(--t-grande)}
.pm-ins-cupo{display:flex; align-items:center; gap:12px; margin:0 0 14px; color:var(--texto-2)}
.pm-ins-nombres{margin:0; padding:0 0 0 26px; font-size:var(--t-grande); line-height:1.7}
.pm-ins-mes{display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; text-align:center; gap:10px; margin:0 0 16px}
.pm-ins-mes .boton{margin:0; padding:0; font-size:var(--t-titulo)}
.pm-ins-titulo{margin:0 0 16px; font-size:var(--t-titulo)}
.pm-ins-numeros{margin-bottom:8px}
.pm-ins-numeros b{font-size:30px}
.pm-prof-acceso{color:var(--texto-2)}

/* Sí / No, la casilla de novedades y los planes para elegir (11-nov-2026): en el panel, en la página del alumno y en sus
   pantallas de entrar y registrarse (ingreso.css le pone ancho completo a todo input: acá se le saca a radios y casillas) */
.pm-sino{display:flex; gap:10px; margin:0 0 16px}
.pm-sino label{flex:1 1 0; display:flex; align-items:center; gap:10px; min-height:48px; margin:0 !important; padding:0 14px; background:#fff;
  border:1px solid var(--borde); border-radius:var(--r); cursor:pointer; font-weight:400 !important; font-size:var(--t-base) !important}
.pm-sino label:has(input:checked){border-color:var(--fuerte)}
.pm-sino input, .cta-check input, .portal-chip-elige input, .ing .pm-elige input{width:22px !important; min-height:0 !important; height:22px; margin:0 !important; flex:none; accent-color:var(--fuerte)}
.pm-sino-campo{margin:0; padding:0; border:0; min-width:0}
.pm-sino-campo legend{margin:0 0 4px; padding:0; font-size:15px; font-weight:600}
.cta-check{display:flex !important; align-items:flex-start; gap:12px; margin:0 0 18px !important; font-size:var(--t-base) !important; font-weight:400 !important; cursor:pointer}
.cta-check span{display:flex; flex-direction:column}
.cta-check small{color:var(--texto-2); font-size:var(--t-chico)}
.ing .pm-elige{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; margin:0 0 10px; background:#fff; border:1px solid var(--borde);
  border-radius:var(--r); cursor:pointer; font-size:var(--t-base); font-weight:400}
.ing .pm-elige:has(input:checked){border-color:var(--fuerte)}
.ing .pm-elige b{display:block}
.ing .pm-elige span span{color:var(--texto-2)}

/* Para atender (11-nov-2026): dos botones con su globito, arriba del inicio */
.pm-atender{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 20px}
.pm-atender .boton{width:auto; margin:0; padding:0 18px; gap:10px}
.pm-globito{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 8px; border-radius:999px;
  background:var(--naranja); color:#fff; font-size:var(--t-chico); font-weight:700 !important; line-height:1}
.pm-contacto{margin:0 0 14px}
.pm-aviso-texto{margin:0; font-size:var(--t-base); color:var(--texto)}

/* La página pública: «Acceder al club» (arena, como el logo) y «Registrarme» (blanco), uno al lado del otro */
.entrar-club{display:flex; gap:10px; padding-top:0}
.entrar-club .boton{flex:1 1 0; margin:0}
.entrar-club .acceder-club{background:#D2C4AC !important; border-color:#BFAE92 !important}
.cta-personal{font-size:var(--t-chico)}

/* La agenda del profesor (11-nov-2026): las suyas, como siempre; las de otros, apagadas y sin abrir */
.pm-cal-clase.pm-otra, .pm-clase.pm-otra{background:transparent !important; color:var(--texto-2); cursor:default}
.pm-cal-clase.pm-otra:hover, .pm-clase.pm-otra:hover{border-color:var(--borde) !important}
.pm-otra b{font-weight:400 !important}
#profesores .pm-campo + .pm-campo{margin-top:18px}
.pm-sino + .pista{display:block; margin-top:-8px}
button.ajuste{width:100%; background:none; border:0; border-bottom:1px solid var(--linea); font:inherit; color:inherit; cursor:pointer; text-align:left}
.pm-cal-clase.pm-vacante, .pm-clase.pm-vacante{border-style:dashed !important; border-color:var(--fuerte) !important}
.pm-ins-soltar{margin-top:18px; padding-top:14px; border-top:1px solid var(--linea-arena)}
.pm-ins-soltar .boton{width:auto; padding:0 18px}
.pm-ins-por{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.pm-ins-por .boton{width:auto; margin:0; min-height:44px; padding:0 14px}
.pm-ins-por .boton.activo{border-color:var(--fuerte) !important; box-shadow:inset 0 0 0 1px var(--fuerte) !important}

/* En el teléfono, el título más chico: la letra es ancha */
@media (max-width:700px){
  .pm-area-apps{grid-template-columns:repeat(2, minmax(0, 160px)); gap:12px}
  .pm-inicio-logo{width:min(160px, calc((100% - 12px) / 2)); margin-bottom:18px}
}
@media (max-width:480px){
  .pm-app, .pm-sub.solo, .pm-marca{font-size:24px !important}
}

/* Más aire entre el logo (o el ícono) y el nombre de la pantalla (Sebastian, 11-nov-2026: «muy pegado»). */
.pm-cabeza-izq .pm-icono + .pm-titulo{margin-left:10px}

/* EL CALENDARIO EN GRILLA (Sebastian, 11-nov-2026): en la compu, la primera columna es el horario («8» y abajo «a 9») y después
   Lunes a Domingo; cada clase con el profesor y, abajo, un cuadradito por lugar que se pinta cuando se ocupa. Llena, un fondo apenas
   más oscuro. En el teléfono, el día elegido con las mismas dos líneas. */
.pm-grilla{display:grid; grid-template-columns:72px repeat(7, minmax(0,1fr)); gap:6px; align-items:stretch}
.pm-grilla-fila{display:contents}
.pm-grilla-cab > span{padding:6px 6px 8px; border-bottom:2px solid var(--linea-arena); color:var(--texto-2); font-weight:600}
.pm-grilla-cab .pm-grilla-dia b{color:var(--texto); font-size:var(--t-grande)}
.pm-grilla-cab .pm-grilla-dia small{display:block; font-size:var(--t-mini)}
.pm-grilla-cab .pm-grilla-dia.hoy{border-bottom-color:var(--naranja)}
.pm-grilla-hora{display:flex; flex-direction:column; justify-content:center; padding:4px 6px; color:var(--texto)}
.pm-grilla-hora b{font-size:var(--t-grande); line-height:1.1}
.pm-grilla-hora small{color:var(--texto-2); font-size:var(--t-chico)}
.pm-grilla-cab .pm-grilla-hora{justify-content:flex-end}
.pm-grilla-celda{display:flex; flex-direction:column; gap:4px; min-width:0}
.pm-grilla-celda.hoy{background:rgba(255,255,255,.35)}
.pm-grilla .pm-cal-clase{display:flex; flex-direction:column; gap:6px; padding:8px; min-height:100%}
.pm-cal-clase.llena, .pm-clase.pm-clase-lug.llena{background:#F1E9DC !important}   /* llena: un poco más oscura, sutil */
.pm-clase-lug .pm-clase-info b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Los cuadraditos: vacíos, como casilleros; ocupados, pintados */
.pm-lugares{display:flex; flex-wrap:wrap; gap:3px; margin-top:4px}
.pm-lugares i{display:block; width:14px; height:14px; border:1px solid var(--linea-arena); background:#fff}
.pm-lugares i.ocupado{background:#B9A88C; border-color:#A89676}
.pm-lugares-espera, .pm-lugares-susp{display:block; margin-top:2px; color:var(--texto-2); font-size:var(--t-mini)}
.pm-clase.pm-clase-lug{grid-template-columns:auto minmax(0,1fr)}
.pm-clase.pm-clase-lug .pm-lugares i{width:18px; height:18px}
.pm-clase-info > .pm-lugares{display:flex !important; white-space:normal !important; overflow:visible !important}
.pm-grilla .pm-cal-clase{text-align:left; align-items:stretch}

/* ALUMNOS COMO TABLA (Sebastian, 11-nov-2026: «como la de prospectos en negocio.»). «Agregar alumno» a la izquierda, después el
   buscador y un filtro por columna; la tabla con el título fijo arriba y el nombre fijo a la izquierda. Bajo 700 px, fichas. */
.pm-al-barra{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin:0 0 12px}
.pm-al-agregar{min-height:48px; align-self:flex-end}
.pm-al-campo{display:flex; flex-direction:column; gap:4px; min-width:0}
.pm-al-campo label{font-size:var(--t-chico); color:var(--texto-2)}
.pm-al-buscar{flex:1 1 320px}
.pm-al-filtros{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px 14px; margin:0 0 14px}
.pm-al-cuenta{margin:0 0 8px; color:var(--texto-2)}
.pm-al-grilla{max-height:70vh; overflow:auto; overscroll-behavior:contain; background:#fff; border:1px solid var(--linea)}
.pm-al-tabla{border-collapse:separate; border-spacing:0; min-width:100%}
.pm-al-tabla th{position:sticky; top:0; z-index:2; padding:10px 12px; background:var(--fondo-2); color:var(--texto); font-weight:600;
  text-align:left; white-space:nowrap; border-bottom:1px solid var(--linea-arena)}
.pm-al-tabla td{padding:9px 12px; border-bottom:1px solid var(--linea); vertical-align:top; background:#fff}
.pm-al-tabla td.num{text-align:center}
.pm-al-tabla tbody tr{cursor:pointer}
.pm-al-tabla tbody tr:hover td{background:var(--suave)}
.pm-al-tabla .principal{position:sticky; left:0; z-index:1; min-width:200px; font-weight:600; box-shadow:1px 0 0 var(--linea)}
.pm-al-tabla th.principal{z-index:3}
.pm-al-tabla td.principal a{color:var(--texto); text-decoration:none}
.pm-al-tabla small{color:var(--texto-2)}
.pm-al-tabla tr.baja td{color:var(--texto-2)}
.pm-gris{color:var(--texto-2)}
.pm-tipo.charlar{color:var(--rojo)}
@media (max-width:1000px){ .pm-al-filtros{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:700px){
  .pm-al-barra{flex-direction:column; align-items:stretch}
  .pm-al-buscar{flex:none}
  .pm-al-filtros{grid-template-columns:minmax(0,1fr)}
  .pm-al-grilla{max-height:none; overflow:visible; background:transparent; border:0}
  .pm-al-tabla, .pm-al-tabla tbody, .pm-al-tabla tr, .pm-al-tabla td{display:block}
  .pm-al-tabla thead{display:none}
  .pm-al-tabla tr{margin:0 0 10px; padding:10px 12px; background:#fff; border:1px solid var(--linea)}
  .pm-al-tabla td{display:flex; gap:10px; padding:3px 0; border:0; background:transparent !important}
  .pm-al-tabla td::before{content:attr(data-rot); flex:0 0 130px; color:var(--texto-2)}
  .pm-al-tabla td.principal{position:static; display:block; padding-bottom:6px; font-size:var(--t-grande); box-shadow:none}
  .pm-al-tabla td.principal::before{content:none}
  .pm-al-tabla td.num{text-align:left}
}
.pm-al-agregar{background:#D2C4AC !important; border-color:#BFAE92 !important; color:var(--texto) !important}   /* la arena del logo: resalta */
.pm-al-tabla td[data-rot="Teléfono"]{white-space:nowrap}
@media (max-width:700px){
  .pm-al-tabla td{display:block !important; text-align:left !important; padding-left:130px !important; position:relative}
  .pm-al-tabla td::before{position:absolute; left:0; top:3px; width:122px}
  .pm-al-tabla td.principal{padding-left:0 !important}
}

/* LA FICHA DEL ALUMNO (Sebastian, 11-nov-2026): arriba el resumen (clasificación, estado, plan); después «Acciones», todas juntas;
   las clases; y lo que sabemos de él. Cada sección con su borde y el título con fondo arena, como en la página del alumno. */
.pm-al-resumen{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px; padding:12px 14px; background:#fff; border:1px solid var(--linea)}
.pm-chip-al{display:inline-block; padding:3px 12px; border:1px solid var(--linea-arena); background:var(--suave); font-weight:600}
.pm-chip-al.frecuente, .pm-chip-al.activo{color:var(--verde)}
.pm-chip-al.inactivo, .pm-chip-al.baja{color:var(--rojo)}
.pm-al-resumen-plan{flex-basis:100%}
.pm-panel.pm-al-seccion{background:#fff !important; border:1px solid var(--linea-arena) !important; margin:0 0 14px !important}
.pm-al-seccion > h2, .pm-al-seccion > summary, .pm-al-seccion[open] > summary, .pm-al-seccion > summary:hover{background:var(--fondo-2) !important; padding:12px 16px !important}
.pm-al-seccion > .pm-panel-cuerpo{padding:12px 16px !important}
.pm-al-accion{padding:10px 0; border-bottom:1px solid var(--linea)}
.pm-al-accion:last-child{border-bottom:0}
.pm-al-accion > .rot{display:block; margin:0 0 6px; color:var(--texto-2); font-size:var(--t-chico)}
.pm-al-accion .pm-acciones{margin:0}
details.pm-al-sub{padding:10px 0; border-bottom:1px solid var(--linea)}
details.pm-al-sub > summary{cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center}
details.pm-al-sub > .pm-panel-cuerpo{padding:6px 0 0}
/* La flechita al final de cada fila: se toca y abre la ficha (Sebastian, 11-nov-2026: «no está claro si se pueden tocar») */
.pm-al-tabla .flecha{width:28px; text-align:center; color:var(--texto-2); font-size:var(--t-grande); padding-left:4px; padding-right:8px}
.pm-al-tabla tbody tr:hover .flecha{color:var(--texto)}
@media (max-width:700px){
  .pm-al-tabla tr{position:relative}
  .pm-al-tabla td.flecha{position:absolute !important; right:10px; top:10px; padding:0 !important; width:auto}
  .pm-al-tabla td.flecha::before{content:none}
}

/* PROFESORES (Sebastian, 11-nov-2026): la lista, solo los nombres (cada uno abre su ficha); la ficha, como la del alumno */
.pm-prof-arriba{margin:0 0 14px}
.pm-prof-lista{margin:0; padding:0; list-style:none}
.pm-prof-lista li{border-bottom:1px solid var(--linea)}
.pm-prof-lista li:last-child{border-bottom:0}
.pm-prof-lista a{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 12px; min-height:52px; padding:8px 0; color:var(--texto); text-decoration:none}
.pm-prof-lista a span{grid-column:1; color:var(--texto-2); font-size:var(--t-chico)}
.pm-prof-lista a i{grid-column:2; grid-row:1 / span 2; font-style:normal; font-size:var(--t-grande); color:var(--texto-2)}
.pm-prof-lista a:hover b{text-decoration:underline}
.pm-desde-hasta{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin:10px 0 14px}
.pm-desde-hasta label{display:flex; flex-direction:column; gap:4px; color:var(--texto-2); font-size:var(--t-chico)}
.pm-desde-hasta input{min-height:44px; padding:0 10px; border:1px solid var(--linea); font:inherit; color:var(--texto); background:#fff}
.pm-prof-datos{margin:0}
.pm-prof-datos div{display:flex; flex-wrap:wrap; gap:4px 12px; padding:6px 0; border-bottom:1px solid var(--linea)}
.pm-prof-datos div:last-child{border-bottom:0}
.pm-prof-datos dt{min-width:140px; color:var(--texto-2)}
.pm-prof-datos dd{margin:0; overflow-wrap:anywhere}

/* LA OCUPACIÓN INTERACTIVA (Sebastian, 11-nov-2026): el período, un número grande, «Ver por», los filtros y un solo gráfico */
.oc-periodo{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin:0 0 12px}
.oc-periodo label{display:flex; flex-direction:column; gap:4px; color:var(--texto-2); font-size:var(--t-chico)}
.oc-periodo input[type=date]{min-height:44px; padding:0 10px; border:1px solid var(--linea); font:inherit; color:var(--texto); background:#fff}
.oc-atajos{display:flex; flex-wrap:wrap; gap:6px; flex-basis:100%}
.oc-atajos .boton{min-height:40px; padding:0 12px}
.oc-atajos .boton.activo, .oc-ver .boton.activo{background:var(--fondo-2) !important; border-color:var(--fuerte) !important}
.oc-grande{display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:0 0 14px; padding:16px; background:#fff; border:1px solid var(--linea-arena)}
.oc-grande .oc-titulo{color:var(--texto-2)}
.oc-grande b{font-size:56px; line-height:1.05}
.oc-ver{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 10px}
.oc-rot{color:var(--texto-2); margin-right:4px}
.oc-ver .boton{min-height:40px; padding:0 12px}
.oc-filtros{margin:0 0 12px; background:#fff; border:1px solid var(--linea)}
.oc-filtros > summary{cursor:pointer; padding:10px 14px; font-weight:600; min-height:44px; display:flex; align-items:center; gap:8px}
.oc-filtros > summary span{color:var(--texto-2); font-weight:400}
.oc-filtros fieldset{border:0; margin:0; padding:6px 14px}
.oc-filtros legend{padding:0; color:var(--texto-2); font-size:var(--t-chico)}
.oc-filtros > .boton{margin:4px 14px 14px}
.oc-chips{display:flex; flex-wrap:wrap; gap:6px}
.oc-chips label{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 10px; border:1px solid var(--linea); background:var(--suave); cursor:pointer}
.oc-chips input{width:18px; height:18px}
.oc-grafico{display:flex; flex-direction:column; gap:2px; margin:0 0 10px; padding:10px 14px; background:#fff; border:1px solid var(--linea)}
.oc-barra{display:grid; grid-template-columns:minmax(110px, 30%) minmax(0,1fr) 54px; grid-template-rows:auto auto; align-items:center; gap:0 10px; padding:6px 0; border-bottom:1px solid var(--linea)}
.oc-barra:last-child{border-bottom:0}
.oc-barra-rot{grid-row:1 / span 2}
.oc-barra-pista{height:16px; background:var(--suave); border:1px solid var(--linea)}
.oc-barra-pista i{display:block; height:100%; background:#B9A88C}
.oc-barra.alta .oc-barra-pista i{background:#8E9E7C}
.oc-barra.baja .oc-barra-pista i{background:#D6B48E}
.oc-barra-pct{text-align:right}
.oc-barra-det{grid-column:2 / span 2; color:var(--texto-2); font-size:var(--t-mini)}
@media (max-width:700px){
  .oc-barra{grid-template-columns:minmax(0,1fr) 54px}
  .oc-barra-rot{grid-row:auto; grid-column:1 / -1}
  .oc-barra-det{grid-column:1 / -1}
  .oc-grande b{font-size:48px}
}

/* «Reglas del club» (11-nov-2026): el link del pie, en su propia línea arriba de «Creado por», y la página para leerlas. */
.credito :is(.pm-pie-reglas,.pm-pie-vercomo,.pm-pie-soporte){flex-basis:100%;justify-content:center;color:var(--texto) !important;font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.credito :is(.pm-pie-reglas,.pm-pie-vercomo,.pm-pie-soporte) svg{width:22px;height:22px;flex:none}
.pm-reglas-lista{margin:14px 0 20px;padding-left:22px;display:grid;gap:12px;line-height:1.5}

/* El calendario, uno para todos (11-nov-2026): lo propio (la clase del alumno, las del profesor) se resalta con un borde
   más grueso y un fondo apenas más cálido; un renglón dice «Tu clase», «Reservada», «En espera»… */
.pm-cal-clase.pm-mia, .pm-clase.pm-mia{border:2px solid var(--fuerte) !important; background:#F6EEE2 !important}
.pm-clase-nota{display:block; font-size:var(--t-mini); font-weight:700; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pm-sin-enlace{cursor:default}
.pm-sin-enlace:hover{border-color:var(--borde) !important}
.pm-lugares-grande i{width:22px; height:22px}
.pm-mia-panel{border:2px solid var(--fuerte) !important}
.pm-resumen-alumnos .pm-resumen-fecha b{font-size:var(--t-grande) !important; line-height:1.2}

/* El código del plan (11-nov-2026): corto, en mayúsculas, como una etiqueta */
.pm-codigo{display:inline-block; min-width:2.6em; padding:1px 6px; border:1px solid var(--linea-arena); background:#fff;
  font-weight:700; font-size:var(--t-chico); text-align:center; letter-spacing:.02em; white-space:nowrap}

/* La tabla de alumnos, un renglón por alumno (Sebastian, 11-nov-2026): nada se parte; lo largo se corta con «…» */
.pm-al-tabla td, .pm-al-tabla th{white-space:nowrap}
.pm-al-tabla td.principal{max-width:220px; overflow:hidden; text-overflow:ellipsis}
.pm-al-tabla td.largo{max-width:220px; overflow:hidden; text-overflow:ellipsis}
.pm-al-tabla td{vertical-align:middle}
@media (max-width:700px){
  .pm-al-tabla td, .pm-al-tabla td.principal, .pm-al-tabla td.largo{white-space:normal; max-width:none}
}

/* Los grupos que se despliegan: sin subrayar (Sebastian, 11-nov-2026: «ahora está claro que es un grupo que se puede
   desplegar»). Subrayado queda solo lo que lleva a otro lado (teléfono, email, enlaces). */
details.pm-desplegable > summary{cursor:pointer}
/* Una tabla chica: «Altas y bajas de cada mes» */
.pm-tabla-chica{border-collapse:collapse; width:100%; max-width:520px; background:#fff}
.pm-tabla-chica th, .pm-tabla-chica td{padding:8px 12px; border-bottom:1px solid var(--linea); text-align:left; white-space:nowrap}
.pm-tabla-chica th{background:var(--fondo-2); font-weight:600}
.pm-tabla-chica .num{text-align:right}

/* Planes, un renglón por plan (11-nov-2026): el plan y sus botones; la descripción se despliega */
.pm-planes-lista{list-style:none; margin:0; padding:0}
.pm-plan-fila{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px; padding:10px 0; border-bottom:1px solid var(--linea)}
.pm-plan-fila:last-child{border-bottom:0}
.pm-plan-fila.baja{color:var(--texto-2)}
.pm-plan-desc{flex:1 1 260px; min-width:0}
.pm-plan-desc > summary{cursor:pointer; min-height:44px; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px}
.pm-plan-desc > summary b{text-decoration:underline; text-underline-offset:4px}
.pm-plan-datos{list-style:none; margin:8px 0 4px; padding:0; display:grid; gap:4px}
.pm-plan-datos li{display:flex; gap:12px}
.pm-plan-datos li span{flex:0 0 150px; color:var(--texto-2)}
.pm-plan-fila .pm-usuario-botones{flex:0 0 auto}
.pm-boton-chico{min-height:36px !important; padding:0 10px !important; width:auto !important; display:inline-flex !important; margin-left:8px}
.pm-ficha-estado{margin-top:12px}
.pm-ficha-estado .pm-chip-al{align-self:center}
/* Los números de arriba, en blanco como siempre (Sebastian, 11-nov-2026: «están en un color beige») */
.pm-numeros > div{background:#fff !important; border:1px solid var(--linea)}

/* El club: cada teléfono con «WhatsApp Sí / No» a la derecha (11-nov-2026) */
.pm-tel-wa{display:grid !important; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:end}
.pm-tel-wa > .pista, .pm-tel-wa > .error{grid-column:1 / -1}
.pm-sino-chico{border:0; margin:0; padding:0; display:flex; gap:10px; align-items:center; min-height:48px}
.pm-sino-chico legend{float:left; margin-right:6px; color:var(--texto-2); font-size:var(--t-chico)}
.pm-sino-chico label{display:inline-flex; gap:4px; align-items:center; cursor:pointer}
.pm-sino-chico{flex-wrap:wrap; min-height:0; gap:2px 10px}
.pm-sino-chico legend{float:none; width:100%; margin:0 0 6px; padding:0; font-size:var(--t-base); color:var(--texto)}
.pm-sino-chico label{min-height:44px}

/* EL CALENDARIO, con un botón por clase (11-nov-2026): en la compu aparece al pasar el mouse (o con el teclado) sobre la clase;
   en el teléfono queda a la vista, a la derecha. La llena ya no cambia de color: los cuadraditos pintados lo dicen. */
.pm-cal-clase.llena:not(.pm-mia), .pm-clase.pm-clase-lug.llena:not(.pm-mia){background:#fff !important}
.pm-con-accion{position:relative}
.pm-con-accion > .pm-cal-abrir{display:block; color:inherit; text-decoration:none; min-width:0}
.pm-grilla .pm-con-accion > .pm-cal-abrir{display:flex; flex-direction:column; gap:6px}
.pm-cal-accion form{margin:0}
.pm-cal-accion .boton{width:auto !important; min-height:40px; margin:0; padding:0 12px; white-space:nowrap}
.pm-cal-compu .pm-cal-accion{position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(255,255,255,.88)}
.pm-cal-compu .pm-con-accion:hover .pm-cal-accion, .pm-cal-compu .pm-con-accion:focus-within .pm-cal-accion{display:flex}
.pm-cal-tel .pm-clase.pm-con-accion{display:flex; align-items:center; gap:10px}
.pm-cal-tel .pm-con-accion > .pm-cal-abrir{flex:1 1 auto; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:center}
.pm-cal-tel .pm-cal-accion{flex:0 0 auto}
/* La leyenda: la muestra de «Tus clases» */
.pm-leyenda{display:flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--texto-2)}
.pm-muestra-mia{display:inline-block; width:22px; height:16px; border:2px solid var(--fuerte); background:#F6EEE2; flex:none}
/* Las reglas, con la letra un poco más grande (Sebastian, 11-nov-2026) */
.pm-reglas-lista{font-size:calc(var(--t-base) + 2px)}
.pm-clase.pm-clase-lug.llena:not(.pm-mia){background:transparent !important}

/* El selector de columnas (11-nov-2026): un botón arriba de la tabla; se despliega con una casilla por columna */
.pm-columnas{margin:0 0 10px}
.pm-columnas > summary{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--borde); background:#fff;
  cursor:pointer; list-style:none}
.pm-columnas > summary::-webkit-details-marker{display:none}
.pm-columnas-lista{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin-top:8px; padding:10px 12px; background:#fff; border:1px solid var(--linea)}
.pm-columnas-lista label{display:inline-flex; align-items:center; gap:6px; min-height:40px; cursor:pointer}
.pm-columnas-lista .boton{width:auto; min-height:40px; margin:0}

/* Reglas en renglones chicos (11-nov-2026, Sebastian: «compactá todo»): el rótulo a la izquierda, el control chico a la
   derecha, una línea fina entre renglones. Los Sí/No y las opciones, en desplegables angostos; los números, de 3 cifras. */
.pm-reglas-form{display:flex; flex-direction:column; gap:0}
.pm-regla{display:flex; align-items:center; justify-content:space-between; gap:10px 18px; padding:10px 0; border-bottom:1px solid var(--linea); flex-wrap:wrap}
.pm-regla:last-child{border-bottom:0}
.pm-regla > label{flex:1 1 140px; margin:0; font-weight:400; font-size:var(--t-base)}
.pm-regla .busca-caja{width:190px; flex:0 0 auto}
.pm-regla input.pm-num{width:5.5ch; min-width:76px; min-height:var(--alto-boton); text-align:center; flex:0 0 auto}
.pm-regla-par{display:flex; gap:8px; align-items:center; flex:0 0 auto}
.pm-regla-par .busca-caja{width:190px}
.pm-regla-ancha .busca-caja{width:230px} /* «Esa y la siguiente» (recuperar, 12-nov-2026) */

/* El tamaño de la letra, a la izquierda de la Ayuda (11-nov-2026) */
.pm-letra{display:inline-flex; gap:4px}
.pm-letra .pm-boton-cabeza{min-width:44px; padding:0 8px; font-weight:800; font-size:18px; line-height:1}
.pm-letra .pm-boton-cabeza small{font-size:14px; margin-left:1px}
.pm-letra .pm-boton-cabeza b{font-size:16px; margin-left:1px}
.pm-letra .pm-boton-cabeza:disabled{opacity:.4; cursor:default}
@media (max-width:420px){ .pm-letra .pm-boton-cabeza{min-width:40px; padding:0 6px} }
/* «No mandar»: el número no hace falta */
.pm-regla-par:has(option[value="no"]:checked) input.pm-num{visibility:hidden}
.pm-regla .busca-caja:has(select[name^="prof_ven"]), .pm-regla .busca-caja:has(select[name="precios_publicos"]){width:110px}
@media (max-width:520px){ .pm-regla .busca-caja, .pm-regla-par .busca-caja{width:180px} .pm-regla > .busca-caja, .pm-regla-par{margin-left:auto} }

/* El club (11-nov-2026, Sebastian: «aprovechá mejor el espacio»): cada campo del ancho de lo que lleva, uno al lado del otro */
.pm-club-form{display:flex; flex-wrap:wrap; gap:16px 18px; align-items:flex-start}
.pm-club-form > .pm-campo{margin:0}
.pm-club-form > .c-largo{flex:1 1 380px}
.pm-club-form > .c-medio{flex:1 1 260px}
.pm-club-form > .c-tel{flex:1 1 300px}
.pm-club-form > .c-entero{flex:1 1 100%}
.pm-club-form > .c-chico{flex:0 0 auto}
body .pm-club-form > .c-chico input{width:96px; text-align:center}
.pm-club-form #c-bajada{max-width:420px}
.pm-wa-chico .busca-caja{width:104px}
.pm-wa-chico > label, .pm-tel-wa > div > label{display:block; margin:0 0 6px; font-weight:400}
.pm-club-form .pm-tel-wa{align-items:start}
/* ⭐ 12-nov-2026 (Sebastian): tres columnas iguales; los links, de punta a punta. Bajo 700 px, una sola. */
.pm-club-form{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 18px}
.pm-club-form > .c-entero{grid-column:1 / -1}
.pm-club-form #c-bajada{max-width:none}
.pm-club-numeros{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.pm-club-numeros > .pm-campo{margin:0}
body .pm-club-numeros input{width:84px; text-align:center}
.pm-con-unidad{display:inline-flex; align-items:center; gap:8px}
@media (max-width:700px){ .pm-club-form{grid-template-columns:minmax(0,1fr)} }

/* Estadísticas · Altas y bajas (11-nov-2026): verde arriba, rojo abajo, la línea del total aparte (sin dos escalas).
   Verde #23875A y rojo #C2432F: pasan el validador de colores (también para daltónicos, con la posición arriba/abajo). */
.ab-periodo select{min-width:180px}
.ab-periodo .busca-caja{width:200px}
.ab-numeros .ab-alta b{color:#23875A}
.ab-numeros .ab-baja b{color:#C2432F}
.ab-numeros > div{background:#fff; border:1px solid var(--linea)}
.ab-grafico svg{display:block; width:100%; height:auto; overflow:visible}
.ab-grafico .ab-reja{stroke:var(--linea); stroke-width:1}
.ab-grafico .ab-cero{stroke:var(--texto-2); stroke-width:1.5}
.ab-grafico .ab-eje{fill:var(--texto-2); font-size:15px}
.ab-grafico .ab-valor{fill:var(--texto); font-size:16px; font-weight:700}
.ab-grafico .ab-linea{fill:none; stroke:var(--fuerte); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.ab-grafico .ab-punto circle{fill:var(--fuerte); stroke:#fff; stroke-width:2}
.ab-grafico .ab-alta{fill:#23875A}
.ab-grafico .ab-baja{fill:#C2432F}
.ab-grafico .ab-toque{fill:transparent}
.ab-grafico .ab-mes:hover .ab-toque, .ab-grafico .ab-punto:hover .ab-toque{fill:rgba(31,28,26,.05)}
.ab-leyenda{display:flex; align-items:center; gap:8px; margin:0 0 6px; color:var(--texto-2)}
.ab-muestra{display:inline-block; width:14px; height:14px; border-radius:3px}
.ab-muestra.alta{background:#23875A}
.ab-muestra.baja{background:#C2432F; margin-left:12px}
.ab-tabla td.num, .ab-tabla th.num{text-align:right}
.ab-angosto{display:none}
@media (max-width:700px){ .ab-numeros{grid-template-columns:repeat(2, minmax(0,1fr))} .ab-ancho{display:none} .ab-angosto{display:block} }
.ab-grafico .ab-anio{font-size:13px}
.ab-angosto .ab-eje{font-size:17px} .ab-angosto .ab-valor{font-size:18px} .ab-angosto .ab-anio{font-size:14px}
/* El alias de Mercado Pago (11-nov-2026) */
.pm-alias{margin:12px 0; padding:12px 14px; background:#fff; border:1px solid var(--linea); font-size:17px; line-height:1.4}
.pm-alias h3{margin:0 0 6px; font-size:20px; font-weight:400}
.pm-alias p{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0}
.pm-alias b{font-size:21px; letter-spacing:.3px}
.pm-alias .pm-copiar{width:auto; min-height:40px; padding:0 14px; margin:0}
/* Usuarios con niveles (11-nov-2026): la tabla de qué puede cada nivel al costado; cada usuario, un desplegable chico */
.ing-con-costado{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:18px; align-items:start}
.ing-con-costado .ing-costado{order:2; position:sticky; top:12px}
.ing-con-costado .ing-centro{order:1; min-width:0}
.pm-niveles th, .pm-niveles td{padding:7px 8px; font-size:16px; white-space:normal}
.pm-niveles thead th{font-size:15px; text-align:center}
.pm-niveles tbody th{text-align:left; font-weight:400}
.pm-niveles td{text-align:center; color:var(--texto-2)}
.pm-niveles td.si{color:var(--texto); font-weight:800}
.ing-form.ing-form-nivel{display:flex !important; flex-direction:row !important; flex-wrap:wrap; justify-content:flex-start !important; align-items:flex-end !important; gap:10px 14px}
.ing-form-nivel .ing-nivel{margin:0 !important}
.ing-nivel label{display:block; margin:0 0 6px; font-weight:400}
.ing-nivel .busca-caja{width:230px}
.ing-form-nivel .ing-boton{width:auto; margin:0}
/* En una columna, la tabla de niveles va DESPUÉS de la lista (auditoría B-21: en el teléfono había que deslizar 3.000 px para invitar). */
@media (max-width:900px){ .ing-con-costado{grid-template-columns:minmax(0,1fr)} .ing-con-costado .ing-costado{order:2; position:static} }
/* El desplegable y su botón, a la misma altura (Sebastian, 11-nov-2026: «el botón Guardar está desalineado»): el campo del
   buscador heredaba el margen de abajo de los campos del ingreso. */
.ing-form .busca-caja input{margin:0 !important}
.ing-form-nivel .busca-caja input, .ing-form-nivel .ing-boton{min-height:48px; height:48px}
.ing-form-nivel .ing-boton{padding:0 20px}

/* La página pública (11-nov-2026, Sebastian): sin el cartel que Google pone arriba del mapa («Av. Nazca… Open in Maps»): abajo
   ya están los botones para abrir cada mapa. El mapa se corre 80 px para arriba dentro de su caja y el cartel queda afuera. */
.mapa{position:relative; aspect-ratio:4 / 3}
.mapa iframe{position:absolute; left:0; top:-140px; width:100%; height:calc(100% + 140px) !important; aspect-ratio:auto}
/* «Acceso para personal autorizado»: un botón como los demás, con la arena del logo, y la letra del tamaño de la página. */
.pie .acceder{font-size:20px; padding:0 26px; min-height:52px; display:inline-flex; align-items:center; font-weight:400}
@media (max-width:820px) and (min-width:701px){ .pm-area-apps{grid-template-columns:repeat(3, 170px)} }
/* «Pagos pendientes» y «Lista de espera», del mismo ancho (Sebastian, 11-nov-2026) */
.pm-atender{display:grid !important; grid-template-columns:repeat(2, 200px); justify-content:center}
.pm-atender .boton{width:100% !important; justify-content:center}
@media (max-width:460px){ .pm-atender{grid-template-columns:repeat(2, minmax(0, 1fr))} .pm-atender .boton{padding:0 10px} }

/* El inicio (11-nov-2026, Sebastian): «Pagos pendientes» y «Lista de espera» abajo de las tarjetas, con una línea arriba; el título
   del portal, centrado; la letra y la Ayuda, adentro del engranaje. */
.pm-atender{margin:24px auto 0 !important; padding-top:22px; border-top:1px solid var(--linea-arena); max-width:722px}
.pm-cabeza-inicio{display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center}
.pm-cabeza-inicio .pm-cabeza-izq{grid-column:2; justify-content:center; text-align:center}
.pm-cabeza-inicio .pm-cabeza-der{grid-column:3; justify-self:end; margin-left:0}
.ajuste-letra{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:default}
.ajuste-letra .pm-letra .pm-boton-cabeza{min-height:44px}
@media (max-width:460px){ .pm-atender .boton{font-size:17px; white-space:nowrap; gap:6px} .pm-atender{gap:8px} }

/* ───── Arreglos de la auditoría del 11-nov-2026 (12-nov-2026) ───── */
/* M-7: con la letra agrandada (zoom en <html>), lo que se mide contra la pantalla se multiplica por el zoom: la ventana del engranaje
   y la Ayuda quedaban más altas que el teléfono y «Cerrar sesión» o «Entendido» no se alcanzaban. js/letra.js pone --zoom. */
.modal{max-height:calc(90vh / var(--zoom, 1))}
@media (max-width:700px){ .modal{height:calc(100vh / var(--zoom, 1)); height:calc(100dvh / var(--zoom, 1)); max-height:none} }
/* M-6: las tablas chicas (niveles de Usuarios, Altas y bajas, Sin pagar) en el teléfono pasan a fichas CON rótulo (data-l,
   css/panel.css): arriba lo principal, abajo cada dato con su nombre. B-12: sin «nowrap», «Sin pagar» ya no se sale de costado. */
@media (max-width:700px){
  .pm-tabla-chica{max-width:none; background:transparent}
  .pm-tabla-chica th, .pm-tabla-chica td{white-space:normal; border:0}
  .pm-tabla-chica tbody th.principal{display:block; padding:0 0 4px; background:transparent; font-size:var(--t-grande); font-weight:600; text-align:left}
  .pm-tabla-chica tbody td{padding:4px 0}
  .pm-niveles td .v{text-align:right}
}
/* M-8: el calendario de la alumna con la letra agrandada. La tira de días se mide a sí misma (container query: con zoom el ancho
   que le queda es menor) y, si no entra «Lun», queda la inicial; con mucho zoom, el número más chico y las flechas angostas. */
.pm-semana{container-type:inline-size}
@container (max-width:315px){ .pm-semana-dia .pm-dia-resto{display:none} }
@container (max-width:240px){ .pm-semana-dia b{font-size:var(--t-base)} }
@container (max-width:215px){ .pm-semana-dia b{font-size:14px} .pm-semana a.pm-semana-dia{padding-left:0; padding-right:0} }
.pm-semana-dia .pm-dia-resto{font-size:inherit; color:inherit; font-weight:inherit}
/* El botón de la clase: si no le queda lugar al lado (clase llena con «Lista de espera», o la letra agrandada), baja a su renglón. */
.pm-cal-tel .pm-clase.pm-con-accion{flex-wrap:wrap}
.pm-cal-tel .pm-con-accion > .pm-cal-abrir{flex:1 1 210px; min-width:0}
.pm-cal-tel .pm-cal-accion{margin-left:auto}
/* B-13: con la letra agrandada, en el teléfono, nada se sale de costado: los botones de Abonos y el «días antes» de Reglas bajan de
   renglón, los desplegables no pasan del ancho que tienen, y el rótulo de las fichas se angosta antes que el dato. */
.pm-usuario-botones.fila{flex-wrap:wrap}
.pm-usuario-botones.fila > *{flex:1 1 auto}
.pm-plan-fila .pm-usuario-botones{flex:0 1 auto; max-width:100%}
.pm-regla-par{flex-wrap:wrap; max-width:100%}
.pm-regla .busca-caja, .pm-regla-par .busca-caja{max-width:100%}
.ing-nivel{max-width:100%}
.ing-nivel .busca-caja{max-width:100%}
@media (max-width:700px){
  .pm-al-tabla td{padding-left:min(130px, 40%) !important}
  .pm-al-tabla td::before{width:calc(min(130px, 40%) - 8px)}
  .pm-al-tabla td.principal{padding-left:0 !important}
}
/* M-2: «Confirmar el pago» con la forma de pago al lado (en el teléfono, arriba del botón). */
.pm-confirmar-pago{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pm-confirmar-pago .busca-caja{width:210px; max-width:100%}
@media (max-width:700px){ .pm-confirmar-pago{flex-direction:column; align-items:stretch} .pm-confirmar-pago .busca-caja{width:100%} }

/* Los días del horario (12-nov-2026): casillas como botones, varias a la vez */
.pm-dias-elige{display:flex; flex-wrap:wrap; gap:8px}
.pm-dias-elige label{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 14px; border:1px solid var(--linea); border-radius:var(--r); background:#fff; cursor:pointer; font-weight:400}
.pm-dias-elige input{width:20px; height:20px; margin:0; accent-color:var(--fuerte)}
.pm-dias-elige label:has(input:checked){border-color:var(--fuerte); box-shadow:0 0 0 1px var(--fuerte)}
.pm-campo:has(> .pm-dias-elige) > .rot{font-weight:400}

/* La casita del encabezado (12-nov-2026): a la izquierda del engranaje, del mismo tamaño */
.pm-cabeza-der{display:flex; align-items:center; gap:8px}
.pm-casa{padding:0 !important; width:44px; color:var(--fuerte)}

/* Las preguntas frecuentes de la Ayuda del inicio (12-nov-2026): un grupo plegable por tema */
.ayuda-faq-grupo{border-top:1px solid var(--linea); padding:4px 0}
.ayuda-faq-grupo > summary{cursor:pointer; padding:10px 0; font-weight:700; list-style-position:inside}
.ayuda-faq-p{padding:0 0 10px 18px}
.ayuda-faq-p h5{margin:0 0 4px; font-size:inherit; font-weight:700}
.ayuda-faq-p p{margin:0}


/* «Ver como» en el encabezado del inicio (12-nov-2026): a la izquierda del engranaje */
.pm-vercomo-cabeza{position:relative; margin:0}
.pm-vercomo-cabeza > summary{list-style:none; gap:8px; padding:0 14px; cursor:pointer; font-weight:600}
.pm-vercomo-cabeza > summary::-webkit-details-marker{display:none}
.pm-vercomo-cabeza > summary svg{width:22px; height:22px; flex:none}
.pm-vercomo-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:190px; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r); box-shadow:0 6px 18px rgba(0,0,0,.08); padding:6px 0}
.pm-vercomo-menu > a, .pm-vercomo-menu > span{padding:12px 18px; color:var(--texto); text-decoration:none; text-align:left}
.pm-vercomo-menu > a:hover{background:var(--suave)}
.pm-vercomo-menu > .activo{font-weight:700}
/* En el teléfono, el inicio con «Ver como»: el título en su renglón, centrado; abajo «Ver como» y el engranaje */
@media (max-width:700px){
  .pm-cabeza-inicio:has(.pm-vercomo-cabeza){grid-template-columns:1fr; row-gap:8px}
  .pm-cabeza-inicio:has(.pm-vercomo-cabeza) .pm-cabeza-izq{grid-column:1; grid-row:1}
  .pm-cabeza-inicio:has(.pm-vercomo-cabeza) .pm-cabeza-der{grid-column:1; grid-row:2; justify-self:center}
}

/* La página pública (12-nov-2026): íconos chicos con su nombre en vez de botones grandes (Google Maps, Apple Maps, WhatsApp, Llamar…) */
.iconos-pub{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:12px 0 4px}
.ico-pub{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:84px; min-height:76px; padding:10px 4px;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r); color:var(--texto); text-decoration:none; font-size:14px; line-height:1.2; text-align:center}
.ico-pub svg{width:28px; height:28px; color:var(--fuerte)}
.ico-pub:hover{border-color:var(--fuerte)}