/* ============================================================================= tna.css — Estilos de la plataforma. CSS nativo, sin preprocesador. ----------------------------------------------------------------------------- EL CARMESÍ NO PUEDE SER TEXTO SOBRE NEGRO #560216 sobre #0d0d0d da 1,31:1 de contraste; el mínimo legible es 4,5:1. En cuanto el fondo es negro, el color de marca deja de servir para escribir: quedaría un texto que en la maqueta se ve porque uno ya sabe lo que pone. Se usa como SUPERFICIE —botones, barras, bordes— donde encima va blanco (14,8:1) y como acento aclarado (--acento, 5,5:1) cuando hace falta color en un texto. Todos los pares de este fichero están comprobados contra WCAG AA. NADA DE ESTILOS EN LÍNEA EN LAS PLANTILLAS: la cabecera CSP que pone paginas.ts es `style-src 'self'`, así que un `style="..."` no se aplicaría. Es deliberado: obliga a que todo esté aquí. ========================================================================== */ :root { --fondo: #0d0d0d; --superficie: #141414; --superficie-alta: #1a1a1a; --borde: #2a2626; --borde-vivo: #3a3434; --carmesi: #560216; --carmesi-vivo: #6d0320; --acento: #d4667c; /* 5,54:1 sobre el fondo — para texto */ --texto: #efeeee; /* 16,78:1 */ --secundario: #9a9494; /* 6,51:1 */ --tenue: #8a8280; /* 5,17:1 */ --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; --ancho: 1080px; --radio: 10px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; margin: 0; } p { margin: 0; } a { color: var(--acento); } a:hover { color: var(--texto); } /* Foco visible SIEMPRE. Quitarlo es dejar el teclado sin brújula. */ :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; } .saltar { position: absolute; left: -9999px; background: var(--carmesi); color: #fff; padding: 10px 16px; z-index: 10; } .saltar:focus { left: 8px; top: 8px; } .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; } .oculto { display: none !important; } /* --- Cabecera ------------------------------------------------------------ */ .cabecera { border-bottom: 1px solid var(--borde); background: var(--fondo); } .cabecera__fila { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .marca { text-decoration: none; color: inherit; display: block; margin-right: auto; } .marca__lema { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); } .marca__nombre { display: block; font-family: var(--serif); font-size: 20px; color: var(--texto); } .nav { display: flex; flex-wrap: wrap; gap: 4px; } .nav__enlace { color: var(--secundario); text-decoration: none; font-size: 14px; padding: 7px 12px; border-radius: var(--radio); border: 1px solid transparent; } .nav__enlace:hover { color: var(--texto); background: var(--superficie); } .nav__enlace.es-activo { color: var(--texto); border-color: var(--carmesi); background: var(--superficie); } .sesion { display: flex; align-items: center; gap: 12px; } /* Era texto suelto sin caja propia: 22,4px de alto real, por debajo incluso del minimo absoluto de 24px de WCAG 2.5.8, y eso vale para el raton igual que para el dedo. Ahora es una caja con area propia, con el mismo trato visual que .campana para que las dos piezas de la sesion se lean iguales. */ .sesion__nombre { display: inline-flex; align-items: center; font-size: 14px; color: var(--secundario); text-decoration: none; padding: 7px 12px; border-radius: var(--radio); border: 1px solid transparent; } .sesion__nombre:hover, .sesion__nombre:focus-visible { color: var(--texto); border-color: var(--borde-vivo); } .sesion form { margin: 0; } /* --- Botones ------------------------------------------------------------- */ .boton { display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 500; padding: 11px 20px; border-radius: var(--radio); border: 1px solid var(--borde-vivo); background: var(--superficie); color: var(--texto); text-decoration: none; cursor: pointer; text-align: center; } .boton:hover { background: var(--superficie-alta); color: var(--texto); } .boton--carmesi { background: var(--carmesi); border-color: var(--carmesi); color: #ffffff; } .boton--carmesi:hover { background: var(--carmesi-vivo); border-color: var(--carmesi-vivo); color: #ffffff; } .boton--tenue { background: transparent; color: var(--secundario); } .boton--ancho { width: 100%; } .boton--grande { font-size: 17px; padding: 14px 28px; } .boton[disabled] { opacity: .5; cursor: progress; } /* --- Contenido ----------------------------------------------------------- */ .principal { flex: 1; padding-top: 44px; padding-bottom: 64px; } .ojo { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); margin-bottom: 12px; } .titular { font-size: clamp(30px, 5vw, 48px); max-width: 20ch; margin-bottom: 18px; } .titulo { font-size: clamp(24px, 4vw, 32px); margin-bottom: 14px; } .entradilla { color: var(--secundario); font-size: 17px; max-width: 56ch; margin-bottom: 28px; } .acciones { margin-top: 24px; } .portada { padding: 24px 0 56px; } .rejilla { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; } .tarjeta--ancha { grid-column: 1 / -1; margin-top: 28px; } .tarjeta__titulo { font-size: 19px; margin-bottom: 8px; } .tarjeta__texto { color: var(--secundario); font-size: 15px; } .tarjeta__fase { margin-top: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); } /* --- Formularios --------------------------------------------------------- */ .panel-estrecho { max-width: 460px; margin: 0 auto; } .panel-estrecho--centro { text-align: center; } .forma { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; } .forma__ayuda { color: var(--secundario); font-size: 15px; } .campo { display: block; } .campo__etiqueta { display: block; font-size: 13px; color: var(--secundario); margin-bottom: 6px; } .campo__opcional { color: var(--tenue); font-size: 12px; } /* La pista bajo un campo: qué formatos y qué tamaño se admiten. `block` porque va DEBAJO del control, no pegada a su derecha. */ .campo__ayuda { display: block; margin-top: 6px; color: var(--tenue); font-size: 13px; } /* Un `input[type=file]` con el padding de una caja de texto deja el botón del navegador descentrado y la caja demasiado alta. */ .campo__control[type="file"] { padding: 9px 12px; font-size: 15px; cursor: pointer; } .campo__control { width: 100%; font-family: var(--sans); font-size: 16px; /* 16px: menos hace que iOS haga zoom */ padding: 12px 14px; border-radius: var(--radio); border: 1px solid var(--borde-vivo); background: var(--superficie-alta); color: var(--texto); } .campo__control::placeholder { color: #6f6a68; } .campo__control:focus { border-color: var(--acento); outline: none; } .campo__control--codigo { font-family: var(--mono); font-size: 28px; letter-spacing: .32em; text-align: center; padding: 14px; } .aviso { margin-top: 18px; padding: 12px 14px; border-radius: var(--radio); border: 1px solid var(--carmesi); background: #1a0509; color: var(--texto); font-size: 14px; } .aviso--suave { border-color: var(--borde-vivo); background: var(--superficie); color: var(--secundario); } /* --- Onboarding ---------------------------------------------------------- */ .pasos { display: flex; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; } .pasos__item { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tenue); padding: 9px 12px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); } .pasos__item.es-activo { color: var(--texto); border-color: var(--carmesi); } .pasos__item.es-hecho { color: var(--secundario); } .pasos__numero { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--superficie-alta); font-family: var(--mono); font-size: 12px; } .pasos__item.es-activo .pasos__numero { background: var(--carmesi); color: #fff; } .opciones { display: grid; gap: 12px; margin-top: 22px; } .opcion { display: block; text-align: left; cursor: pointer; padding: 18px; border-radius: var(--radio); border: 1px solid var(--borde-vivo); background: var(--superficie); color: var(--texto); font-family: var(--sans); } .opcion:hover { border-color: var(--carmesi); background: var(--superficie-alta); } .opcion__titulo { display: block; font-family: var(--serif); font-size: 19px; margin-bottom: 4px; } .opcion__texto { display: block; color: var(--secundario); font-size: 14px; } /* --- Paneles ------------------------------------------------------------- */ .cabecera-panel { margin-bottom: 8px; } .pastilla { display: inline-block; font-size: 12px; font-family: var(--mono); padding: 2px 9px; margin-right: 6px; border-radius: 999px; border: 1px solid var(--borde-vivo); color: var(--texto); } .codigo-enlace { font-family: var(--mono); font-size: 15px; word-break: break-all; background: var(--superficie-alta); border: 1px solid var(--carmesi); border-radius: var(--radio); padding: 12px 14px; margin: 12px 0 18px; } .metricas { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 0 16px; } .metrica dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); } .metrica dd { margin: 4px 0 0; font-family: var(--mono); font-size: 26px; color: var(--texto); } /* --- Fase 4 · Paneles ----------------------------------------------------- */ /* La campana. No es un icono SVG a propósito: la palabra «Avisos» la lee cualquiera, no depende de que un glifo cargue y no hay que mantener un sprite. La cuenta va en un círculo pegado, como en cualquier bandeja. */ .campana { position: relative; text-decoration: none; color: var(--secundario); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radio); border: 1px solid transparent; } .campana:hover, .campana:focus-visible { color: var(--texto); border-color: var(--borde-vivo); } .campana.es-activo { color: var(--texto); border-color: var(--carmesi); } .campana__cuenta { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--carmesi); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: 0; text-align: center; } /* El avatar. `object-fit: cover` para que una foto rectangular no salga deformada, que es lo que pasa por defecto con width y height fijos. */ .avatar-fila { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borde-vivo); flex: none; } .avatar--vacio { display: grid; place-items: center; background: var(--superficie-alta); font-family: var(--serif); font-size: 30px; color: var(--secundario); } /* El facilitador en la ficha pública del módulo. `--grande` es la MISMA pieza a otro tamaño y no un avatar distinto: aquí la foto es contenido —es a quien se le compra— y no un adorno de la cabecera. La inicial crece con ella para que el hueco de quien aún no tiene foto no se vea como un fallo de maqueta. */ .avatar--grande { width: 96px; height: 96px; } .avatar--grande.avatar--vacio { font-size: 40px; } /* `min-width: 0` porque un hijo de flex no encoge por debajo de su contenido (`min-width: auto`), y sin esto un párrafo con una palabra larga —una URL que alguien pegue en su biografía— empuja la caja y arrastra la página en horizontal a 380 px. Es exactamente lo que le pasó a `.buscador__fila`. */ .ficha__facilitador-texto { flex: 1 1 320px; min-width: 0; } .ficha__facilitador-nombre { font-family: var(--serif); font-size: 22px; margin: 0 0 10px; } .ficha__facilitador-texto .parrafo { margin: 0 0 10px; } .ficha__facilitador-texto .parrafo:last-child { margin-bottom: 0; } /* Notificaciones. La barra carmesí de la izquierda marca lo no leído: el color solo no vale —hay quien no lo distingue— y por eso la plantilla pone además la pastilla «nuevo». Nunca sólo color. */ .avisos { list-style: none; margin: 20px 0 0; padding: 0; } .avisos__item { border: 1px solid var(--borde); border-left: 3px solid transparent; border-radius: var(--radio); padding: 16px 18px; margin-bottom: 12px; background: var(--superficie); } .avisos__item.es-nuevo { border-left-color: var(--carmesi); background: var(--superficie-alta); } .avisos__titulo { font-size: 16px; margin-bottom: 4px; } .avisos__texto { color: var(--secundario); font-size: 15px; } .avisos__pie { margin-top: 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--tenue); font-size: 13px; } /* Métricas destacadas del panel de administración. */ .metrica--destacada dd { font-size: 34px; color: var(--acento); } .metrica__grande { font-family: var(--mono); font-size: 34px; line-height: 1.1; margin: 6px 0 8px; color: var(--texto); } /* Lo que espera decisión y no es cero. Borde, no sólo color de fondo: sobre negro un tinte apenas se ve, y la tarjeta tiene que cantar. */ .tarjeta--urgente { border-color: var(--carmesi); } .tarjeta--urgente .metrica__grande { color: var(--acento); } /* Reparto de roles. */ .roles-actuales { margin: 12px 0 10px; min-height: 26px; } .roles-botones { display: flex; flex-wrap: wrap; gap: 8px; } .roles-botones .boton { font-size: 13px; padding: 6px 12px; } .nota-pie { margin-top: 32px; color: var(--tenue); font-size: 13px; } /* --- Pie ----------------------------------------------------------------- */ .pie { border-top: 1px solid var(--borde); padding: 26px 0; } .pie__marca { font-family: var(--serif); font-size: 16px; } .pie__nota { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); } /* Tres enlaces desde LEG-02/LEG-03 (antes era uno). `flex` con `gap` y no separadores escritos a mano: en movil los tres miden 44 px de alto por la regla de `pointer: coarse`, y pegados serian tres objetivos tactiles sin aire entre ellos. El `wrap` los apila cuando no caben, que a 380 px es siempre. */ .pie__enlaces { margin-top: 12px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 20px; } .pie__enlaces a { color: var(--secundario); text-decoration: none; } .pie__enlaces a:hover, .pie__enlaces a:focus-visible { color: var(--texto); } @media (max-width: 620px) { .cabecera__fila { gap: 12px; } .nav { order: 3; width: 100%; } .pasos { flex-direction: column; } .metricas { gap: 20px; } } /* --- Areas tactiles ------------------------------------------------------ */ /* Con un dedo, 33px no es un objetivo: es una apuesta. Apple pide 44px y WCAG 2.5.8 fija 24px como minimo absoluto. Se filtra por `pointer: coarse` y NO por ancho de pantalla porque lo que decide no es cuanto mide el viewport sino con que se toca: una tablet de 1024px se navega con el dedo igual que un movil, y un escritorio con raton no necesita crecer. Asi el diseno de escritorio queda intacto. `min-height` + `inline-flex` en vez de subir el padding: la altura queda garantizada sin depender de la interlinea de cada regla, que es justo lo que hacia que estos seis elementos midieran seis cosas distintas. */ @media (pointer: coarse) { .nav__enlace, .campana, .sesion__nombre, /* Anadido 2026-08-31: el enlace del pie a la politica de devoluciones nacio con 17 px de alto —por debajo del minimo absoluto de 24 px de WCAG 2.5.8— y lo cazo `probar-onboarding-380.mjs` en las SEIS pantallas a la vez, que es la ventaja de que el pie sea comun. Entro con WP-08 y se fue con la primera corrida de ONB-04 posterior al despliegue. */ .pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; } /* .boton es inline-block y centra con `text-align`. Al pasar a flex hay que centrar con `justify-content`, o `.boton--ancho` (width:100%) dejaria el texto pegado a la izquierda. */ .boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } /* Corregido 2026-09-01: `.lateral__leccion` estaba en la lista de arriba y por eso el
  • del temario medía 44 px. Pero el
  • no se pulsa: se pulsa el de dentro, que seguía midiendo su línea —22,4 px medidos a 380 px por `probar-380-catalogo-paneles.mjs`—, así que 11 px por arriba y 11 por abajo de cada lección no respondían al dedo. Agrandar el contenedor no agranda el objetivo, y es un fallo que sólo se ve midiendo el elemento que recibe el toque. El
  • conserva sus 44 px y el se estira dentro (`stretch`): el temario se ve exactamente igual, lo que cambia es cuánto de él se toca. */ .lateral__leccion { display: inline-flex; align-items: stretch; min-height: 44px; } .lateral__leccion a { display: flex; align-items: center; width: 100%; } } /* Quien pide menos movimiento, menos movimiento. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --- Catálogo, ficha y visor (Fase 2) ------------------------------------ */ /* Las clases de aquí abajo siguen la misma regla que las de arriba: el carmesí es superficie o borde, nunca texto. El precio va en --acento (5,54:1). */ .portada--corta { padding-bottom: 32px; } .enlace-limpio { color: inherit; text-decoration: none; } .enlace-limpio:hover { color: var(--acento); } .buscador { margin-top: 22px; max-width: 520px; } /* `wrap` y no `nowrap`: un flex item no encoge por debajo de su contenido (`min-width: auto`), así que una fila de cinco campos con dos `type="date"` no cabe en 380 px por mucho que su `flex-basis` diga 160. Sin esto, la fila del filtro de /admin/comprobantes se salía 229 px del viewport y arrastraba la página entera en horizontal — medido el 03/09. */ .buscador__fila { display: flex; gap: 8px; flex-wrap: wrap; } .buscador__fila .campo__control { flex: 1; } /* LOG-07 · La barra del rechazo en lote, encima de la cola de comprobantes. `flex-wrap` y `campo--crece` por lo mismo que la fila del filtro de aquí arriba: en 380 px el motivo y el botón no caben en una línea, y un flex item no encoge por debajo de su contenido. Sin el salto, la barra se saldría del viewport y arrastraría la página en horizontal. */ .lote { margin: 18px 0 4px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-alta); } .lote__fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; } /* La barra ya trae su propio margen; el del campo y el de `.acciones` (24 px) descolocarían el botón respecto al recuadro del motivo. */ .lote .campo--crece { margin-bottom: 0; } .lote .acciones { margin-top: 0; } .lote__accion { margin-top: 12px; } .precio { font-family: var(--mono); font-size: 18px; color: var(--acento); } .precio--grande { font-size: 30px; } .precio__nota { font-size: 13px; color: var(--tenue); margin-top: 4px; } .paquete { display: grid; gap: 24px; margin-top: 32px; padding: 26px; grid-template-columns: 1fr; align-items: start; border: 1px solid var(--carmesi); border-radius: var(--radio); background: var(--superficie); } .paquete__precio { border-top: 1px solid var(--borde); padding-top: 18px; } .bonos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .bonos__item { color: var(--secundario); font-size: 15px; padding-left: 18px; position: relative; } .bonos__item::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--carmesi); } .tarjeta--curso { display: flex; flex-direction: column; gap: 6px; } .tarjeta__orden { font-family: var(--mono); font-size: 12px; color: var(--tenue); } .tarjeta__pie { display: flex; align-items: baseline; gap: 14px; margin-top: auto; padding-top: 12px; } .tarjeta__dato { font-size: 13px; color: var(--tenue); } .tarjeta__estado { font-size: 13px; color: var(--acento); } /* --- Ficha --------------------------------------------------------------- */ .ficha__cabecera { padding-bottom: 8px; } .ficha__datos { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .ficha__bloque { margin-top: 36px; } .parrafo { color: var(--secundario); max-width: 68ch; white-space: pre-line; } .lista { color: var(--secundario); margin: 12px 0 0; padding-left: 20px; } .lista li { margin-bottom: 6px; } .modulo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde); } .modulo__titulo { font-size: 17px; margin-bottom: 8px; } .lecciones { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: leccion; } .leccion-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 15px; } .leccion-fila.es-hecha .leccion-fila__titulo, .leccion-fila.es-hecha a { color: var(--tenue); } .leccion-fila__marcas { display: flex; gap: 8px; align-items: baseline; flex: none; } /* --- Visor --------------------------------------------------------------- */ .visor { display: grid; gap: 28px; grid-template-columns: 1fr; } .visor__lateral { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; align-self: start; } .lateral__modulo { font-size: 14px; margin: 18px 0 6px; color: var(--secundario); } .lateral__lecciones { list-style: none; margin: 0; padding: 0; } .lateral__leccion { font-size: 14px; padding: 6px 8px; border-radius: 6px; } .lateral__leccion.es-activa { background: var(--superficie-alta); border-left: 3px solid var(--carmesi); } .lateral__leccion.es-hecha a { color: var(--tenue); } .marco { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 18px; background: #000; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; } .marco__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .progreso { margin-top: 22px; padding: 16px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); } .progreso__estado { font-family: var(--mono); font-size: 14px; margin-bottom: 10px; } /* La barra se pinta con una clase por tramo de 5 %. No es elegante y es la consecuencia de `style-src 'self'`: un `style="width:37%"` no se aplicaría. Con 21 tramos la barra se ve bien y no hace falta bajar la CSP. */ .barra { height: 6px; border-radius: 999px; background: var(--superficie-alta); overflow: hidden; margin: 10px 0 4px; } .barra__relleno { height: 100%; background: var(--carmesi); } .barra__relleno--0 { width: 0%; } .barra__relleno--5 { width: 5%; } .barra__relleno--10 { width: 10%; } .barra__relleno--15 { width: 15%; } .barra__relleno--20 { width: 20%; } .barra__relleno--25 { width: 25%; } .barra__relleno--30 { width: 30%; } .barra__relleno--35 { width: 35%; } .barra__relleno--40 { width: 40%; } .barra__relleno--45 { width: 45%; } .barra__relleno--50 { width: 50%; } .barra__relleno--55 { width: 55%; } .barra__relleno--60 { width: 60%; } .barra__relleno--65 { width: 65%; } .barra__relleno--70 { width: 70%; } .barra__relleno--75 { width: 75%; } .barra__relleno--80 { width: 80%; } .barra__relleno--85 { width: 85%; } .barra__relleno--90 { width: 90%; } .barra__relleno--95 { width: 95%; } .barra__relleno--100 { width: 100%; } .candado { margin-top: 18px; padding: 26px; text-align: center; border: 1px solid var(--carmesi); border-radius: var(--radio); background: var(--superficie); } .paso-a-paso { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; } /* --- Buscador ------------------------------------------------------------ */ .panel-estrecho--ancho { max-width: 720px; } .resultados__cuenta { margin-top: 22px; } .resultados { list-style: none; margin: 12px 0 0; padding: 0; } .resultado { padding: 12px 0; border-bottom: 1px solid var(--borde); } .resultado__titulo { margin-left: 8px; } .resultado__contexto { font-size: 13px; color: var(--tenue); margin-top: 4px; } /* --- Panel de contenido -------------------------------------------------- */ /* `display: block` + `overflow-x: auto` para que las tablas anchas —alumnos, usuarios— se desplacen DENTRO de su caja en un móvil en vez de estirar el cuerpo de la página. El navegador sigue maquetándolas como tabla por dentro (caja de tabla anónima); lo que se pierde es el ajuste automático al ancho del contenedor, y por eso `width: 100%` sigue haciendo falta. */ .tabla { display: block; overflow-x: auto; max-width: 100%; width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; } .tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); } .tabla th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); font-weight: 500; } .tabla__num { font-family: var(--mono); } .oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .forma--fila { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .campo--crece { flex: 1 1 240px; } .campo--corto { flex: 0 1 160px; } .campo__control--area { font-family: var(--sans); line-height: 1.5; resize: vertical; } .modulo-edicion__cabecera { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .modulo-edicion__botones { display: flex; gap: 6px; flex-wrap: wrap; } .lecciones-edicion { list-style: none; margin: 18px 0; padding: 0; } .leccion-edicion { padding: 14px 0; border-top: 1px solid var(--borde); } .leccion-edicion__marcas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .leccion-edicion__marcas .boton { padding: 5px 10px; font-size: 13px; } /* --- Mis cursos ---------------------------------------------------------- */ .curso-mio { display: flex; flex-direction: column; gap: 8px; } .curso-mio__pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } @media (min-width: 860px) { .paquete { grid-template-columns: 1fr 280px; } .paquete__precio { border-top: 0; border-left: 1px solid var(--borde); padding: 0 0 0 24px; } .visor { grid-template-columns: 280px 1fr; } } /* --- Fase 3 · compra y bandeja de comprobantes ---------------------------- */ /* `hidden` es un atributo del HTML y el navegador ya lo respeta… salvo cuando otra regla fija `display`, que es justo lo que pasa con `.aviso`. Sin esto, el aviso del cupón se ve vacío desde que carga la página. */ [hidden] { display: none !important; } /* Los datos del Pago Móvil: etiqueta y valor, uno por línea y el valor en monoespaciada porque son números que se copian a mano a otra app. */ .datos-pago { margin: 18px 0 0; } .datos-pago__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); } .datos-pago dt { color: var(--tenue); font-size: 14px; } .datos-pago dd { margin: 0; font-family: var(--mono); font-size: 16px; color: var(--texto); } /* Tarjetas apiladas de la bandeja. `.lista` no vale: es un