/* ========================================================================== NUTA ESPAZIOA · Sistema de diseño (dirección "Kontenporaneoa", tipo Tabakalera) Blanco de galería + tinta casi negra + acento lima. Tipografía Inter. ========================================================================== */ :root { --nuta-bg: #FFFFFF; --nuta-panel: #F4F4F2; --nuta-2: #ECECE8; --nuta-line: #DCDCD6; --nuta-ink: #1E1E1E; --nuta-soft: #6E6E6A; --nuta-lima: #FF6D4D; --nuta-azul: #9AC5FF; --nuta-rosa: #F4B4B4; --nuta-naranja: #EC6C13; --nuta-turquesa:#76C2B4; --nuta-ok: #2FA37A; --nuta-warn: #EC6C13; --nuta-bad: #D64545; --nuta-accent: var(--nuta-lima); --nuta-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nuta-radius: 5px; } /* --- Ancho completo y sin título del tema en las páginas del plugin --- */ body.nuta-fullpage .wp-block-post-content, body.nuta-fullpage .entry-content { max-width: none !important; padding-inline: 0 !important; } body.nuta-fullpage .is-layout-constrained > :where(:not(.alignwide):not(.alignfull)) { max-width: none !important; } body.nuta-bo-page .wp-block-post-title, body.nuta-bo-page .entry-title { display: none !important; } /* Modo app: en el back office ocultamos cabecera y pie del tema */ body.nuta-bo-page .wp-site-blocks > header, body.nuta-bo-page .wp-site-blocks > footer, body.nuta-bo-page header.wp-block-template-part, body.nuta-bo-page footer.wp-block-template-part { display: none !important; } body.nuta-bo-page .wp-site-blocks > main, body.nuta-bo-page .wp-block-group.is-layout-constrained:has(> .entry-content) { padding-top: 0 !important; margin-top: 0 !important; } body.nuta-bo-page { background: var(--nuta-bg); overflow-x: hidden; } /* ========================================================================== Carcasa del back office ========================================================================== */ .nuta-app { /* Full-bleed: ocupa el ancho real del viewport aunque el tema limite el contenedor. Se DESCUENTA la barra de scroll (--nuta-scrollbar, que mide el JS): 100vw la incluye, y sin restarla la página se desplaza en horizontal y se cortan el menú y la última columna de las tablas. */ --nuta-ancho: calc(100vw - var(--nuta-scrollbar, 0px)); width: var(--nuta-ancho); max-width: var(--nuta-ancho); margin-left: calc(50% - var(--nuta-ancho) / 2); margin-right: calc(50% - var(--nuta-ancho) / 2); padding-inline: clamp(1.2rem, 4vw, 4rem); font-family: var(--nuta-sans); color: var(--nuta-ink); line-height: 1.55; text-align: left; } .nuta-app, .nuta-app *, .nuta-avisos, .nuta-avisos *, .nuta-publico, .nuta-publico * { box-sizing: border-box; } /* El atributo hidden tiene que ganar SIEMPRE: muchos componentes fijan su propio display (flex, grid) y el [hidden]{display:none} del navegador pierde con ellos, dejando visible lo que el JS acaba de ocultar (buscadores, modos de un modal…). */ [hidden] { display: none !important; } /* ========================================================================== Pantallas públicas (acceso, inscripción, activación) ========================================================================== */ .nuta-publico { font-family: var(--nuta-sans); color: var(--nuta-ink); line-height: 1.55; text-align: left; } .nuta-publico .nuta-auth { max-width: 460px; margin: 0 auto; } .nuta-publico .nuta-auth .nuta-ayuda { text-align: center; display: block; margin-top: 1.2rem; } .nuta-publico .nuta-flash { margin-bottom: 1.2rem; } /* La inscripción es larga: una tarjeta por bloque para poder seguirla. Doble clase para ganar a .nuta-form, que fija su propio ancho y márgenes. */ .nuta-form.nuta-registro { max-width: 720px; margin: 0 auto; gap: 1.2rem; } .nuta-registro .nuta-card > h3 { margin-bottom: 1rem; } /* Topbar de marca */ .nuta-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.1rem; border-bottom: 2px solid var(--nuta-ink); flex-wrap: wrap; /* Siempre arriba: la marca y el volver a casa no se pierden al bajar. El fondo es opaco para que el contenido pase por DEBAJO, no a través. */ position: sticky; top: 0; z-index: 30; background: var(--nuta-bg, #fff); } /* Con la barra de administración de WordPress, debajo de ella. */ body.admin-bar .nuta-topbar { top: 32px; } @media (max-width: 782px) { body.admin-bar .nuta-topbar { top: 46px; } } .nuta-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--nuta-ink); } .nuta-brand .nuta-logo { width: 38px; height: 38px; color: var(--nuta-ink); display: block; } .nuta-brand-name { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; } .nuta-userbox { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } /* El desplegable con el que un tutor salta del panel de un menor a otro. */ /* El selector con el que un tutor salta del panel de un hijo al de otro: una cápsula con SU CARA y su nombre, que despliega el resto. */ .nuta-selector-nino { position: relative; margin: 0; } /* Comparte la mecánica del menú ⋯ pero NO su botón cuadrado de 34×30: aquí la cápsula crece con el nombre. */ .nuta-selector-nino.nuta-menu > summary, .nuta-selector-solo { display: inline-flex; align-items: center; gap: .5rem; width: auto; height: auto; padding: .28rem .8rem .28rem .3rem; border: 1.5px solid var(--nuta-ink); border-radius: 999px; background: #fff; cursor: pointer; list-style: none; font-size: .84rem; } .nuta-selector-nino > summary::-webkit-details-marker { display: none; } .nuta-selector-nino > summary::after { content: ""; width: 0; height: 0; margin-left: .1rem; border: 4px solid transparent; border-top-color: var(--nuta-ink); transform: translateY(2px); } .nuta-selector-nino[open] > summary { background: var(--nuta-panel); } .nuta-selector-nino > summary:focus-visible { outline: 2px solid var(--nuta-ink); outline-offset: 2px; } .nuta-selector-nombre { font-size: .84rem; font-weight: 700; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nuta-selector-nino .nuta-avatar, .nuta-selector-solo .nuta-avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; } /* El desplegable, con cada cara y su nombre. */ .nuta-selector-panel { right: 0; left: auto; min-width: 13rem; } .nuta-selector-panel a { display: flex !important; align-items: center; gap: .55rem; padding: .45rem .6rem; text-decoration: none; color: var(--nuta-ink); font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: 0; } .nuta-selector-panel a:hover, .nuta-selector-panel a:focus-visible { background: var(--nuta-lima); outline: none; } .nuta-selector-panel a.nuta-selector-actual { font-weight: 800; background: var(--nuta-panel); } .nuta-selector-panel small { color: var(--nuta-soft); font-weight: 500; } @media (max-width: 900px) { .nuta-selector-nombre { max-width: 34vw; } } .nuta-role { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; background: var(--nuta-accent); color: var(--nuta-ink); padding: .28rem .6rem; } .nuta-hi { font-size: .82rem; color: var(--nuta-soft); } /* Cuerpo: menú lateral + contenido, separados por una línea a toda altura */ /* La columna del menú da 248px: con la letra a .86rem, «Métodos de pago» entra en una sola línea (a 220px se partía en dos). */ .nuta-cuerpo { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 0; align-items: stretch; padding-top: 2rem; } @media (max-width: 900px) { .nuta-cuerpo { grid-template-columns: 1fr; padding-top: 1.2rem; } } /* El lateral entero es lo pegajoso, en columna: el menú arriba y la tarjeta de perfil SIEMPRE al fondo (margin-top:auto). Antes lo sticky era la nav y el pie se le montaba encima al plegarse los grupos. */ .nuta-lateral { padding-right: 2rem; /* Bajo la barra superior, que ahora también es pegajosa. */ position: sticky; top: 5.5rem; align-self: start; display: flex; flex-direction: column; /* Alto de la pantalla visible: así el pie de perfil queda SIEMPRE abajo del todo y a la vista, sin irse al final de la página. Se descuenta la cabecera del panel Y la barra de administración de WordPress. */ height: calc(100vh - 11rem); } /* Si el menú creciera más que la pantalla, que haga scroll él, no la página. */ .nuta-lateral > .nuta-nav { overflow-y: auto; } .nuta-lateral > .nuta-nav { position: static; } .nuta-lateral > .nuta-lateral-perfil { margin-top: auto; } @media (max-width: 900px) { .nuta-lateral { padding-right: 0; position: static; min-height: 0; } .nuta-lateral > .nuta-lateral-perfil { margin-top: 1.4rem; } } /* Navegación lateral */ .nuta-nav { display: flex; flex-direction: column; gap: .1rem; } .nuta-nav a { font-family: var(--nuta-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: .86rem; color: var(--nuta-soft); text-decoration: none; padding: .7rem .8rem; display: flex; align-items: center; gap: .65rem; border-left: 3px solid transparent; transition: color .15s, background .15s, border-color .15s; } .nuta-nav .nuta-ico { flex: 0 0 18px; width: 18px; height: 18px; } /* Marca de "esta sección está a medias" */ .nuta-nav-alerta { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; font-size: .68rem; font-weight: 800; line-height: 1; background: var(--nuta-warn); color: #fff; cursor: help; } .nuta-nav a:hover { color: var(--nuta-ink); background: var(--nuta-panel); } /* Rótulo de cada grupo del menú: ordena sin ser pulsable */ .nuta-nav-grupo { display: block; margin: 1.1rem 0 .3rem; padding-left: .8rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nuta-soft); } .nuta-nav > .nuta-nav-grupo:first-child { margin-top: 0; } /* Los grupos del menú se PLIEGAN (acordeón): el rótulo es un summary con su flechita, y el JS cierra los demás al abrir uno. */ .nuta-nav-seccion > summary.nuta-nav-grupo { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .35rem; } .nuta-nav-seccion > summary.nuta-nav-grupo::-webkit-details-marker { display: none; } .nuta-nav-seccion > summary.nuta-nav-grupo::before { content: "▸"; font-size: .7rem; transition: transform .15s; } .nuta-nav-seccion[open] > summary.nuta-nav-grupo::before { transform: rotate(90deg); } .nuta-nav-seccion > summary.nuta-nav-grupo:hover { color: var(--nuta-ink); } /* Sin anillo de foco al hacer CLIC (Chrome lo pinta en los summary): para teclado, el resalte es de fondo, no un borde. */ .nuta-nav-seccion > summary.nuta-nav-grupo:focus, .nuta-nav-seccion > summary.nuta-nav-grupo:focus-visible { outline: none; background: var(--nuta-panel); border-radius: 4px; color: var(--nuta-ink); } /* Apertura y cierre SUAVES: la altura del contenido se anima con ::details-content e interpolate-size (Chrome/Edge modernos; donde no exista, el acordeón abre al corte y funciona igual). */ .nuta-nav { interpolate-size: allow-keywords; } .nuta-nav-seccion::details-content { block-size: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: block-size .3s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, transform .3s cubic-bezier(.4, 0, .2, 1), content-visibility .3s allow-discrete; } .nuta-nav-seccion[open]::details-content { block-size: auto; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .nuta-nav-seccion::details-content { transition: none; } } /* ========================================================================== ESTILO · el color de la casa, con su vista previa al lado ========================================================================== */ /* Dos tarjetas a la par, que en el móvil se ponen una encima de otra. La usan Estilo (color + vista previa) y Formularios (claves + explicación). */ .nuta-dos-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; } @media (max-width: 900px) { .nuta-dos-cols { grid-template-columns: minmax(0, 1fr); } } .nuta-estilo-sugeridos { display: flex; flex-wrap: wrap; gap: .5rem; } .nuta-estilo-muestra { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0; border: 2px solid var(--nuta-ink); } .nuta-estilo-muestra:hover, .nuta-estilo-muestra:focus-visible { outline: 2px solid var(--nuta-ink); outline-offset: 2px; } .nuta-estilo-paleta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem .9rem; margin: 0; } .nuta-estilo-paleta > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--nuta-line); } .nuta-estilo-paleta dt { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; } .nuta-estilo-paleta dd { margin: 0; font-family: ui-monospace, monospace; font-size: .76rem; color: var(--nuta-soft); } .nuta-estilo-punto { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgb(0 0 0 / .18); display: inline-block; } /* La maqueta: sus colores salen de las variables que el JS pone AQUÍ, no de las del sitio — así se ve el cambio sin aplicarlo a nada. */ .nuta-previa-marco { border: 1.5px solid var(--nuta-ink); border-radius: var(--nuta-radius); overflow: hidden; background: var(--nuta-bg); } .nuta-previa-cab { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 2px solid var(--nuta-ink); background: var(--nuta-papel); color: var(--nuta-ink); font-size: .82rem; } .nuta-previa-logo { width: 26px; height: 26px; border-radius: 50%; background: var(--nuta-ink); flex: 0 0 auto; } .nuta-previa-cta { margin-left: auto; background: var(--nuta-accent); color: var(--nuta-ink); padding: .3rem .7rem; border-radius: var(--nuta-radius); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .nuta-previa-cuerpo { padding: 1rem .9rem; background: var(--nuta-bg); color: var(--nuta-ink); } .nuta-previa-titulo { margin: 0; font-weight: 800; font-size: 1.05rem; } .nuta-previa-texto { margin: .3rem 0 0; color: var(--nuta-soft); font-size: .85rem; } .nuta-previa-badge { display: inline-block; background: var(--nuta-accent); color: var(--nuta-ink); border-radius: 999px; padding: .16rem .6rem; font-size: .7rem; font-weight: 700; } .nuta-previa-badge-ok { background: var(--nuta-ok); color: #fff; } .nuta-previa-badge-bad { background: var(--nuta-bad); color: #fff; } .nuta-previa-fila { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--nuta-line); font-size: .85rem; } .nuta-previa-boton { display: inline-block; background: var(--nuta-accent); color: var(--nuta-ink); border: 2px solid var(--nuta-ink); border-radius: var(--nuta-radius); padding: .5rem .9rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .nuta-previa-boton-suave { background: transparent; } /* La barra de aviso del Panel: un número, qué es, y adónde lleva. */ .nuta-view .nuta-barra-aviso { display: flex; align-items: flex-start; gap: .7rem; flex-wrap: wrap; margin: 1.4rem 0; padding: .9rem 1.1rem; background: var(--nuta-panel); border-radius: var(--nuta-radius); color: var(--nuta-ink); text-decoration: none; font-weight: 700; } .nuta-view .nuta-barra-aviso:hover, .nuta-view .nuta-barra-aviso:focus-visible { background: color-mix(in srgb, var(--nuta-accent) 22%, #fff); outline: none; } /* El texto ocupa lo que quede, pero puede encogerse hasta 14rem: así el número NUNCA se queda solo en una línea con el texto debajo, que es lo que pasaba en un móvil —una cifra suelta arriba no dice nada—. */ .nuta-view .nuta-barra-aviso .nuta-cuenta { flex: 0 0 auto; margin-top: .1rem; } .nuta-view .nuta-barra-aviso-txt { flex: 1 1 14rem; min-width: 0; display: grid; gap: .15rem; } /* Qué falta exactamente, debajo del titular y sin gritar. */ .nuta-view .nuta-barra-aviso-txt small { font-weight: 500; font-size: .82rem; line-height: 1.35; color: var(--nuta-soft); } .nuta-view .nuta-barra-aviso-ir { margin-left: auto; font-size: .78rem; letter-spacing: .04em; } @media (max-width: 700px) { /* Al bajar de línea, el «Ir a…» se queda pegado al borde derecho, colgando lejos de lo que acompaña. Abajo a la izquierda se lee como lo que es: el paso siguiente. */ .nuta-view .nuta-barra-aviso-ir { margin-left: 0; } } /* Los tres datos de cabecera de una clase de hoy: gente, profe y sala. */ .nuta-clase-hoy-datos { list-style: none; margin: .6rem 0 .2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .85rem; } .nuta-clase-hoy-datos > li { display: flex; align-items: center; gap: .35rem; } .nuta-clase-hoy-datos > li + li::before { content: "·"; color: var(--nuta-soft); margin-right: .55rem; } /* La tarjeta de QUIÉN SOY al pie del menú lateral: foto, nombre y salir. */ .nuta-lateral-perfil { margin-top: 1.6rem; padding: 1rem .4rem 0 0; border-top: 1px solid var(--nuta-line); display: flex; flex-direction: column; gap: .35rem; } .nuta-lateral-yo { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .35rem .5rem; border-radius: var(--nuta-radius); text-decoration: none; color: var(--nuta-ink); } a.nuta-lateral-yo:hover, a.nuta-lateral-yo:focus-visible { background: var(--nuta-panel); outline: none; } .nuta-lateral-quien { display: flex; flex-direction: column; min-width: 0; } .nuta-lateral-quien strong { font-size: .85rem; line-height: 1.25; } .nuta-lateral-quien small { color: var(--nuta-soft); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nuta-lateral-salir, .nuta-lateral-web { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: var(--nuta-radius); color: var(--nuta-soft); text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .04em; } .nuta-lateral-salir:hover, .nuta-lateral-salir:focus-visible, .nuta-lateral-web:hover, .nuta-lateral-web:focus-visible { background: var(--nuta-panel); color: var(--nuta-ink); outline: none; } .nuta-lateral-salir .nuta-ico, .nuta-lateral-web .nuta-ico { width: 16px; height: 16px; } /* «Ir a la web» va ARRIBA del todo del pie, separado de la tarjeta. */ .nuta-lateral-web { order: -1; margin-bottom: .2rem; } /* Subsección: cuelga de su sección, sangrada a la altura del texto del padre */ .nuta-nav a.nuta-nav-hija { padding-left: calc(18px + .65rem + 1.1rem); font-size: .78rem; } .nuta-nav a.nuta-nav-activa { color: var(--nuta-ink); border-left-color: var(--nuta-accent); font-weight: 800; background: var(--nuta-panel); } /* Botón de menú: solo en pantallas estrechas */ .nuta-lateral-toggle { display: none; width: 100%; font-family: var(--nuta-sans); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem 1rem; cursor: pointer; border: 2px solid var(--nuta-ink); border-radius: var(--nuta-radius); background: var(--nuta-accent); color: var(--nuta-ink); } /* ========================================================================== MÓVIL · el menú es un panel LATERAL que entra desde la izquierda, con su botón de hamburguesa fijo arriba. Antes se desplegaba empujando el contenido: con el acordeón y la tarjeta de perfil, eso era una columna larguísima que tapaba la pantalla entera. ========================================================================== */ /* Cuánto baja todo por la barra de administración de WordPress (solo la ve quien es admin). Sin ella, cero. */ body.admin-bar { --nuta-adminbar: 32px; } @media (max-width: 782px) { body.admin-bar { --nuta-adminbar: 46px; } } @media (max-width: 900px) { /* La hamburguesa: fija junto a la marca, siempre alcanzable. */ /* Vive en la barra de marca (que ya es pegajosa): viaja con ella, y no se va con el menú al cerrarse ni lo tapa la barra de WordPress. */ .nuta-lateral-toggle { display: inline-flex; align-items: center; gap: .5rem; width: auto; padding: .55rem .8rem; order: -1; } .nuta-topbar { gap: .6rem; } .nuta-lateral-toggle::before { content: ""; width: 16px; height: 12px; flex: 0 0 auto; background: currentColor; /* Tres rayas, dibujadas con máscara para que hereden el color. */ -webkit-mask: linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat; mask: linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat; } /* Sitio para la hamburguesa sobre la barra de marca. */ .nuta-topbar { padding-left: 8.5rem; min-height: 3.2rem; } /* El lateral, fuera de pantalla hasta que se abre. */ .nuta-lateral { position: fixed; top: 0; left: 0; z-index: 55; width: min(280px, 82vw); height: 100dvh; margin: 0; padding: calc(4rem + var(--nuta-adminbar, 0rem)) 1rem 1rem; background: #fff; border-right: 1px solid var(--nuta-line); box-shadow: 4px 0 24px rgb(0 0 0 / .16); transform: translateX(-102%); transition: transform .25s ease; overflow-y: auto; overscroll-behavior: contain; } .nuta-lateral.nuta-abierto { transform: translateX(0); } .nuta-nav { display: flex; } .nuta-nav a { border-left: 0; margin-left: 0; } .nuta-nav a.nuta-nav-activa { border-left: 3px solid var(--nuta-accent); } /* El velo que oscurece el contenido: cierra al tocarlo (lo pone el JS). */ .nuta-velo { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .38); border: 0; padding: 0; cursor: pointer; animation: nuta-velo-in .2s ease; } } @keyframes nuta-velo-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nuta-lateral { transition: none; } .nuta-velo { animation: none; } } /* Contenido: separado del menú por una línea vertical continua */ .nuta-view { padding: 0 0 4rem 2.5rem; min-width: 0; border-left: 1px solid var(--nuta-line); } @media (max-width: 900px) { .nuta-view { padding-left: 0; border-left: 0; padding-top: 1rem; border-top: 1px solid var(--nuta-line); } } /* Cabecera de la vista: título + explicación, cerrada con una línea */ .nuta-view > h2:first-child { margin-bottom: .5rem; } /* Texto secundario. Se usa en toda la app, así que necesita su propia regla: antes solo se veía gris cuando caía justo detrás del

. */ .muted { color: var(--nuta-soft); } .nuta-view p.muted, .nuta-publico p.muted { max-width: 78ch; font-size: .95rem; } /* Entradilla de sección: la frase que explica para qué sirve la pantalla. */ .nuta-view > h2:first-child + p.muted, .nuta-view > h2:first-child + p { margin: 0 0 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--nuta-line); } /* Sub-pestañas dentro de una sección (Cuotas, Comunicados…) */ /* Sin overflow: las pestañas ya se reparten en varias líneas si no caben. Con `overflow-x` el otro eje pasa de `visible` a `auto` (así lo manda la spec) y el -1px de margen de las pestañas asomaba una barra vertical de 15px. */ .nuta-tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1.4rem; border-bottom: 1px solid var(--nuta-line); } .nuta-tabs a { font-family: var(--nuta-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: .74rem; color: var(--nuta-soft); text-decoration: none; padding: .7rem .95rem; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .nuta-tabs a:hover { color: var(--nuta-ink); } .nuta-tabs a.nuta-tab-activa { color: var(--nuta-ink); border-bottom-color: var(--nuta-accent); font-weight: 800; } /* ========================================================================== Tipografía de contenido ========================================================================== */ .nuta-app h2, .nuta-view h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; margin: 0 0 .3rem; } .nuta-view h3 { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; margin: 2rem 0 .8rem; } .nuta-view h4 { font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 1.4rem 0 .6rem; } .nuta-view p { margin: 0 0 1rem; } .nuta-view small { color: var(--nuta-soft); } .nuta-view a, .nuta-publico a { color: var(--nuta-ink); text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: .18em; } .nuta-view a:hover, .nuta-publico a:hover { text-decoration-color: var(--nuta-accent); } /* ========================================================================== Tablas ========================================================================== */ /* table-layout:fixed = las columnas miden lo que dice , no lo que ocupa el contenido: así todas las tablas de una vista quedan alineadas entre sí. */ .nuta-view table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .92rem; table-layout: fixed; } .nuta-view th, .nuta-view td { overflow-wrap: anywhere; } .nuta-view thead th { text-align: left; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--nuta-soft); padding: .6rem .7rem; border-bottom: 2px solid var(--nuta-ink); } .nuta-view tbody td { padding: .7rem .7rem; border-bottom: 1px solid var(--nuta-line); vertical-align: middle; } .nuta-view tbody tr:hover td { background: var(--nuta-panel); } /* Las tablas anchas scrollean DENTRO de su caja: la página nunca se desplaza en horizontal */ .nuta-scroll { overflow-x: auto; max-width: 100%; margin: 1rem 0 1.5rem; -webkit-overflow-scrolling: touch; } .nuta-scroll > table { margin: 0; min-width: 640px; } /* Dentro de una tarjeta estrecha (columna lateral, ficha) el mínimo sobra y provocaría scroll horizontal en cada tabla pequeña. */ .nuta-card .nuta-scroll > table { min-width: 0; } /* ========================================================================== Botones — un ÚNICO estilo en todo el back office ========================================================================== */ /* Un único estilo de botón en todo el panel (decisión del cliente). */ .nuta-btn, .nuta-form button, .nuta-view button[type="submit"] { font-family: var(--nuta-sans); font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--nuta-radius); padding: .7rem 1.2rem; border: 2px solid var(--nuta-ink); background: var(--nuta-accent); color: var(--nuta-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; line-height: 1; transition: background .15s, color .15s; } .nuta-btn:hover, .nuta-btn:focus-visible, .nuta-form button:hover, .nuta-view button[type="submit"]:hover, .nuta-form button:focus-visible, .nuta-view button[type="submit"]:focus-visible { background: var(--nuta-ink); color: #fff; border-color: var(--nuta-ink); } /* Botón pequeño en filas de tabla */ .nuta-view td .nuta-btn, .nuta-view td button[type="submit"] { padding: .45rem .8rem; font-size: .72rem; white-space: nowrap; /* En blanco: dentro de una fila no compiten con la acción principal de la página */ background: #fff; border-width: 1px; } /* Sin esto, el blanco de arriba gana al hover general y el botón se queda texto blanco sobre fondo blanco: invisible justo al ir a pulsarlo. */ .nuta-view td .nuta-btn:hover, .nuta-view td .nuta-btn:focus-visible, .nuta-view td button[type="submit"]:hover, .nuta-view td button[type="submit"]:focus-visible { background: var(--nuta-ink); color: #fff; } /* Las tarifas de la tabla de cursos, como chips que no se parten. */ .nuta-view .nuta-tarifa { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; border: 1px solid var(--nuta-line); border-radius: 999px; padding: .14rem .55rem; font-size: .74rem; font-weight: 700; margin: .1rem .2rem .1rem 0; background: var(--nuta-bg); } .nuta-view .nuta-tarifa small { font-weight: 600; color: var(--nuta-soft); } .nuta-view td form { display: inline-block; } /* Barra de acciones: la zona de herramientas de la vista */ .nuta-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 2rem; } .nuta-vista-toggle { display: flex; gap: .4rem; } .nuta-vista-toggle .nuta-btn { background: transparent; color: var(--nuta-ink); } .nuta-vista-toggle .nuta-btn.nuta-activo { background: var(--nuta-accent); color: var(--nuta-ink); } /* El hover se declara aquí también: si no, la regla de arriba deja el fondo claro mientras el hover genérico pone el texto en blanco (invisible). */ .nuta-vista-toggle .nuta-btn:hover, .nuta-vista-toggle .nuta-btn:focus-visible, .nuta-vista-toggle .nuta-btn.nuta-activo:hover, .nuta-vista-toggle .nuta-btn.nuta-activo:focus-visible { background: var(--nuta-ink); color: #fff; border-color: var(--nuta-ink); } /* ========================================================================== Badges / estados ========================================================================== */ .nuta-badge { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--nuta-sans); font-weight: 700; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--nuta-ink); background: #fff; color: var(--nuta-ink); white-space: nowrap; } .nuta-badge-ok { background: var(--nuta-turquesa); } .nuta-badge-aviso { background: var(--nuta-lima); } .nuta-badge-error { background: var(--nuta-rosa); } /* ========================================================================== Avisos flash y avisos de home ========================================================================== */ .nuta-flash { padding: .85rem 1.1rem; margin: 0 0 1.4rem; border-radius: var(--nuta-radius); font-weight: 600; font-size: .92rem; border: 1px solid var(--nuta-ink); } .nuta-flash-ok { background: color-mix(in srgb, var(--nuta-turquesa) 24%, #fff); } .nuta-flash-error { background: color-mix(in srgb, var(--nuta-rosa) 40%, #fff); } .nuta-avisos { display: grid; gap: .8rem; margin: 1.5rem 0; max-width: 760px; } .nuta-aviso { border: 1px solid var(--nuta-line); border-left: 4px solid var(--nuta-accent); background: var(--nuta-panel); padding: .9rem 1.1rem; } .nuta-aviso strong { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .2rem; } /* ========================================================================== Formularios ========================================================================== */ .nuta-form { display: grid; gap: 1rem; max-width: 680px; margin: 1.2rem 0; } /* Rotulito que agrupa los campos de un formulario largo en secciones. */ /* Rótulo que parte un formulario en bloques («Crear un grupo», «Tarifas»). Separa ARRIBA, donde acaba lo anterior, y se pega a lo que titula. Va repetido con `.nuta-view p.nuta-form-sec` a propósito: todos estos rótulos son

, y `.nuta-view p{margin:0 0 1rem}` —una clase MÁS un elemento— le ganaba a la clase sola. El resultado era el contrario del que se busca: pegado al bloque de arriba y despegado del suyo. */ .nuta-form-sec, .nuta-view p.nuta-form-sec { margin: 1.4rem 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--nuta-line); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--nuta-soft); } .nuta-form-sec:first-child, .nuta-view p.nuta-form-sec:first-child, .nuta-panel > .nuta-form-sec:first-child { margin-top: 0; } .nuta-form label { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; display: block; margin-bottom: .3rem; } .nuta-form input[type=text], .nuta-form input[type=email], .nuta-form input[type=password], .nuta-form input[type=date], .nuta-form input[type=time], .nuta-form input[type=number], .nuta-form input[type=month], .nuta-form input[type=url], .nuta-form input[type=tel], .nuta-form select, .nuta-form textarea, .nuta-view input[type=text], .nuta-view input[type=email], .nuta-view input[type=date], .nuta-view input[type=month], .nuta-view input[type=number], .nuta-view input[type=url], .nuta-view select { width: 100%; font-family: var(--nuta-sans); font-size: .95rem; padding: .6rem .75rem; border: 1.5px solid var(--nuta-ink); border-radius: var(--nuta-radius); background: #fff; color: var(--nuta-ink); } .nuta-form input:focus, .nuta-form select:focus, .nuta-form textarea:focus, .nuta-view input:focus-visible, .nuta-view select:focus-visible, .nuta-view textarea:focus-visible, .nuta-publico input:focus-visible, .nuta-publico select:focus-visible, .nuta-publico textarea:focus-visible { outline: 2px solid var(--nuta-ink); outline-offset: 1px; box-shadow: 0 0 0 4px var(--nuta-accent); } .nuta-form fieldset { border: 1px solid var(--nuta-line); border-radius: var(--nuta-radius); padding: 1.1rem 1.2rem; } .nuta-form fieldset h3, .nuta-form fieldset h4 { margin-top: 0; } .nuta-campo-inline { display: flex; gap: 1rem; flex-wrap: wrap; } .nuta-campo-inline > div { flex: 1; min-width: 180px; } .nuta-form .nuta-ayuda, .nuta-ayuda { font-size: .76rem; line-height: 1.45; color: var(--nuta-soft); font-weight: 400; text-transform: none; letter-spacing: 0; } /* La ayuda suelta bajo un campo ocupa su propia línea (dentro de un label sigue en línea) */ .nuta-form > small.nuta-ayuda, .nuta-form div > small.nuta-ayuda { display: block; margin-top: .4rem; } /* Honeypot anti-bots: invisible */ .nuta-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* reCAPTCHA v3. La insignia de Google se planta abajo a la derecha, encima de la burbuja de WhatsApp, y tapaba el botón de escribir: se esconde y a cambio va el aviso junto a cada formulario, que es lo que Google pide para poder esconderla. */ .grecaptcha-badge { visibility: hidden; } .nuta-captcha-aviso { margin: .6rem 0 0; font-size: .72rem; line-height: 1.5; color: var(--nuta-soft); } .nuta-captcha-aviso a { color: inherit; text-decoration: underline; } /* Filtros de la vista lista */ .nuta-filtros { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; margin: 1rem 0 1.4rem; padding: .9rem 1rem; border: 1px solid var(--nuta-line); border-radius: var(--nuta-radius); background: var(--nuta-panel); } .nuta-filtros label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; } .nuta-filtros input, .nuta-filtros select { font-family: var(--nuta-sans); font-size: .9rem; padding: .5rem .6rem; border: 1.5px solid var(--nuta-ink); border-radius: var(--nuta-radius); background: #fff; color: var(--nuta-ink); } /* ========================================================================== Modales (dialog nativo: Esc cierra, foco atrapado, fondo inerte) ========================================================================== */ dialog.nuta-modal { width: min(760px, calc(100vw - 2.5rem)); max-width: 100%; max-height: min(88vh, 900px); padding: 0; border: 2px solid var(--nuta-ink); border-radius: var(--nuta-radius); background: var(--nuta-bg); color: var(--nuta-ink); font-family: var(--nuta-sans); overflow: hidden; } dialog.nuta-modal::backdrop { background: rgba(30, 30, 30, .55); } dialog.nuta-modal[open] { display: flex; flex-direction: column; } /* Los modales del panel entran igual que los públicos: velo y caja que sube. */ @keyframes nuta-modal-velo { from { opacity: 0; } to { opacity: 1; } } @keyframes nuta-modal-sube { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } dialog.nuta-modal[open] { animation: nuta-modal-sube .22s cubic-bezier(.2, .8, .3, 1); } dialog.nuta-modal[open]::backdrop { animation: nuta-modal-velo .22s ease; } @media (prefers-reduced-motion: reduce) { dialog.nuta-modal[open], dialog.nuta-modal[open]::backdrop { animation: none; } } .nuta-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 2px solid var(--nuta-ink); background: var(--nuta-bg); } .nuta-modal-head h3 { margin: 0; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; } .nuta-modal-cerrar { border: 0; background: transparent; color: var(--nuta-ink); cursor: pointer; font-size: 1.5rem; line-height: 1; padding: .2rem .5rem; border-radius: var(--nuta-radius); } .nuta-modal-cerrar:hover { background: var(--nuta-ink); color: #fff; } .nuta-modal-body { padding: 1.3rem 1.4rem; overflow-y: auto; flex: 1; } .nuta-modal-body .nuta-form { margin: 0; max-width: none; } .nuta-modal-foot { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: 1rem 1.4rem; border-top: 1px solid var(--nuta-line); background: var(--nuta-panel); } /* Título de un bloque dentro del modal: separa las acciones sin parecer el final */ .nuta-modal-sec { margin: 1.6rem 0 .8rem; padding-top: 1rem; border-top: 1px solid var(--nuta-line); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .nuta-modal-body > .nuta-modal-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .nuta-modal-sec .nuta-ayuda { display: inline-block; margin-left: .35rem; } /* Bloqueo del scroll de fondo mientras hay un modal abierto */ body.nuta-modal-abierto { overflow: hidden; } /* Con el fondo bloqueado NO hay barra de scroll, así que el ancho de la app vuelve a ser el viewport entero: sin esto quedaría un hueco a los lados justo del grosor de la barra que acaba de desaparecer. */ body.nuta-modal-abierto .nuta-app { --nuta-ancho: 100vw; } /* --- Pestañas dentro de un modal --- */ .nuta-modal-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--nuta-line); margin: -.3rem 0 1.3rem; overflow-x: auto; } .nuta-modal-tabs button { font-family: var(--nuta-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .72rem; background: transparent; color: var(--nuta-soft); border: 0; border-bottom: 3px solid transparent; padding: .7rem .95rem; margin-bottom: -1px; cursor: pointer; white-space: nowrap; border-radius: 0; } .nuta-modal-tabs button:hover { background: transparent; color: var(--nuta-ink); } .nuta-modal-tabs button[aria-selected="true"] { color: var(--nuta-ink); border-bottom-color: var(--nuta-accent); } /* Están dentro de .nuta-form, así que heredarían el fondo del botón principal. */ .nuta-modal-tabs button:focus-visible { background: transparent; color: var(--nuta-ink); outline: 2px solid var(--nuta-ink); outline-offset: -2px; } .nuta-panel[hidden] { display: none; } .nuta-panel { display: grid; gap: 1rem; } /* --- Switch (interruptor) --- Se especifica junto a `.nuta-form label` para ganar a sus reglas (display:block, mayúsculas y peso), que si no deforman el interruptor. */ .nuta-switch, .nuta-form label.nuta-switch { display: flex; align-items: flex-start; gap: .8rem; cursor: pointer; padding: .5rem 0; font-weight: 400; text-transform: none; letter-spacing: 0; margin-bottom: 0; font-size: 1rem; } /* Oculto a la vista pero accesible: mantiene foco y navegación por teclado. */ .nuta-switch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .nuta-switch > .nuta-pista { flex: 0 0 44px; width: 44px; height: 25px; min-width: 44px; box-sizing: border-box; border-radius: 999px; background: var(--nuta-2); border: 2px solid var(--nuta-ink); position: relative; transition: background .15s; margin-top: .1rem; } .nuta-switch > .nuta-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--nuta-ink); transition: transform .15s; } .nuta-switch input:checked ~ .nuta-pista { background: var(--nuta-accent); } .nuta-switch input:checked ~ .nuta-pista::after { transform: translateX(19px); } .nuta-switch input:focus-visible ~ .nuta-pista { outline: 2px solid var(--nuta-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--nuta-accent); } .nuta-switch .nuta-switch-txt { display: block; } .nuta-switch .nuta-switch-txt b { display: block; font-weight: 700; font-size: .88rem; text-transform: none; letter-spacing: 0; } .nuta-switch .nuta-switch-txt small { display: block; color: var(--nuta-soft); font-size: .8rem; line-height: 1.4; text-transform: none; letter-spacing: 0; } /* Campos que dependen de un switch */ .nuta-dependiente[hidden] { display: none; } /* ========================================================================== Calendario ========================================================================== */ /* Salto rápido a una semana concreta: pegado bajo la cabecera del calendario */ .nuta-ir-a { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.6rem; padding: .7rem 1rem; border: 1px solid var(--nuta-line); border-top: 0; background: var(--nuta-bg); } .nuta-ir-a form { display: flex; gap: .5rem; align-items: center; } .nuta-ir-a label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--nuta-soft); } .nuta-ir-a input[type=date] { font-family: var(--nuta-sans); font-size: .9rem; padding: .45rem .6rem; border: 1.5px solid var(--nuta-ink); border-radius: var(--nuta-radius); background: #fff; color: var(--nuta-ink); } .nuta-sesion-tag.nuta-lleno { color: var(--nuta-naranja); font-weight: 800; } /* Lista agrupada por día */ .nuta-dia-grupo { margin-bottom: 1.6rem; } .nuta-dia-grupo table { margin-top: .4rem; } .nuta-dia-cabecera { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .55rem .7rem; background: var(--nuta-panel); border-left: 4px solid var(--nuta-ink); font-size: .92rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; } .nuta-dia-grupo.nuta-hoy .nuta-dia-cabecera { border-left-color: var(--nuta-accent); background: color-mix(in srgb, var(--nuta-accent) 22%, #fff); } .nuta-dia-cabecera .nuta-cuenta { background: var(--nuta-2); border-radius: 999px; padding: .12rem .55rem; font-size: .7rem; } .nuta-dia-cabecera .nuta-mes-add { margin-left: auto; } /* Vista MES · la navegación es la cabecera del propio calendario */ .nuta-mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0; padding: .9rem 1rem; background: var(--nuta-panel); border: 1px solid var(--nuta-line); border-bottom: 0; } .nuta-mes-nav h3 { margin: 0; display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; } .nuta-mes-nav .nuta-cuenta { font-size: .68rem; font-weight: 700; background: var(--nuta-2); border-radius: 999px; padding: .18rem .6rem; letter-spacing: .04em; } .nuta-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--nuta-line); border: 1px solid var(--nuta-line); margin-bottom: 2.5rem; } .nuta-mes-cab { background: var(--nuta-ink); color: #fff; padding: .5rem .6rem; text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .nuta-mes-dia { background: var(--nuta-bg); min-height: 124px; padding: .5rem .45rem; display: flex; flex-direction: column; gap: .35rem; } .nuta-mes-dia.nuta-fuera { background: var(--nuta-panel); opacity: .55; } .nuta-mes-dia.nuta-hoy { box-shadow: inset 0 0 0 2px var(--nuta-accent); } .nuta-mes-num { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; } .nuta-mes-add { border: 1px solid var(--nuta-line); background: transparent; color: var(--nuta-soft); cursor: pointer; width: 20px; height: 20px; line-height: 1; border-radius: 4px; padding: 0; font-size: .9rem; } .nuta-mes-dia:hover .nuta-mes-add, .nuta-dia:hover .nuta-mes-add, .nuta-mes-add:focus-visible { border-color: var(--nuta-ink); color: var(--nuta-ink); } .nuta-mes-add:hover { background: var(--nuta-accent); } .nuta-sesion { display: flex; flex-direction: column; gap: .05rem; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--nuta-line); border-left: 3px solid var(--nuta-serv, var(--nuta-accent)); border-radius: 3px; background: var(--nuta-bg); color: var(--nuta-ink); padding: .4rem .45rem; font-family: var(--nuta-sans); font-size: .72rem; line-height: 1.35; text-transform: none; letter-spacing: 0; } .nuta-sesion:hover { background: var(--nuta-panel); } .nuta-sesion-hora { font-weight: 800; font-variant-numeric: tabular-nums; } .nuta-sesion-nombre { overflow-wrap: anywhere; } .nuta-sesion-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nuta-soft); } /* Dónde es la clase: se lee sin competir con el nombre del curso. */ .nuta-sesion-lugar { font-size: .66rem; color: var(--nuta-soft); overflow-wrap: anywhere; } .nuta-sesion-lugar::before { content: "· "; } /* El grupo de la clase: solo sale cuando el curso está repartido, y es lo que distingue una franja de otra, así que va en negrita bajo el nombre. */ .nuta-sesion-grupo { font-size: .66rem; font-weight: 700; letter-spacing: .03em; color: var(--nuta-soft); overflow-wrap: anywhere; } /* Quién la da: se lee como el lugar, en la línea de los datos de la clase. Sin asignar se dice, no se calla —es un hueco que rellenar—, pero en cursiva y no en rojo: hasta que la escuela reparte las clases lo normal es que le falte a todas, y un calendario entero en rojo no avisa de nada. */ .nuta-sesion-profe { font-size: .66rem; color: var(--nuta-soft); overflow-wrap: anywhere; } .nuta-sesion-profe::before { content: "· "; } .nuta-sesion-sinprofe { font-style: italic; opacity: .75; } .nuta-sesion-cancelada { opacity: .6; border-left-color: var(--nuta-bad); } .nuta-sesion-cancelada .nuta-sesion-hora, .nuta-sesion-cancelada .nuta-sesion-nombre { text-decoration: line-through; } .nuta-sesion-suelta { border-left-color: var(--nuta-azul); } @media (max-width: 900px) { .nuta-mes { grid-template-columns: 1fr; } .nuta-mes-cab { display: none; } .nuta-mes-dia { min-height: 0; } .nuta-mes-dia.nuta-fuera { display: none; } } /* Vista SEMANA */ .nuta-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .7rem; margin: 0 0 2.5rem; } @media (max-width: 1100px) { .nuta-semana { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 780px) { .nuta-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .nuta-semana { grid-template-columns: 1fr; } } .nuta-dia { border: 1px solid var(--nuta-line); border-radius: var(--nuta-radius); background: var(--nuta-bg); display: flex; flex-direction: column; min-width: 0; } .nuta-dia.nuta-hoy { box-shadow: inset 0 0 0 2px var(--nuta-accent); } .nuta-dia-titulo { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: 0; padding: .6rem .7rem; border-bottom: 2px solid var(--nuta-ink); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .nuta-dia-titulo .nuta-cuenta { background: var(--nuta-2); border-radius: 999px; padding: .1rem .45rem; font-size: .68rem; } .nuta-dia-titulo .nuta-mes-add { flex: 0 0 auto; } .nuta-dia-cuerpo { padding: .5rem; display: flex; flex-direction: column; gap: .5rem; } .nuta-dia-vacio { color: var(--nuta-soft); text-align: center; margin: .6rem 0; } /* ========================================================================== Acordeón (details/summary nativo) ========================================================================== */ .nuta-acordeon { border-bottom: 1px solid var(--nuta-line); } .nuta-acordeon > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .7rem; padding: 1.05rem .2rem; font-family: var(--nuta-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; font-size: 1.1rem; color: var(--nuta-ink); } .nuta-acordeon > summary::-webkit-details-marker { display: none; } .nuta-acordeon > summary:hover { background: var(--nuta-panel); } .nuta-acordeon > summary:focus-visible { outline: 2px solid var(--nuta-ink); outline-offset: -2px; } .nuta-acordeon > summary::before { content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; margin-left: .15rem; border-right: 2.5px solid var(--nuta-ink); border-bottom: 2.5px solid var(--nuta-ink); transform: rotate(-45deg) translate(-2px, -2px); transition: transform .18s ease; } .nuta-acordeon[open] > summary::before { transform: rotate(45deg) translate(0, -3px); } .nuta-acordeon .nuta-cuenta { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--nuta-ink); background: var(--nuta-2); border-radius: 999px; padding: .18rem .6rem; } .nuta-acordeon[open] .nuta-cuenta { background: var(--nuta-accent); } .nuta-acordeon > .nuta-acordeon-cuerpo { padding-bottom: .6rem; } /* Los bloques de «pendientes» (solicitudes, documentos por aprobar) se señalan con FONDO gris, sin marco naranja: más tranquilo y se lee igual. */ .nuta-view details.nuta-acordeon.nuta-acordeon-gris, .nuta-view details.nuta-acordeon.nuta-solicitudes-pend { background: var(--nuta-panel); border: 0; border-radius: var(--nuta-radius); padding: .1rem .9rem .3rem; } .nuta-view details.nuta-acordeon.nuta-acordeon-gris > summary:hover, .nuta-view details.nuta-acordeon.nuta-solicitudes-pend > summary:hover { background: transparent; } /* Aceptar y rechazar, en la fila. A diferencia del menú ⋯, aquí son DOS cosas y no siempre caben en una línea: se dejan envolver y en una pantalla estrecha se apilan, en vez de empujar la tabla fuera con su barra de scroll. Nada de display:flex en el : dejaría de ser celda y se llevaría por delante el ancho que le da el . Con inline-block envuelven solas. */ .nuta-view td.nuta-solicitud-acciones { text-align: right; white-space: normal; } .nuta-view td.nuta-solicitud-acciones form { display: inline-block; margin: 0; } .nuta-view td.nuta-solicitud-acciones > * { margin: .15rem 0 .15rem .35rem; } /* ========================================================================== GRUPOS de un curso · Alumnado › Por curso y su modal Todas las reglas van bajo .nuta-view: compiten con las genéricas de tabla y de campo del panel, que ya pesan (0,1,2), y sin el prefijo perderían. ========================================================================== */ /* Una fila que sigue ahí pero ya no se ofrece (un grupo archivado): se lee, se puede reactivar, y no compite con las vivas. */ .nuta-view .nuta-fila-apagada > td { opacity: .62; } /* Barra de sección dentro de un acordeón: el resumen a la izquierda y su acción a la derecha, más apretada que la barra de la vista (que separa 2rem). */ .nuta-view .nuta-barra-sec { margin: 0 0 .9rem; align-items: baseline; } /* --- columna «Grupo» de las tablas de alumnado ---------------------------- */ /* El desplegable ocupa el ancho de la celda y debajo, en pequeño, a qué horas viene ese grupo. Va por clase y no por el name del campo: el atributo lleva el id de la inscripción y un selector así se rompe al tocar el formulario. */ .nuta-view .nuta-select-grupo { width: 100%; max-width: 100%; min-width: 0; } .nuta-view .nuta-grupo-fijo { display: block; font-weight: 500; } .nuta-view .nuta-grupo-pie { display: block; margin-top: .3rem; font-size: .74rem; line-height: 1.35; color: var(--nuta-soft); } .nuta-view .nuta-grupo-pie-aviso { color: var(--nuta-bad); } /* --- guardado en lote del reparto ----------------------------------------- */ /* Va debajo del pie de la tabla, que ya deja aire por encima. */ .nuta-view .nuta-lote-barra { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 0 0 1.4rem; } .nuta-view .nuta-lote-barra .nuta-ayuda { flex: 1 1 18rem; margin: 0; } /* Lo tocado y aún sin guardar se ve de un vistazo. El respaldo va primero por si el navegador no entiende color-mix; el hover de la fila no debe taparlo. */ .nuta-view tbody tr.nuta-fila-tocada td, .nuta-view tbody tr.nuta-fila-tocada:hover td { background: var(--nuta-2); background: color-mix(in srgb, var(--nuta-accent) 26%, #fff); } /* --- «Todos los alumnos», la ficha fija del modal ------------------------- */ .nuta-view .nuta-grupo-item { display: grid; gap: .3rem; padding: .75rem .85rem; border: 1px dashed var(--nuta-line); border-radius: var(--nuta-radius); background: var(--nuta-panel); } .nuta-view .nuta-grupo-item .nuta-grupo-acc { margin: 0; } .nuta-view .nuta-grupo-acc { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .nuta-view .nuta-grupo-acc input[type="text"] { flex: 1 1 12rem; min-width: 0; } .nuta-view .nuta-grupo-meta { font-size: .74rem; line-height: 1.4; color: var(--nuta-soft); } .nuta-view .nuta-grupo-todos { margin: .9rem 0 0; } /* --- tabla de grupos del modal -------------------------------------------- */ /* Los

van en display:contents: sus campos viven repartidos por la tabla y se enganchan con form="…", porque dentro de un no caben. */ .nuta-form-plano { display: contents; } .nuta-view .nuta-tabla-grupos { margin: .6rem 0 .5rem; font-size: .88rem; } .nuta-view .nuta-tabla-grupos tbody td { padding: .55rem .6rem; } .nuta-view .nuta-tabla-grupos thead th { padding: .45rem .6rem; } /* El horario de un grupo, desplegado bajo su fila: una línea por franja. */ .nuta-view .nuta-fila-horario > td { background: var(--nuta-panel); } .nuta-view .nuta-franja { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0 0 .5rem; } .nuta-view .nuta-franja select { flex: 0 1 9rem; min-width: 0; } .nuta-view .nuta-franja input[type="time"] { flex: 0 1 7rem; min-width: 0; } .nuta-view .nuta-franja input[type="text"] { flex: 1 1 8rem; min-width: 0; } .nuta-view .nuta-franja .nuta-btn { flex: 0 0 auto; } /* Celda que se lee como texto y se convierte en formulario con «Editar». */ .nuta-view .nuta-celda-editar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .nuta-view .nuta-celda-editar input[type="text"] { flex: 1 1 9rem; min-width: 0; } .nuta-view .nuta-celda-editar .nuta-btn { flex: 0 0 auto; } /* Un acordeón dentro de un modal no lleva el aire de los de la vista: su rótulo se lee como los demás títulos de sección del formulario (.nuta-form-sec). */ .nuta-view .nuta-acordeon-modal { margin: 1.2rem 0 0; border-bottom: 0; } .nuta-view .nuta-acordeon-modal > summary { padding: .45rem 0 .4rem; gap: .5rem; border-bottom: 1px solid var(--nuta-line); font-size: .66rem; font-weight: 800; letter-spacing: .14em; color: var(--nuta-soft); } .nuta-view .nuta-acordeon-modal > summary::before { width: .4rem; height: .4rem; border-width: 2px; margin-left: 0; } .nuta-view .nuta-acordeon-modal > summary:hover { background: none; color: var(--nuta-ink); } .nuta-view .nuta-acordeon-modal .nuta-cuenta { padding: .1rem .45rem; font-size: .64rem; } .nuta-view .nuta-acordeon-modal .nuta-tabla-grupos { margin-top: .4rem; } /* --- «Curso · grupo» en la tabla de Alumnado --------------------------- */ /* Se leen apilados, uno por curso, con el grupo en gris para que mande el nombre del curso. */ .nuta-view .nuta-grupo-chip { display: block; font-size: .85rem; line-height: 1.35; margin: 0 0 .2rem; } .nuta-view .nuta-grupo-chip small { color: var(--nuta-soft); } .nuta-view .nuta-grupo-chip-aviso small { color: var(--nuta-bad); } /* Logo */ svg.nuta-logo { display: block; fill: currentColor; } /* ========================================================================== Foto de perfil (con marcador de iniciales si no hay) ========================================================================== */ .nuta-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; object-fit: cover; vertical-align: middle; border: 2px solid var(--nuta-ink); background: var(--nuta-2); } .nuta-avatar-ini { font-family: var(--nuta-sans); font-weight: 800; color: var(--nuta-ink); letter-spacing: .02em; } .nuta-avatar-vacio { background: var(--nuta-2); } /* Avatar + nombre en listados */ .nuta-persona { display: flex; align-items: center; gap: .6rem; min-width: 0; } .nuta-persona > div { min-width: 0; } /* El primer dato de una fila abre su detalle. Se nombra el elemento a propósito: así pesa (0,2,1) y gana tanto a la regla de enlaces del panel como a la de los botones de dentro de una celda; un
el HTML no lo admite) y no ocupa sitio; los campos se le enganchan con form="…". */ .nuta-filtro-form { display: contents; } .nuta-view .nuta-fila-filtros th { padding: .35rem .5rem .6rem; border-bottom: 1px solid var(--nuta-line); background: var(--nuta-panel); vertical-align: middle; } .nuta-view .nuta-fila-filtros select, .nuta-view .nuta-fila-filtros input { width: 100%; min-width: 0; padding: .3rem .4rem; font-size: .76rem; border-width: 1px; text-transform: none; letter-spacing: 0; font-weight: 400; } .nuta-view .nuta-fila-filtros .nuta-btn { padding: .3rem .6rem; font-size: .68rem; } /* Barra de filtros en columna (fuera de tabla): mismos rótulos y campos que el resto del panel, pero en fila. */ .nuta-filtros { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; max-width: none; margin: 0 0 1.4rem; } .nuta-filtros > div { flex: 1 1 11rem; min-width: 0; } .nuta-filtros-acciones { display: flex; gap: .5rem; flex: 0 0 auto; } /* Controles de una tabla paginada: resumen · páginas · cuántas se ven. */ /* Pie de la tabla: cuántas hay, en qué página vas y cuántas ver. El aire va en el padding y no en un margen negativo: con -.6rem el pie se leía como una fila más de la tabla, y con un negativo mayor se metía dentro de lo que hubiera justo encima (en la vista Lista, el bloque del mes). Quien deja de separar es la tabla que tiene un pie detrás, no el pie. */ .nuta-paginacion { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; margin: 0 0 1.8rem; padding: .85rem .1rem 0; font-size: .78rem; color: var(--nuta-soft); } .nuta-view .nuta-scroll:has( + .nuta-paginacion ), .nuta-view .nuta-tabla-scroll:has( + .nuta-paginacion ), .nuta-view table:has( + .nuta-paginacion ) { margin-bottom: 0; } .nuta-paginacion-resumen { font-weight: 700; letter-spacing: .03em; } .nuta-paginacion-paginas { display: flex; align-items: center; gap: .5rem; } .nuta-paginacion-n { white-space: nowrap; } .nuta-paginacion-cuantos { display: flex; align-items: center; gap: .4rem; margin: 0; } .nuta-paginacion-cuantos select { padding: .3rem .5rem; font-size: .78rem; } .nuta-paginacion .nuta-btn { padding: .3rem .7rem; font-size: .75rem; } /* Varios botones en una celda: en fila, alineados y sin apelotonarse. Sin esto cada formulario es un bloque y los botones se apilan uno bajo otro. */ .nuta-acciones-celda { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .nuta-acciones-celda form { margin: 0; } /* Importe con su «pagado» debajo: dos líneas que se leen como una. */ .nuta-importe-celda strong { display: block; } .nuta-importe-celda small { color: var(--nuta-soft); font-size: .72rem; } .nuta-col-principal, .nuta-col-lateral { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; } /* Tarjeta con borde (mismo lenguaje que las tablas) */ .nuta-card { border: 1px solid var(--nuta-line); border-radius: var(--nuta-radius); padding: 1.1rem 1.2rem 1.2rem; } .nuta-card > h3 { margin: 0 0 .8rem; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nuta-ink); } .nuta-card > h3 .nuta-badge { margin-left: .5rem; vertical-align: middle; } /* Título de tarjeta con una acción a la derecha */ .nuta-card > h3:has(form) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nuta-card > h3 form { margin: 0; } .nuta-card > table, .nuta-card > .nuta-scroll > table { margin: 0; } .nuta-card > p { font-size: .9rem; } .nuta-card > p:last-child, .nuta-card > .nuta-form:last-child { margin-bottom: 0; } .nuta-nowrap { white-space: nowrap; } /* ========================================================================== Agenda: próximas fechas de un alumno ========================================================================== */ .nuta-agenda { list-style: none; margin: 0; padding: 0; } .nuta-agenda > li { display: grid; grid-template-columns: 5.5rem 3.6rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--nuta-line); } .nuta-agenda > li:first-child { border-top: 0; } .nuta-agenda-fecha { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nuta-soft); } .nuta-agenda-hora { font-weight: 800; font-variant-numeric: tabular-nums; } .nuta-agenda-clase { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .nuta-agenda-clase small { color: var(--nuta-soft); font-size: .78rem; } .nuta-agenda-cancelada .nuta-agenda-hora, .nuta-agenda-cancelada .nuta-agenda-clase strong { text-decoration: line-through; color: var(--nuta-soft); } /* Las clases de hoy: sin columna de fecha, todas son del mismo día */ .nuta-agenda-hoy > li { grid-template-columns: 4rem minmax(0, 1fr) auto; } /* Agenda agrupada por día (área del alumno): la fecha va en la cabecera del grupo. */ .nuta-agenda-sin-fecha > li { grid-template-columns: 4rem minmax(0, 1fr) auto; } /* Bloques del horario semanal del alumno: los del calendario, pero solo mirar. */ .nuta-sesion-solo-ver, .nuta-sesion-solo-ver:hover { cursor: default; background: var(--nuta-bg); } /* Escribir a la izquierda, ver el resultado a la derecha */ /* ========================================================================== Redactor de comunicaciones: el email montado ES el editor ========================================================================== */ .nuta-redactor { margin-top: 1.1rem; min-width: 0; } /* Barra: etiqueta, herramientas de formato y el conmutador visual/HTML */ .nuta-redactor-barra { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 0 0 .7rem; } .nuta-redactor-barra > .nuta-etiqueta { margin: 0; } .nuta-herramientas { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; border: 1px solid var(--nuta-line); border-radius: var(--nuta-radius); padding: .2rem; } /* Doble clase: el botón genérico del formulario es grande y en mayúsculas, y aquí hacen falta cuadraditos de icono. */ .nuta-herramientas .nuta-herramienta { padding: .38rem; border: 0; border-radius: 3px; background: transparent; color: var(--nuta-ink); display: inline-flex; align-items: center; justify-content: center; } .nuta-herramientas .nuta-herramienta > .nuta-ico { width: 17px; height: 17px; } .nuta-herramientas .nuta-herramienta:hover { background: var(--nuta-lima); color: var(--nuta-ink); } /* El botón activo se ve por el fondo oscuro, no solo por el color: el lima sobre blanco no llega ni a 1.2:1 de contraste. */ .nuta-herramientas .nuta-herramienta[aria-pressed="true"] { background: var(--nuta-ink); color: #fff; } .nuta-herramientas .nuta-herramienta:focus-visible { outline: 2px solid var(--nuta-ink); outline-offset: 1px; box-shadow: 0 0 0 4px var(--nuta-lima); } .nuta-modos { margin-left: auto; display: flex; gap: .35rem; } .nuta-modos .nuta-btn { background: transparent; padding: .45rem .9rem; font-size: .72rem; } .nuta-modos .nuta-btn.nuta-activo { background: var(--nuta-accent); } .nuta-modos .nuta-btn:hover, .nuta-modos .nuta-btn:focus-visible, .nuta-modos .nuta-btn.nuta-activo:hover, .nuta-modos .nuta-btn.nuta-activo:focus-visible { background: var(--nuta-ink); color: #fff; } /* Las dos vistas, una al lado de la otra: en las dos se puede escribir */ .nuta-vistas { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; min-width: 0; } /* 600px es el ancho real del email: por debajo, la vista de ordenador dejaría de ser fiel. Si no caben las dos a lo ancho, el móvil baja solo. */ .nuta-vista { display: flex; flex-direction: column; min-width: 0; flex: 1 1 600px; } /* Un móvil de gama media ronda los 320 px de ancho útil; con menos, las media queries del email no se disparan y la vista dejaría de ser fiel. */ .nuta-vista-movil { flex: 0 0 320px; } .nuta-vista-tipo { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nuta-soft); margin-bottom: .35rem; } /* La pista de que se puede escribir encima del email, sin gritar */ .nuta-vista-pista { font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--nuta-ink); background: var(--nuta-lima); border-radius: 999px; padding: .1rem .45rem; } .nuta-marco { width: 100%; min-width: 0; height: 540px; border: 1px solid var(--nuta-line); border-radius: var(--nuta-radius); background: #ECECE8; display: block; } .nuta-vista-movil > .nuta-marco { width: 320px; max-width: 100%; } /* Mientras se escribe dentro, el marco se marca por fuera */ .nuta-marco.nuta-escribiendo { border-color: var(--nuta-ink); box-shadow: 0 0 0 3px var(--nuta-lima); } /* Modo HTML */ .nuta-codigo { width: 100%; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .82rem; line-height: 1.65; tab-size: 2; white-space: pre-wrap; } .nuta-codigo-aviso { color: var(--nuta-bad); margin: .4rem 0 0; } /* Avisos del propio editor (no del navegador): salen encima y se van solos */ .nuta-aviso-editor { margin: 0 0 .8rem; } /* ========================================================================== Panel de envío: resumen y acción arriba, cada decisión en su sección ========================================================================== */ /* El número de paso de cada tarjeta: dice en qué orden se trabaja */ .nuta-paso { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: .3rem; flex: none; border-radius: 50%; background: var(--nuta-ink); color: var(--nuta-lima); font-size: .7rem; letter-spacing: 0; vertical-align: -4px; } /* Varias acciones en la misma celda. El td sigue siendo celda de tabla (un display:flex ahí rompe los bordes de la fila); el aire va por márgenes. */ .nuta-view td.nuta-acciones-fila { text-align: right; white-space: nowrap; } .nuta-view td.nuta-acciones-fila > * { margin: 0 0 .3rem .3rem; } .nuta-view td.nuta-acciones-fila form { display: inline-block; } /* Completar el pago vive DENTRO del menú ⋯, como primer elemento: importe editable + botón en una línea. Sin el ancho corto, el input heredaría el width:100% general del panel. */ .nuta-view .nuta-menu-panel .nuta-cobrar-form { display: flex; gap: .35rem; align-items: center; white-space: nowrap; padding: .45rem .6rem; border-bottom: 1px solid var(--nuta-line, #eee); } .nuta-view .nuta-menu-panel .nuta-cobrar-form input[name="importe"] { width: 4.8rem; padding: .4rem .5rem; text-align: right; } .nuta-view .nuta-menu-panel .nuta-cobrar-form button[type="submit"] { padding: .55rem .5rem; } /* Un modal pintado dentro de una celda de acciones heredaría su text-align derecho y saldría con el contenido descolgado: los modales SIEMPRE alinean a la izquierda, se pinten donde se pinten. */ .nuta-view dialog.nuta-modal { text-align: left; } /* Y las reglas de esas celdas (> * { margin: 0 … }, form { inline-block }) pisan el margin:auto que centra un y encogen su formulario: se restauran para cualquier modal que viva dentro de una fila (el de entregar, el de la factura…). */ .nuta-view td.nuta-acciones-fila > dialog.nuta-modal { margin: auto; } .nuta-view td.nuta-acciones-fila dialog.nuta-modal form.nuta-form { display: grid; width: 100%; } /* Formularios cortos dentro del menú ⋯ (rechazar con motivo, subir entrega). */ .nuta-view .nuta-menu-panel .nuta-menu-formulario { display: flex; gap: .35rem; align-items: center; white-space: nowrap; padding: .45rem .6rem; border-top: 1px solid var(--nuta-line, #eee); } .nuta-view .nuta-menu-panel .nuta-menu-formulario input[type="text"] { width: 11rem; padding: .4rem .5rem; } .nuta-view .nuta-menu-panel .nuta-menu-formulario button[type="submit"] { padding: .55rem .5rem; } .nuta-view .nuta-menu-panel .nuta-menu-subida { flex-direction: column; align-items: stretch; white-space: normal; } .nuta-view .nuta-menu-panel .nuta-menu-subida input[type="file"] { max-width: 15rem; font-size: .8rem; } /* Solo en Pagos: la celda de acciones puede partir en dos líneas (el menú ⋯ baja bajo el cobro) antes que empujar la tabla fuera de la pantalla, y las celdas respiran un poco menos — con 8 columnas cada píxel de relleno pesa. */ .nuta-view .nuta-pagos-tabla td.nuta-acciones-fila { white-space: normal; } /* El ⋯ centrado bajo su cabecera «Acción», no pegado al borde. */ .nuta-view .nuta-pagos-tabla td.nuta-acciones-fila, .nuta-view .nuta-pagos-tabla thead tr:first-child th:last-child { text-align: center; } .nuta-view .nuta-pagos-tabla td.nuta-acciones-fila > * { margin: 0; } .nuta-view .nuta-pagos-tabla th, .nuta-view .nuta-pagos-tabla td { padding-inline: .5rem; } /* Reparto FIJO de columnas (el colgroup manda): sin esto, el ancho mínimo de cada select de filtro es su opción más larga —nombres de cursos— y la tabla entera se sale de la pantalla por la derecha. */ .nuta-view .nuta-pagos-tabla { table-layout: fixed; width: 100%; } .nuta-view .nuta-pagos-tabla .nuta-fila-filtros select, .nuta-view .nuta-pagos-tabla .nuta-fila-filtros input { max-width: 100%; } /* El buscador por código de pago, encima de la tabla y con su etiqueta: dentro de la fila de filtros quedaba apretujado bajo otro select. */ .nuta-view .nuta-buscar-codigo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0 .7rem; font-size: .9rem; } .nuta-view .nuta-buscar-codigo input[type="search"] { width: 10rem; padding: .5rem .7rem; border: 1.5px solid var(--nuta-ink); border-radius: var(--nuta-radius); font: inherit; text-transform: uppercase; } /* El aceptar de los modales es la acción principal, pero al ser type="button" y no llevar .nuta-btn la regla genérica no lo alcanzaba y salía en crudo. */ .nuta-modal button[data-nuta-aceptar] { font-family: var(--nuta-sans); font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--nuta-radius); padding: .7rem 1.2rem; border: 2px solid var(--nuta-ink); background: var(--nuta-accent); color: var(--nuta-ink); cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; line-height: 1; transition: background .15s, color .15s; } .nuta-modal button[data-nuta-aceptar]:hover, .nuta-modal button[data-nuta-aceptar]:focus-visible { background: var(--nuta-ink); color: #fff; } /* Menú de acciones de una fila: tres puntos que despliegan la lista */ .nuta-menu { position: relative; display: inline-block; } .nuta-menu > summary { list-style: none; cursor: pointer; width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--nuta-line); border-radius: var(--nuta-radius); background: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--nuta-ink); } .nuta-menu > summary::-webkit-details-marker { display: none; } .nuta-menu > summary:hover { border-color: var(--nuta-ink); } .nuta-menu > summary:focus-visible { outline: 2px solid var(--nuta-ink); outline-offset: 1px; box-shadow: 0 0 0 4px var(--nuta-lima); } .nuta-menu[open] > summary { background: var(--nuta-ink); color: #fff; border-color: var(--nuta-ink); } .nuta-menu-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 200px; padding: .3rem; text-align: left; background: #fff; border: 1px solid var(--nuta-ink); border-radius: var(--nuta-radius); box-shadow: 0 10px 24px rgba(30, 30, 30, .16); } /* En pantallas cortas el desplegable se ancla a la PANTALLA, no a la celda: dentro de una tabla con scroll horizontal se abría fuera de la vista. La altura (top) la ajusta initMenus() junto al botón pulsado. */ @media (max-width: 600px) { .nuta-menu-panel { position: fixed; left: .8rem; right: .8rem; top: 40%; min-width: 0; max-height: 70vh; overflow-y: auto; box-shadow: 0 18px 48px rgba(30, 30, 30, .35); } } .nuta-view .nuta-menu .nuta-menu-panel form { display: block; margin: 0; } /* Con .nuta-menu delante a propósito (vale también fuera de una tabla): la regla genérica de botones (lima, borde, mayúsculas) pesa (0,2,1) y a una clase suelta la pisaría. Y sin el tipo: los que abren un modal o editan en la fila son type="button" y se quedaban con el botón gris del navegador. */ .nuta-view .nuta-menu .nuta-menu-panel a, .nuta-view .nuta-menu .nuta-menu-panel button { display: block; width: 100%; margin: 0; padding: .55rem .75rem; text-align: left; background: none; border: 0; border-radius: 3px; cursor: pointer; font-family: var(--nuta-sans); font-size: .85rem; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--nuta-ink); text-decoration: none; } .nuta-view .nuta-menu .nuta-menu-panel a:hover, .nuta-view .nuta-menu .nuta-menu-panel a:focus-visible, .nuta-view .nuta-menu .nuta-menu-panel button:hover, .nuta-view .nuta-menu .nuta-menu-panel button:focus-visible { background: var(--nuta-lima); color: var(--nuta-ink); border-color: transparent; } .nuta-view .nuta-menu .nuta-menu-panel button.nuta-menu-peligro { color: var(--nuta-bad); } .nuta-view .nuta-menu .nuta-menu-panel button.nuta-menu-peligro:hover, .nuta-view .nuta-menu .nuta-menu-panel button.nuta-menu-peligro:focus-visible { background: var(--nuta-bad); color: #fff; } /* El envoltorio con scroll de las tablas recortaría el desplegable: mientras haya un menú abierto, se deja respirar. (En navegadores sin :has, el menú se ve dentro del propio scroll: menos fino, pero usable.) */ /* Solo en pantallas anchas: en las cortas el panel es fijo (no lo recorta el carril) y soltar el overflow aquí desbordaba la página entera. */ @media (min-width: 601px) { /* Los DOS envoltorios: hay tablas con .nuta-scroll dentro de .nuta-tabla-scroll y cualquiera de ellos recortaría el panel. */ .nuta-scroll:has(.nuta-menu[open]), .nuta-tabla-scroll:has(.nuta-menu[open]) { overflow: visible; } } /* MIS CLASES (alumno): la siguiente clase, cantada encima del calendario. */ .nuta-view .nuta-proxima-clase { margin: 0 0 .9rem; padding: .55rem .85rem; border: 1.5px solid var(--nuta-ink); border-radius: var(--nuta-radius); background: color-mix(in srgb, var(--nuta-accent) 16%, #fff); font-size: .95rem; } /* Lo que aún no es calendario (solicitudes, comienzos) va recogido en un desplegable bajo él: presente, pero sin estorbar el día a día. */ .nuta-view details.nuta-despliegue { border: 1.5px solid var(--nuta-ink); border-radius: var(--nuta-radius); background: #fff; margin-top: 1.1rem; } .nuta-view .nuta-despliegue > summary { cursor: pointer; list-style: none; font-weight: 700; padding: .85rem 1.1rem; display: flex; align-items: center; gap: .55rem; } .nuta-view .nuta-despliegue > summary::-webkit-details-marker { display: none; } .nuta-view .nuta-despliegue > summary::before { content: "▸"; transition: transform .15s; } .nuta-view details.nuta-despliegue[open] > summary::before { transform: rotate(90deg); } .nuta-view .nuta-despliegue-cuerpo { padding: 0 1.1rem 1rem; } /* Editor de menús de la web: una fila por enlace */ .nuta-enlaces { display: flex; flex-direction: column; gap: .45rem; } .nuta-enlace-fila { display: flex; align-items: center; gap: .45rem; } .nuta-enlace-manejo { color: var(--nuta-soft); font-size: .8rem; letter-spacing: -2px; cursor: default; } .nuta-enlace-fila input { min-width: 0; } .nuta-enlace-fila input:first-of-type { flex: 0 1 220px; } .nuta-enlace-fila input:last-of-type { flex: 1 1 auto; } .nuta-enlace-botones { display: flex; gap: .25rem; flex: none; } /* Con el prefijo del formulario a propósito: la regla genérica de botones (lima, 2px, mayúsculas) pesa más que una clase suelta y los deformaría. */ .nuta-form button.nuta-mini, .nuta-mini { width: 28px; height: 28px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none; background: #fff; color: var(--nuta-ink); border: 1px solid var(--nuta-line); border-radius: var(--nuta-radius); cursor: pointer; } .nuta-form button.nuta-mini:hover, .nuta-form button.nuta-mini:focus-visible, .nuta-mini:hover, .nuta-mini:focus-visible { background: var(--nuta-ink); color: #fff; border-color: var(--nuta-ink); } .nuta-form button.nuta-mini.nuta-mini-peligro:hover, .nuta-form button.nuta-mini.nuta-mini-peligro:focus-visible { background: var(--nuta-bad); border-color: var(--nuta-bad); } .nuta-enlaces-anadir { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--nuta-line); } .nuta-enlaces-anadir select { max-width: 260px; } /* Rotulillo de cada bloque dentro de la tarjeta de envío. Con las dos clases a propósito: la regla base de .nuta-etiqueta viene después en el archivo y con una sola clase la pisaba (mismo peso, gana la última). */ .nuta-panel-envio .nuta-etiqueta.nuta-envio-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 1.4rem 0 .7rem; /* Cada bloque abre con su filete: es lo que da el ritmo a la tarjeta */ border-top: 1px solid var(--nuta-line); padding-top: 1.2rem; } .nuta-panel-envio > h3 + .nuta-etiqueta.nuta-envio-titulo { margin-top: 0; border-top: 0; padding-top: 0; } .nuta-etiqueta-valor { font-style: normal; font-weight: 600; font-size: .72rem; letter-spacing: 0; text-transform: none; color: var(--nuta-soft); } /* Caja para soltar archivos. Es una