/* ============================================================================= PANEL de padres y de admin · Material Design 3 Expressive ============================================================================= Se apoya en /assets/css/m3-tokens.css (roles de color, formas, tipografía, resortes, capas de estado, elevación). Aquí NO se inventan colores: todo sale de un rol --md-sys-color-*. Al tocar esta hoja, sube ?v= en views/_head.php (el service worker sirve /assets/ desde caché por URL). Capas (de menos a más prioridad): base reinicio, tipografía, alias de los tokens viejos, foco componentes botones, navegación, tarjetas, campos, avisos, progreso… vistas bloques propios de una pantalla (hijos, suscripción, planes…) utilidades márgenes y ajustes sueltos (ganan a todo lo anterior) Fuera de capas, al final: solo lo que retoca a los iconos .ms. m3-tokens.css define .ms sin capa y cualquier regla con capa pierde contra ella, así que un tamaño o un relleno de icono solo surte efecto si también va sin capa. Movimiento: spatial-* (posición, tamaño, forma; con rebote) y effects-* (color, opacidad; sin rebote). Con «reducir movimiento» los tokens ya dejan las duraciones en 1 ms y aquí se quitan las entradas en cascada. */ @layer base, componentes, vistas, utilidades; /* Propiedades registradas para poder animarlas (el pulgar del interruptor). */ @property --sw-x { syntax: ''; inherits: false; initial-value: 14px; } @property --sw-r { syntax: ''; inherits: false; initial-value: 8px; } /* Transición entre páginas del mismo sitio: la barra de navegación se queda quieta y el contenido funde. Solo si la persona no pidió menos movimiento. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* ═══════════════════════════════════ BASE ═══════════════════════════════════ */ @layer base { :root { color-scheme: light; /* Medidas del armazón. --rail-w es 0 hasta que hay riel (escritorio). */ --wrap-pad-x: clamp(16px, 4vw, 48px); --wrap-pad-top: clamp(24px, 3vh, 36px); --rail-w: 0px; --barra-sup: 0px; --barra-inf: 0px; /* Capa de estado: se mezcla el color del contenido sobre el del fondo. */ --capa-hover: calc(var(--md-sys-state-hover-opacity) * 100%); --capa-foco: calc(var(--md-sys-state-focus-opacity) * 100%); --capa-pulsado: calc(var(--md-sys-state-pressed-opacity) * 100%); /* Velo detrás de diálogos y del cajón (rol scrim al 32 %). */ --velo: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); /* Flecha del desplegable: un SVG no puede leer currentColor desde un background, así que hay una por esquema (tono on-surface-variant). */ --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23414940' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); /* ALIAS de los tokens de antes. Siguen vivos porque quedan estilos en línea y JS de las vistas que los nombran (var(--ink-soft), var(--sand), var(--mint-deep)…). Apuntan a roles M3, así que también cambian con el tema oscuro. No usarlos en código nuevo. */ --bg: var(--md-sys-color-surface); --surface: var(--md-sys-color-surface-container-low); --card: var(--md-sys-color-surface-container-low); --ink: var(--md-sys-color-on-surface); --ink-soft: var(--md-sys-color-on-surface-variant); --soft: var(--md-sys-color-on-surface-variant); --mint: var(--md-sys-color-primary-container); --mint-deep: var(--md-sys-color-primary); --sand: var(--md-sys-color-outline-variant); --amber: var(--md-sys-color-tertiary); --warn-ink: var(--md-sys-color-tertiary); --danger: var(--md-sys-color-error); --radius: var(--md-sys-shape-corner-large); --shadow: var(--md-sys-elevation-level1); --ease: var(--md-sys-motion-easing-emphasized); } /* Tema oscuro: mismas condiciones que m3-tokens.css. */ @media (prefers-color-scheme: dark) { :root[data-tema="auto"] { color-scheme: dark; --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c1c9be' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); } } :root[data-tema="oscuro"] { color-scheme: dark; --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c1c9be' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); } /* Armazón: el riel aparece a partir de 840 px (M3 «expanded»); por debajo, barra superior de 64 px y barra de navegación inferior de 72 px (estilo Kizuna: destinos principales siempre a la vista, «Más» abre el cajón). */ @media (min-width: 840px) { :root { --rail-w: 96px; } } @media (min-width: 1200px) { :root { --rail-w: 248px; } } @media (max-width: 839.98px) { :root:has(.appbar) { --barra-sup: 64px; } } @media (max-width: 839.98px) { :root:has(.barra-nav) { --barra-inf: 72px; } } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; scrollbar-color: var(--md-sys-color-outline) transparent; } /* El atributo hidden tiene que ganar siempre: cualquier clase con display (.aviso, .acciones, .btn, .bsab-elegido) lo anulaba. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--barra-sup) + 8px); /* Deja animar alturas «auto» (acordeones) donde el navegador lo admite. */ interpolate-size: allow-keywords; } body { font: var(--md-sys-typescale-body-large); font-optical-sizing: auto; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; min-height: 100dvh; } ::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } a { color: var(--md-sys-color-primary); text-decoration: none; } /* Un enlace suelto dentro de una frase no puede distinguirse solo por el color (WCAG 1.4.1): va subrayado. Botones, chips y navegación llevan clase. */ :where(p, li, label, dd, .hint, .sub, .aviso-txt, .franja-txt, .flash, .error) a:not([class]) { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: from-font; } h1 { font: var(--md-sys-typescale-headline-medium); font-weight: var(--md-sys-typescale-emphasized-weight); letter-spacing: -.2px; color: var(--md-sys-color-on-surface); margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; text-wrap: balance; } h2 { font: var(--md-sys-typescale-title-large); font-weight: 600; color: var(--md-sys-color-on-surface); margin: clamp(32px, 4.5vh, 48px) 0 14px; text-wrap: balance; } h3 { font: var(--md-sys-typescale-title-medium); font-weight: 600; color: var(--md-sys-color-on-surface); margin: 0 0 10px; } h4 { font: var(--md-sys-typescale-title-small); color: var(--md-sys-color-on-surface-variant); margin: 0 0 6px; } :where(h1, h2, h3) + :where(.sub, p.sub) { margin-top: 2px; } :where(h1) + :where(.sub, p.sub) { font: var(--md-sys-typescale-body-large); } p { text-wrap: pretty; } strong, b { font-weight: 650; } code, kbd, .mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .9em; } code { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-extra-small); padding: 1px 5px; } hr { border: 0; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 22px 0; } pre, code.bloque { white-space: pre-wrap; word-break: break-word; } img, svg, video, iframe { max-width: 100%; } /* Foco visible siempre, con anillo de 3 px en el rol secondary (≥ 3:1). */ :focus-visible { outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color); outline-offset: var(--md-focus-ring-offset); } /* Barras de desplazamiento finas (el color del tema va en el reinicio *). */ .tabla-scroll, .rail, .appbar { scrollbar-width: thin; } /* ── Movimiento: entradas ── */ @keyframes m3-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes m3-baja { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } @keyframes m3-crece { from { width: 0; } } @keyframes m3-escala { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } @keyframes m3-indicador { from { transform: scaleX(.4); opacity: .4; } to { transform: none; opacity: 1; } } @keyframes m3-aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes m3-gira { to { transform: rotate(360deg); } } @keyframes m3-ola { to { -webkit-mask-position: 20px 50%; mask-position: 20px 50%; } } @keyframes m3-snack { 0% { opacity: 0; transform: translate(-50%, 24px); } 6%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); visibility: hidden; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } } /* ════════════════════════════════ COMPONENTES ════════════════════════════════ */ @layer componentes { /* ── Armazón y rejillas ───────────────────────────────────────────────── .wrap tableros, tablas, rejillas de tarjetas (usa el ancho) .wrap.narrow formularios y lectura (hoy mismo ancho: el margen seguro lo da el relleno lateral; nada arrinconado a un tercio) .wrap.auth tarjetas de acceso centradas, páginas SIN navegación */ .wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--wrap-pad-top) var(--wrap-pad-x) clamp(56px, 8vh, 96px); min-width: 0; } .wrap.narrow { max-width: 1480px; } .wrap.auth { max-width: 480px; padding-top: clamp(32px, 8vh, 72px); } /* Con riel, todo el documento (contenido y pie) se aparta de él. */ body:has(.appbar) { padding-inline-start: var(--rail-w); } /* Rejilla de tarjetas: auto-fit (sin columnas fantasma), pistas con tope (una sola tarjeta no se estira a 1.400 px) y centrada. Cada página ajusta --gmin/--gmax sin reescribir la plantilla. */ .grid { display: grid; gap: 20px; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gmin, 320px)), var(--gmax, 430px))); } /* Columnas que colapsan solas: minmax(0,…) para que una tabla ancha se encoja en vez de ensanchar la celda. */ .cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; } .cols-3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; } .cols-ab, .cols-ba { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { .cols-ab { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .cols-ba { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .col-sticky { position: sticky; top: calc(var(--barra-sup) + 16px); } } .col-full { grid-column: 1 / -1; } .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; position: relative; } .tabla-scroll:focus-visible { outline-offset: -3px; } /* Un hijo de rejilla o flex no encoge por debajo de su contenido si no se le dice: sin esto una tabla nowrap ensancha la página entera. */ .grid > *, .cols > *, .cols-3 > *, .cols-ab > *, .cols-ba > *, .card { min-width: 0; } /* ── Navegación: riel (escritorio) · barra superior + cajón (móvil) ────── Un solo marcado para las tres formas.
lleva la marca, el botón de menú y un