/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ Selah · Admisiones (14 oct · DISENO-SELAH §2 «Familia»), sobre la base de selah.css. · Arriba, la franja «Hoy» (admin-admisiones.js · franjaHoy, solo con Selah): hasta 3 tarjetas grandes de vidrio de quien necesita algo ya (la etiqueta ámbar del tablero), con la cara grande teñida por su etapa y el mismo botón que abre ese paso. Sin halo: el halo es solo para lo que pasa ahora (la hora en curso, la clase de ahora). · Debajo, el Kanban de siempre: columnas sin fondo, solo la píldora de la etapa (su tinte y su punto); tarjetas de vidrio con caras grandes y el anillo de su etapa. Mismo arrastre, mismos popovers, misma «Activo» plegada. · Hoja, ficha por pasos, contacto, confirmaciones: vidrio y tokens de la base; nada de colores sueltos. Cada selector empieza por :root[data-diseno="selah"]. Con Clásica nada de esto aplica. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ═════ 1 · cabecera: búsqueda en píldora; en el teléfono, en su propia línea (antes se salía por la derecha) ═════ */ :root[data-diseno="selah"] .vista-admisiones .adm-buscador { box-shadow: 0 1px 2px rgba(35, 50, 104, .05); } @media (max-width: 760px) { :root[data-diseno="selah"] .vista-admisiones .vista-cab { flex-wrap: wrap; height: auto; row-gap: 12px; } :root[data-diseno="selah"] .vista-admisiones .vista-cab-acciones { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 10px; margin-left: 0; } :root[data-diseno="selah"] .vista-admisiones .adm-buscador { flex: 1 1 100%; width: auto; min-width: 0; } :root[data-diseno="selah"] .vista-admisiones .adm-buscar { min-width: 0; width: 100%; } } /* ═════ 2 · Hoy: la franja protagonista, compacta (revisión 14 oct · 3.4) ═════ Una fila de tres tarjetas bajas (cara, nombre, etapa · instrumento · días, el paso; la acción a la derecha): ~84 px, para que el tablero siga mostrando sus cuatro filas. Plegable: la cabecera es el botón y se recuerda (localStorage). */ :root[data-diseno="selah"] .vista-admisiones .hoy { flex: none; display: grid; gap: 10px; margin: 2px 0 18px; } :root[data-diseno="selah"] .hoy-cab { display: flex; align-items: baseline; gap: 12px; min-width: 0; width: fit-content; max-width: 100%; margin: 0 0 0 -8px; padding: 2px 10px 2px 8px; border: 0; border-radius: var(--r-pildora); background: none; color: inherit; text-align: left; font: inherit; } :root[data-diseno="selah"] button.hoy-cab { cursor: pointer; } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) button.hoy-cab:hover { background: var(--fila-hover); } :root[data-diseno="selah"] button.hoy-cab:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } :root[data-diseno="selah"] .hoy-cab .voz { margin: 0; font-size: 22px; line-height: 1; } :root[data-diseno="selah"] .hoy-sub { min-width: 0; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-diseno="selah"] .hoy-chev { align-self: center; width: 16px !important; height: 16px !important; color: var(--tinta-3); } :root[data-diseno="selah"] .hoy.vacia, :root[data-diseno="selah"] .hoy.plegada { gap: 0; margin-bottom: 12px; } :root[data-diseno="selah"] .hoy-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } :root[data-diseno="selah"] .hoy-tarjeta { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px 12px 12px; border-radius: 22px; cursor: pointer; background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-sombra); -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .hoy-tarjeta:hover { background: var(--vidrio-hover); box-shadow: var(--vidrio-sombra), var(--s-2); } :root[data-diseno="selah"] .hoy-tarjeta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* la cara: foto o iniciales en Darker sobre el tinte de su etapa, con el anillo del color de la etapa */ :root[data-diseno="selah"] .hoy-cara { flex: none; font-family: var(--f-titulo) !important; font-weight: 800 !important; font-size: 20px !important; letter-spacing: .01em; box-shadow: 0 0 0 2.5px var(--sup), 0 0 0 4px color-mix(in srgb, var(--etapa, var(--tinta-4)) 55%, transparent), 0 8px 18px -10px rgba(35, 50, 104, .45); } :root[data-diseno="selah"] .hoy-texto { flex: 1; display: grid; gap: 1px; min-width: 0; } :root[data-diseno="selah"] .hoy-nombre { min-width: 0; font: 800 21px/1.05 var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-diseno="selah"] .hoy-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-2); white-space: nowrap; } :root[data-diseno="selah"] .hoy-meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } :root[data-diseno="selah"] .hoy-meta .punto-etapa { width: 7px; height: 7px; } /* el paso: punto ámbar (le toca a Administración) y la frase */ :root[data-diseno="selah"] .hoy-paso { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 3px 0 0; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); } :root[data-diseno="selah"] .hoy-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aviso) 16%, transparent); } :root[data-diseno="selah"] .hoy-que { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-diseno="selah"] .hoy-accion { flex: none; height: 34px; padding: 0 16px; gap: 7px; font-weight: 700; } :root[data-diseno="selah"] .hoy-accion .ic { width: 15px; height: 15px; } @media (min-width: 761px) and (max-width: 1240px) { :root[data-diseno="selah"] .hoy-tarjetas { gap: 10px; } :root[data-diseno="selah"] .hoy-tarjeta { gap: 10px; padding: 10px 10px 10px 10px; } :root[data-diseno="selah"] .hoy-cara { width: 40px !important; height: 40px !important; font-size: 17px !important; } :root[data-diseno="selah"] .hoy-nombre { font-size: 19px; } :root[data-diseno="selah"] .hoy-accion { height: 32px; padding: 0 12px; } } /* el tablero marca a quien está arriba en Hoy (la misma persona, no otra): una lengüeta «Hoy» en el borde de arriba de su tarjeta, sin quitarle sitio; al pasar por su tarjeta de Hoy, la del tablero se resalta */ :root[data-diseno="selah"] .kbt-hoy { position: absolute; top: -8px; right: 12px; height: 17px; padding: 0 8px; border-radius: var(--r-pildora); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent), 0 0 0 2px var(--sup); font: 700 10.5px/17px var(--f-ui); color: var(--acento-texto); letter-spacing: .01em; pointer-events: none; } :root[data-diseno="selah"] .kbt-hoy { background: color-mix(in srgb, var(--acento) 10%, var(--sup)); } :root[data-diseno="selah"] .kb-tarjeta.resaltada { border-color: var(--acento); box-shadow: var(--vidrio-sombra), 0 0 0 3px var(--acento-anillo); } :root[data-diseno="selah"] .kb-tarjeta.kb-previa .kbt-hoy { display: none; } /* ═════ 3 · Kanban: columnas sin fondo; la etapa es una píldora con su tinte y su punto ═════ */ :root[data-diseno="selah"] .kanban { gap: 14px; } :root[data-diseno="selah"] .kb-col { border-radius: 20px; } :root[data-diseno="selah"] .kb-cab { height: 40px; padding: 0 8px 0 2px; gap: 8px; } :root[data-diseno="selah"] .kb-nombre { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-pildora); background: var(--ficha-tinte, var(--vidrio)); box-shadow: inset 0 0 0 1px var(--ficha-borde, var(--vidrio-borde)); font: 700 var(--t-s)/1 var(--f-ui); color: var(--tinta); } :root[data-diseno="selah"] .kb-nombre::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--etapa, var(--tinta-4)); } :root[data-diseno="selah"] .kb-n { font-weight: 600; color: var(--tinta-3); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .kb-col[data-col="Activo"] .kb-cab:hover { background: transparent; } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .kb-col[data-col="Activo"]:not(.plegada) .kb-cab:hover .kb-nombre { box-shadow: inset 0 0 0 1px var(--etapa); } /* Activo plegada: un botón de vidrio en la línea de las cabeceras, con su píldora dentro */ :root[data-diseno="selah"] .kb-col.plegada .kb-cab { height: 40px; padding: 0 10px 0 6px; border-radius: var(--r-pildora); border: 1px solid var(--borde-control); background: var(--vidrio-control); box-shadow: 0 1px 2px rgba(35, 50, 104, .06), 0 1px 0 var(--brillo) inset; } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .kb-col.plegada .kb-cab:hover { background: var(--control-hover); border-color: var(--linea-2); } :root[data-diseno="selah"] .kb-col.plegada .kb-nombre { height: 26px; } /* soltar encima: el carril se marca en acción suave (el único color que no es de etapa) */ :root[data-diseno="selah"] .kb-col.sobre { background: var(--acento-suave); box-shadow: inset 0 0 0 1.5px var(--acento); } :root[data-diseno="selah"] .kb-lista { gap: 10px; padding: 10px 3px 28px; } /* arriba, sitio para la lengüeta «Hoy» */ /* tarjeta de vidrio: cara grande con el anillo de su etapa, nombre, instrumento y días, y la etiqueta del paso */ :root[data-diseno="selah"] .kb-tarjeta { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; row-gap: 0; padding: 11px 12px; border-radius: 18px; background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .kb-tarjeta:hover { background: var(--vidrio-hover); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra), var(--s-2); } :root[data-diseno="selah"] .kb-tarjeta:focus-visible { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); } :root[data-diseno="selah"] .kb-tarjeta > .avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; font-family: var(--f-titulo); font-weight: 800; box-shadow: 0 0 0 2px var(--sup), 0 0 0 3.5px color-mix(in srgb, var(--etapa, var(--tinta-4)) 50%, transparent), 0 6px 14px -8px rgba(35, 50, 104, .4); } :root[data-diseno="selah"] .kbt-texto { align-self: center; gap: 1px; } :root[data-diseno="selah"] .kbt-nombre { font-weight: 650; letter-spacing: -.005em; } :root[data-diseno="selah"] .kbt-paso { margin-top: 8px; } :root[data-diseno="selah"] .kb-tarjeta.kb-previa { background: var(--vidrio-2); box-shadow: none; } :root[data-diseno="selah"] .kb-fantasma { background: var(--sup); border-color: var(--vidrio-borde); box-shadow: var(--s-3); } @media (max-width: 1240px) { /* columnas estrechas (revisión 14 oct · 3.4): cara de 32 px y nombre en una línea a 14 px, como la Clásica a esta anchura; la etiqueta del paso, en una línea */ :root[data-diseno="selah"] .kb-col:not([data-col="Activo"]) .kb-tarjeta.kiss { grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; padding: 9px; } :root[data-diseno="selah"] .kb-col:not([data-col="Activo"]) .kb-tarjeta.kiss > .avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; } :root[data-diseno="selah"] .kb-col:not([data-col="Activo"]) .kbt-nombre { font-size: var(--t-m); line-height: var(--lh-m); letter-spacing: -.01em; } :root[data-diseno="selah"] .kb-col:not([data-col="Activo"]) .kbt-paso { margin-top: 6px; padding-inline: 7px; white-space: nowrap; letter-spacing: -.01em; } :root[data-diseno="selah"] .kanban { gap: 10px; } /* a 1100×720 caben las cuatro filas del tablero bajo Hoy */ :root[data-diseno="selah"] .vista-admisiones .hoy { gap: 6px; margin-bottom: 12px; } :root[data-diseno="selah"] .kb-cab { height: 36px; } :root[data-diseno="selah"] .kb-lista { gap: 8px; padding-top: 8px; } } /* Activo desplegado: una lista de vidrio de una línea por alumno (foto pequeña con su anillo) */ :root[data-diseno="selah"] .kb-col[data-col="Activo"]:not(.plegada) .kb-lista { border-color: var(--vidrio-borde); border-radius: 18px; background: var(--vidrio); box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"] .kb-col[data-col="Activo"]:not(.plegada) .kb-tarjeta { background: transparent; border-bottom: 1px solid var(--linea); border-radius: 0; box-shadow: none; padding: 6px 12px; } :root[data-diseno="selah"] .kb-col[data-col="Activo"]:not(.plegada) .kb-tarjeta > .avatar { width: 26px !important; height: 26px !important; font-size: 11px !important; font-family: var(--f-ui); font-weight: 700; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--etapa) 50%, transparent); } :root[data-diseno="selah"] .kb-col[data-col="Activo"]:not(.plegada) .kb-tarjeta { grid-template-columns: 26px minmax(0, 1fr); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .kb-col[data-col="Activo"]:not(.plegada) .kb-tarjeta:hover { background: var(--fila-hover); box-shadow: none; } /* ═════ 4 · popover de contacto y confirmaciones ═════ */ :root[data-diseno="selah"] .kbt-contacto-tit { font-weight: 700; } :root[data-diseno="selah"] .kbt-tel .boton.whatsapp { border-color: var(--borde-control); background: var(--vidrio-control); border-radius: var(--r-pildora); } :root[data-diseno="selah"] .kbt-botones { border-top-color: var(--linea); } :root[data-diseno="selah"] .kbt-opcion { border-radius: var(--r-m); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) button.kbt-opcion:hover:not(:disabled) { background: var(--acento-suave); } /* las confirmaciones de Admisiones se abren sobre la Hoja, el tablero o la ficha: casi opacas, nada se lee a través */ :root[data-diseno="selah"] .pop.adm-pop:not(.en-linea) { background: var(--vidrio-panel); } :root[data-diseno="selah"] .pop.adm-pop.en-linea { background: transparent; } /* ═════ 4b · Hoja: el marco de vidrio de la base; cada bloque lleva la píldora de su etapa, como el Kanban ═════ */ :root[data-diseno="selah"] .hj-plegar[data-grupo="Aspirante"] { --etapa: var(--e-aspirante); --ficha-tinte: var(--ficha-tinte-aspirante); } :root[data-diseno="selah"] .hj-plegar[data-grupo="Lista de Espera"] { --etapa: var(--e-lista-de-espera); --ficha-tinte: var(--ficha-tinte-lista-de-espera); } :root[data-diseno="selah"] .hj-plegar[data-grupo="Esperando pagos"] { --etapa: var(--e-esperando-pagos); --ficha-tinte: var(--ficha-tinte-esperando-pagos); } :root[data-diseno="selah"] .hj-plegar[data-grupo="Bienvenida"] { --etapa: var(--e-bienvenida); --ficha-tinte: var(--ficha-tinte-bienvenida); } :root[data-diseno="selah"] .hj-plegar[data-grupo="Nuevo"] { --etapa: var(--e-nuevo); --ficha-tinte: var(--ficha-tinte-nuevo); } :root[data-diseno="selah"] .hj-plegar[data-grupo="Activo"] { --etapa: var(--e-activo); --ficha-tinte: var(--ficha-tinte-activo); } :root[data-diseno="selah"] .hj-plegar:is([data-grupo="Pausa"], [data-grupo="Desistió"], [data-grupo="Facturas"]) { --etapa: var(--e-pausa); --ficha-tinte: var(--ficha-tinte-pausa); } :root[data-diseno="selah"] .hj-plegar { gap: 8px; height: 32px; padding: 0 8px 0 4px; border-radius: var(--r-pildora); } :root[data-diseno="selah"] .hj-plegar > span:not(.kb-n, .ic) { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px 0 9px; border-radius: var(--r-pildora); background: var(--ficha-tinte, var(--pista)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--etapa, var(--tinta)) 22%, transparent); font: 700 var(--t-s)/1 var(--f-ui); color: var(--tinta); } :root[data-diseno="selah"] .hj-plegar > span:not(.kb-n, .ic)::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--etapa, var(--tinta-4)); } :root[data-diseno="selah"] .hj-plegar .kb-n { font-weight: 600; color: var(--tinta-3); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .hj-plegar:hover { background: var(--fila-hover); } :root[data-diseno="selah"] .hj-tabla tr.hj-bloque td { background: var(--sup-2); } :root[data-diseno="selah"] .hj-tabla td.hj-fija .avatar { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--etapa, var(--tinta-4)) 45%, transparent); } /* ═════ 4c · ficha del alumno: la franja de arriba con la cara de su etapa y el nombre en la letra de marca ═════ (el panel ya lleva data-estado: --etapa y --ficha-tinte salen de la base). El Horario de asignación de dentro es del área Horario: aquí solo su contenedor. */ :root[data-diseno="selah"] .ficha-adm .fc-cab .avatar { box-shadow: 0 0 0 2.5px var(--sup), 0 0 0 4px color-mix(in srgb, var(--etapa, var(--tinta-4)) 50%, transparent), 0 8px 18px -10px rgba(35, 50, 104, .45); } :root[data-diseno="selah"] .ficha-adm .fc-cab .avatar.sin-foto { font-family: var(--f-titulo); font-weight: 800; font-size: 18px !important; } :root[data-diseno="selah"] .ficha-adm .fc-cab h2 { font: 800 29px/1.05 var(--f-titulo); letter-spacing: -.01em; } /* ═════ 4d · revisión 14 oct (3.7, 3.8, 3.9, 2.7, 2.8) ═════ */ /* 3.7 · WhatsApp es un botón: la píldora secundaria de vidrio con borde, el ícono en verde (en todas las fichas) */ :root[data-diseno="selah"] .boton.whatsapp { border: 1px solid var(--borde-control); background: var(--vidrio-control); color: var(--tinta); border-radius: var(--r-pildora); box-shadow: 0 1px 2px rgba(35, 50, 104, .06), 0 1px 0 var(--brillo) inset; } :root[data-diseno="selah"] .boton.whatsapp .ic { color: var(--ok); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .boton.whatsapp:hover { background: var(--control-hover); border-color: var(--linea-2); } /* 3.8 · foco visible (teclado) en las filas del kit y la documentación, los pasos, las etapas, las tarjetas y las etiquetas */ :root[data-diseno="selah"] :is(.fc-tile, .fc-paso, .fc-etapa, .kb-tarjeta, button.kbt-paso, .kbt-opcion, .hj-plegar, .kb-cab):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } :root[data-diseno="selah"] .fc-tile:focus-visible { border-color: var(--acento); } /* al pasar el ratón, la fila se distingue también cuando falta (borde ámbar): fondo y sombra, no solo el borde */ :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .fc-tile:not([aria-disabled="true"]):not(.fc-zona):hover { background: var(--sup-2); box-shadow: var(--s-2); } /* 3.9 · el nombre de la cabecera de la ficha nunca se corta: un punto menos y, si no cabe, dos líneas */ :root[data-diseno="selah"] .ficha-adm .fc-cab h2 { font-size: 26px; line-height: 1.05; white-space: normal; overflow: hidden; text-overflow: clip; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* 2.7 · el resumen de un paso parte por los espacios, no a mitad del correo */ :root[data-diseno="selah"] .fc-paso-res { overflow-wrap: break-word; font-size: 12px; letter-spacing: -.005em; } /* 2.8 · Activo desplegado: cada fila en una línea, todas de la misma altura (nombre cortado con su título; instrumento a la derecha) */ :root[data-diseno="selah"] .kb-col[data-col="Activo"]:not(.plegada) .kbt-texto { flex-wrap: nowrap; align-items: center; } :root[data-diseno="selah"] .kb-col[data-col="Activo"]:not(.plegada) .kbt-nombre { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-diseno="selah"] .kb-col[data-col="Activo"]:not(.plegada) .kbt-meta { flex: none; } /* ═════ 5 · teléfono: Hoy se desliza de lado (una tarjeta y la siguiente asoma); el tablero sigue igual ═════ */ @media (max-width: 760px) { :root[data-diseno="selah"] .vista-admisiones .hoy { margin-bottom: 8px; } :root[data-diseno="selah"] .hoy-tarjetas { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: -8px calc(-1 * var(--marco-lado)) 0; padding: 8px var(--marco-lado) 12px; scroll-padding-inline: var(--marco-lado); } :root[data-diseno="selah"] .hoy-tarjetas::-webkit-scrollbar { display: none; } :root[data-diseno="selah"] .hoy-tarjeta { flex: 0 0 calc(100% - 36px); scroll-snap-align: start; } :root[data-diseno="selah"] .hoy-tarjetas[data-n="1"] .hoy-tarjeta { flex-basis: 100%; } :root[data-diseno="selah"] .hoy-accion { height: 44px; padding: 0 14px; } /* etapa · instrumento · días: puede bajar a una segunda línea antes que cortarse */ :root[data-diseno="selah"] .hoy-meta { align-items: flex-start; white-space: normal; } :root[data-diseno="selah"] .hoy-meta .punto-etapa { margin-top: 5px; } :root[data-diseno="selah"] .hoy-meta > span:last-child { overflow: visible; } :root[data-diseno="selah"] .hoy-que { white-space: normal; } } /* 15 oct · RONDA-FINAL §5: el campo que falta, marcado al abrir la ficha desde lo que falta */ :root[data-diseno="selah"] .fc-tile.foco-falta { border-color: var(--aviso); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aviso) 22%, transparent); } /* ═════ 15 oct B · zona C · Administración › Alumnos (admin-alumnos.js) ═════ Fichas de vidrio con la cara grande y el anillo de su etapa (data-estado en la ficha pone --etapa, selah.css), el nombre en Darker Grotesque y el resto en gris. Con algo pendiente: borde y tinte rojos sobre el vidrio, casillas rojas. Filtros: un panel de vidrio plegado con píldoras (la elegida, acción), como los filtros de Pendientes. */ :root[data-diseno="selah"] .vista-alumnos .adm-buscador { box-shadow: 0 1px 2px rgba(35, 50, 104, .05); } :root[data-diseno="selah"] .alu-boton-filtros { border-radius: var(--r-pildora); } :root[data-diseno="selah"] .alu-boton-filtros.abierto { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 55%, transparent); color: var(--acento-texto); } :root[data-diseno="selah"] .alu-filtros { padding: 16px 18px; border-radius: 22px; background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra); -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque); } :root[data-diseno="selah"] .alu-chip { border-color: var(--borde-control); background: var(--vidrio-control); box-shadow: 0 1px 2px rgba(35, 50, 104, .06), 0 1px 0 var(--brillo) inset; } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .alu-chip:hover:not(.activa, :disabled) { background: var(--control-hover); border-color: var(--linea-2); } :root[data-diseno="selah"] .alu-chip.activa { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 10px 22px -14px rgba(11, 103, 207, .7), inset 0 1px 0 rgba(255, 255, 255, .22); } :root[data-diseno="selah"] .alu-chip:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; box-shadow: none; } :root[data-diseno="selah"] .alu-rejilla { gap: 14px; } :root[data-diseno="selah"] .alu-tarjeta { padding: 14px 16px 16px 14px; border-radius: 18px; background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .alu-tarjeta:hover { background: var(--vidrio-hover); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra), var(--s-2); } :root[data-diseno="selah"] .alu-tarjeta:focus-visible { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); } :root[data-diseno="selah"] .alu-cara { font-family: var(--f-titulo) !important; font-weight: 800 !important; font-size: 19px !important; letter-spacing: .01em; box-shadow: 0 0 0 2px var(--sup), 0 0 0 3.5px color-mix(in srgb, var(--etapa, var(--tinta-4)) 55%, transparent), 0 6px 14px -8px rgba(35, 50, 104, .4); } :root[data-diseno="selah"] .alu-nombre { font: 800 21px/1.1 var(--f-titulo); letter-spacing: -.01em; } :root[data-diseno="selah"] .alu-estado { margin-top: 1px; font-weight: 500; } :root[data-diseno="selah"] .alu-grupo { margin-top: 6px; font-weight: 600; color: var(--tinta); } :root[data-diseno="selah"] .alu-tarjeta.con-pendientes { border-color: color-mix(in srgb, var(--peligro) 55%, transparent); background: color-mix(in srgb, var(--peligro-fondo) 60%, var(--vidrio)); } :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .alu-tarjeta.con-pendientes:hover { background: color-mix(in srgb, var(--peligro-fondo) 70%, var(--vidrio-hover)); border-color: var(--peligro); } @media (max-width: 760px) { :root[data-diseno="selah"] .vista-alumnos .vista-cab { flex-wrap: wrap; height: auto; row-gap: 12px; } :root[data-diseno="selah"] .vista-alumnos .vista-cab-acciones { flex: 1 1 100%; min-width: 0; margin-left: 0; } :root[data-diseno="selah"] .alu-filtros { padding: 12px; border-radius: 18px; } :root[data-diseno="selah"] .alu-tarjeta { padding: 14px; } }