/* 17 oct · Zona B (docs/ADMIN-17OCT.md) · modo Pendientes del Horario de Administración, ventana de pendientes del alumno
   (pendientes-alumno.js) y filtro avanzado de la pestaña Pendientes. Marcado nuevo: las reglas sin prefijo valen para las dos
   apariencias (con los tokens de cada una); las de :root[data-diseno="selah"] solo ajustan el vidrio de Selah. */

/* ═════ 1 · modo Pendientes: menú de filtros (donde el modo Horario lleva las capas) ═════ */
.pm-filtros { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.pm-filtros > .capas-ic { width: 16px; height: 16px; color: var(--tinta-3); flex: none; }
.pm-grupo { display: inline-flex; align-items: stretch; border: 1px solid var(--linea-2); border-radius: var(--r-pildora); background: var(--sup); }
.pm-chip, .pm-abrir {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; background: none;
  font: 500 13px/1 var(--f-ui); color: var(--tinta-2); white-space: nowrap; cursor: pointer;
}
.pm-chip .ic { width: 14px; height: 14px; }
.pm-todos { border: 1px solid var(--linea-2); border-radius: var(--r-pildora); background: var(--sup); }
.pm-grupo > .pm-chip { border-radius: var(--r-pildora) 0 0 var(--r-pildora); padding-right: 8px; }
.pm-abrir { padding: 0 8px; border-left: 1px solid var(--linea); border-radius: 0 var(--r-pildora) var(--r-pildora) 0; color: var(--tinta-3); }
.pm-abrir .ic { width: 13px; height: 13px; }
.pm-n { font: 600 11px/1 var(--f-ui); color: inherit; opacity: .8; }
.pm-todos.activo, .pm-grupo.activo { background: var(--acento); border-color: var(--acento); }
.pm-todos.activo, .pm-grupo.activo > .pm-chip, .pm-grupo.activo > .pm-abrir { color: #fff; }
.pm-grupo.activo > .pm-abrir { border-left-color: rgba(255, 255, 255, .35); }
.pm-grupo.parte { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.pm-grupo.parte > .pm-chip { color: var(--acento-texto); }
.pm-abrir.activo { color: var(--acento-texto); }
.pm-chip:focus-visible, .pm-abrir:focus-visible, .pd-solo-op:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
:where(html:not(.puntero-quieto)) .pm-grupo:not(.activo) > :is(.pm-chip, .pm-abrir):hover, :where(html:not(.puntero-quieto)) .pm-todos:not(.activo):hover { background: var(--sup-2); }
/* los elementos de los grupos abiertos: elegido = azul con ✓; sin elegir = blanco (sin tachar: no está excluido) */
.pm-panel .hp-item:not(.activo) span { text-decoration: none; }
.pm-cat-t { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; font: 600 13px/1.2 var(--f-ui); color: var(--tinta); }
.pm-cat-t .ic { width: 15px; height: 15px; color: var(--tinta-3); }
.pm-nota { font: 500 10.5px/1 var(--f-ui); color: var(--tinta-3); }
.hp-item.activo .pm-nota { color: inherit; opacity: .8; }
.pm-resumen { flex: none; font: 600 13px/1.2 var(--f-ui); color: var(--tinta-2); white-space: nowrap; }

/* ═════ 2 · modo Pendientes: las fichas de la rejilla ═════ */
.horario-admin.modo-pendientes .bl-alumno { cursor: pointer; }
:root[data-diseno] .horario-admin .rejilla .bl-alumno.pm-ficha.pn-ok { background: var(--ok-fondo); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
:root[data-diseno] .horario-admin .rejilla .bl-alumno.pm-ficha.pn-todo { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 45%, transparent); color: var(--peligro-texto); }
:root[data-diseno] .horario-admin .rejilla .bl-alumno.pm-ficha.pn-algo { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 55%, transparent); color: var(--aviso-texto); }
/* finanzas: quien debe, en rojo fuerte (el saldo en el filtro) */
:root[data-diseno] .horario-admin .rejilla .bl-alumno.pm-ficha.pn-debe { background: var(--peligro); border-color: var(--peligro); color: #fff; }
:root[data-diseno] .horario-admin .rejilla .bl-alumno.pm-ficha.pn-debe :is(.bl-edad, .bl-nom) { color: #fff; opacity: 1; }
:root[data-diseno] .horario-admin .rejilla .bl-alumno.pm-ficha:is(.pn-todo, .pn-algo) .bl-edad { color: inherit; opacity: .75; }
.pm-simbolos { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.pm-sim { display: inline-grid; place-items: center; width: 15px; height: 15px; color: currentColor; opacity: .85; }
.pm-sim .ic { width: 12px; height: 12px; }
.pm-mas { font: 700 10.5px/1 var(--f-ui); padding: 0 2px; color: currentColor; }
/* la tarjeta de crédito que falta: insignia roja propia, muy evidente */
.bl-tarjeta.pm-tarjeta { width: 20px; height: 16px; border-radius: 4px; background: var(--peligro); color: #fff; box-shadow: 0 0 0 1.5px #fff; }
.bl-tarjeta.pm-tarjeta svg { width: 14px; height: 14px; }
.pn-debe .bl-tarjeta.pm-tarjeta { background: #fff; color: var(--peligro); }
.ley-ficha.pn-ok { background: var(--ok-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 50%, transparent); }
.ley-ficha.pn-debe { background: var(--peligro); }
.ley-item .bl-tarjeta { background: var(--peligro); color: #fff; border-radius: 3px; }
/* teléfono (agenda): los mismos colores */
:root[data-diseno] .tel-agenda .ag-al.pm-ficha.pn-ok { background: var(--ok-fondo); }
:root[data-diseno] .tel-agenda .ag-al.pm-ficha.pn-debe { background: var(--peligro); border-color: var(--peligro); color: #fff; }
:root[data-diseno] .tel-agenda .ag-al.pm-ficha.pn-debe :is(.ag-al-det, .bl-edad, .bl-nom) { color: #fff; }

/* ═════ 3 · ventana de pendientes del alumno ═════ */
.panel.pa-panel { width: min(1080px, 100%); }
.panel.pa-panel .panel-ic.con-avatar { width: 40px; height: 40px; background: none; border-radius: 50%; }
.pa-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.pa-tarjeta { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--sup); overflow: hidden; }
.pa-tarjeta.n-ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.pa-tarjeta.n-algo { border-color: color-mix(in srgb, var(--aviso) 60%, transparent); }
.pa-tarjeta.n-todo { border-color: color-mix(in srgb, var(--peligro) 50%, transparent); }
.pa-tarjeta.plegada.n-ok { background: var(--ok-fondo); }
.pa-tarjeta.plegada.n-algo { background: var(--aviso-fondo); }
.pa-tarjeta.plegada.n-todo { background: var(--peligro-fondo); }
.pa-cab {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'ic t f' 'chips chips chips'; align-items: center; gap: 6px 12px;
  width: 100%; min-height: 72px; padding: 14px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--tinta);
}
.pa-ic { grid-area: ic; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-m); background: var(--sup-2); color: var(--tinta-2); }
.pa-ic .ic { width: 20px; height: 20px; }
.n-ok .pa-ic { color: var(--ok-texto); } .n-algo .pa-ic { color: var(--aviso-texto); } .n-todo .pa-ic { color: var(--peligro-texto); }
.pa-cab-t { grid-area: t; display: grid; gap: 2px; min-width: 0; }
.pa-cab-t b { font: 700 17px/1.2 var(--f-ui); }
.pa-estado { font: 500 13px/1.3 var(--f-ui); color: var(--tinta-3); }
.n-ok .pa-estado { color: var(--ok-texto); } .n-algo .pa-estado { color: var(--aviso-texto); } .n-todo .pa-estado { color: var(--peligro-texto); }
.pa-flecha { grid-area: f; width: 18px; height: 18px; color: var(--tinta-3); }
.pa-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 4px; }
.pa-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-pildora); background: var(--sup); box-shadow: inset 0 0 0 1px var(--linea-2); font: 500 12px/1 var(--f-ui); color: var(--tinta-2); }
.pa-chip .ic { width: 12px; height: 12px; }
.pa-cab:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.pa-items { display: grid; gap: 8px; padding: 0 12px 14px; }
.pa-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'ic t' 'ic a'; align-items: center; gap: 6px 12px;
  padding: 10px 12px; border-radius: var(--r-m); border: 1px solid transparent;
}
.pa-item.e-falta { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 35%, transparent); }
.pa-item.e-ok { background: var(--ok-fondo); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.pa-item.e-sin-campo { background: var(--sup-2); border: 1px dashed var(--linea-2); }
.pa-item-ic { grid-area: ic; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sup); }
.pa-item-ic .ic { width: 16px; height: 16px; }
.e-falta .pa-item-ic { color: var(--peligro-texto); } .e-ok .pa-item-ic { color: var(--ok-texto); } .e-sin-campo .pa-item-ic { color: var(--tinta-3); }
.pa-item-t { grid-area: t; display: grid; gap: 1px; min-width: 0; }
.pa-item-t b { font: 600 14px/1.25 var(--f-ui); color: var(--tinta); }
.pa-item-t small { font: 400 12.5px/1.35 var(--f-ui); color: var(--tinta-3); overflow-wrap: anywhere; }
.e-falta .pa-item-t small { color: var(--peligro-texto); } .e-ok .pa-item-t small { color: var(--ok-texto); }
.pa-item > :is(.boton, .pa-subir, .pa-camiseta, .pa-nota) { grid-area: a; justify-self: start; }
.pa-item:not(:has(> :nth-child(3))) { grid-template-areas: 'ic t'; }
.pa-camiseta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-talla { height: 30px; padding: 0 8px; border: 1px solid var(--linea-2); border-radius: var(--r-s); background: var(--sup); font: 500 13px/1 var(--f-ui); color: var(--tinta); }
.pa-nota { font: 400 12px/1.3 var(--f-ui); color: var(--tinta-3); }
.pa-vacio { font: 400 14px/1.4 var(--f-ui); color: var(--tinta-3); }

/* ═════ 4 · pestaña Pendientes: filtro avanzado (un solo tipo por grupo) ═════ */
.pd-avanzado { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pd-solo { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pd-solo-t { font: 600 12.5px/1 var(--f-ui); color: var(--tinta-3); margin-right: 2px; }
.pd-solo-op { height: 26px; padding: 0 10px; border: 1px solid var(--linea-2); border-radius: var(--r-pildora); background: var(--sup); font: 500 12.5px/1 var(--f-ui); color: var(--tinta-2); cursor: pointer; }
.pd-solo-op.activa { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 45%, transparent); color: var(--acento-texto); }

/* ═════ 5 · Selah: el vidrio ═════ */
:root[data-diseno="selah"] .pm-grupo, :root[data-diseno="selah"] .pm-todos:not(.activo), :root[data-diseno="selah"] .pd-solo-op:not(.activa) { background: var(--vidrio-control); border-color: var(--vidrio-borde); }
:root[data-diseno="selah"] .pm-grupo.activo, :root[data-diseno="selah"] .pm-todos.activo { background: var(--acento); border-color: var(--acento); }
:root[data-diseno="selah"] .pm-grupo.parte { background: var(--acento-suave); }
:root[data-diseno="selah"] .panel.pa-panel { background: var(--vidrio-panel, var(--sup)); }
:root[data-diseno="selah"] .pa-tarjeta { border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra); }
:root[data-diseno="selah"] .pa-tarjeta.abierta { background: var(--vidrio); }
:root[data-diseno="selah"] .pa-tarjeta .pa-cab-t b { font-family: var(--f-titulo); font-size: 22px; font-weight: 800; letter-spacing: .005em; }

/* ═════ 6 · teléfono (≤ 760 px): la ventana como página entera ═════ */
@media (max-width: 760px) {
  /* página entera y opaca, como el editor y las disponibilidades (sin la hoja desde abajo ni su asa) */
  html:root[data-diseno] .velo.velo-pa:has(> .panel) { padding: 0; }
  html:root[data-diseno] .velo.velo-pa > .panel.pa-panel.pd-tel {
    width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none;
    padding: var(--seg-arriba) 0 var(--seg-abajo);
    background: var(--sup); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html:root[data-diseno] .velo.velo-pa > .panel.pa-panel::before { content: none; }
  html:root[data-diseno] .pa-rejilla { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html:root[data-diseno] .pa-cab { min-height: 64px; }
  html:root[data-diseno] .pa-item .boton { min-height: 44px; }
  html:root[data-diseno] .pa-talla { height: 44px; font-size: 15px; }
  html:root[data-diseno] .pm-filtros { flex-wrap: wrap; }
  html:root[data-diseno] .pm-chip, html:root[data-diseno] .pm-abrir { height: 44px; min-width: 44px; justify-content: center; font-size: 14px; }
  html:root[data-diseno] :is(.pm-n, .pm-nota, .pm-mas) { font-size: 12px; }
  html:root[data-diseno] .pm-panel .hp-item { height: 44px; font-size: 14px; padding: 0 12px; }
  html:root[data-diseno] .pd-solo-op { height: 44px; font-size: 14px; }
}