/* ================================================================== ZONA PÚBLICA DE DIDACTIO — app/recursos/ ------------------------------------------------------------------ Hoja AUTOCONTENIDA. Estas pantallas NO cargan main.css ni la plantilla Editorial: son la cara comercial de Didactio y tienen que parecerse a www.didactio.es, no a una pantalla de trabajo. Así, además, la aplicación y la zona pública no se pueden romper entre ellas. Todo lo de aquí sale de las capturas de la web (capturas/cabecera_didactio.jpg, blog_didactio.jpg, planes_didactio.jpg, pie_pagina_didactio.jpg): - cabecera blanca alta, con el enlace activo en una píldora gris y "Acceder" en píldora azul - fondo de contenido gris claro con tarjetas blancas: imagen arriba, chip encima de la imagen, fecha, titular grande y texto (es la retícula del blog) - pie azul de marca a cuatro columnas - titulares en ClashDisplay con la palabra destacada en InstrumentSerif cursiva Las tres fuentes son de la marca y están alojadas aquí: ninguna petición a terceros. ================================================================== */ @font-face { font-family: 'ClashDisplay'; src: url('../fonts/ClashDisplay-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'InstrumentSerif'; src: url('../fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url('../fonts/OpenSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url('../fonts/opensans-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { --azul: #1900dc; --azul-oscuro: #100183; --naranja: #ff4800; --tinta: #14141c; --gris: #5f5f6d; --gris-suave: #8a8a96; --fondo: #f2f2f2; /* el gris del blog */ --borde: #e3e3e8; --wapp: #25d366; } /* ------------------------------ reset mínimo ------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; color: var(--tinta); background: var(--fondo); } h1, h2, h3, h4 { font-family: 'ClashDisplay', 'Open Sans', sans-serif; font-weight: 400; margin: 0; line-height: 1.1; } /* La palabra destacada de cada titular, como en "Contratación individual, libre y flexible" */ .cursiva { font-family: 'InstrumentSerif', Georgia, serif; font-style: italic; } p { margin: 0 0 1em 0; } a { color: var(--azul); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } button { font: inherit; } ::selection { background: #d9d3ff; } .rec-ancho { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; } /* ------------------------------ cabecera ------------------------------ */ .rec-cabecera { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--borde); } .rec-cabecera .rec-ancho { display: flex; align-items: center; gap: 12px; min-height: 92px; } /* En la cabecera todo va más compacto que en el resto de la zona pública: el logotipo, las cinco secciones y los dos botones comparten una sola fila, y a tamaño normal no cabían: la navegación se partía en dos líneas. Las reglas van con .rec-cabecera delante a propósito. .rec-btn y .rec-nav se usan también en la portada y en los pies de página, donde hay sitio de sobra y deben seguir grandes; aquí solo se aprieta la fila de arriba. */ .rec-cabecera .rec-btn { padding: 9px 16px; font-size: 0.88rem; } .rec-cabecera .rec-nav a { padding: 8px 13px; font-size: 0.93rem; } .rec-cabecera .rec-nav { gap: 3px; } .rec-cabecera .rec-acciones { gap: 7px; } /* El logotipo es horizontal (788x167, proporción 4,7), así que aquí manda el ANCHO y no el alto: cada píxel de altura son casi cinco de ancho, y la cabecera es una fila flex donde lo que ocupe el logotipo se lo quita a la navegación, que empieza a partirse en varias líneas. A 28px de alto ocupa unos 132, parecido a los 96 del logotipo apilado de antes. El max-width es el tope de seguridad por si algún día se cambia la imagen por otra de distinta proporción: el logotipo se hará más bajo, pero nunca volverá a empujar el menú. El flex:0 0 auto evita además que la caja del enlace crezca y desplace la navegación. */ .rec-logo { flex: 0 0 auto; } .rec-logo img { height: 28px; width: auto; max-width: 150px; } /* La navegación NO se recorta ni se desplaza: se parte en varias líneas. Antes iba con overflow-x:auto y la barra oculta, y en una ventana estrecha de ordenador las últimas secciones quedaban fuera sin ninguna forma de llegar a ellas: en el móvil se arrastran con el dedo, pero con ratón la rueda no desplaza en horizontal. Con cinco secciones pasaba casi siempre. */ .rec-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; min-width: 0; } .rec-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; color: var(--tinta); font-size: 1rem; white-space: nowrap; } .rec-nav a:hover { background: #f4f4f4; text-decoration: none; } /* El activo va en píldora gris, igual que "Planes" o "Blog" en la web */ .rec-nav a.activo { background: #ececec; } .rec-nav svg { width: 17px; height: 17px; } .rec-acciones { display: flex; align-items: center; gap: 10px; } /* Los botones de la CABECERA van más pequeños que el resto. No es una excepción caprichosa: aquí comparten línea con seis secciones de navegación, mientras que en el cuerpo de la página un .rec-btn es la acción principal y tiene que pesar. Selector con .rec-cabecera delante para que solo afecte a estos dos y gane a las reglas de los @media de más abajo. */ .rec-cabecera .rec-acciones .rec-btn { padding: 9px 17px; font-size: 0.88rem; } .rec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-size: 0.98rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; cursor: pointer; } .rec-btn:hover { text-decoration: none; } .rec-btn.primario { background: var(--azul); color: #fff; } .rec-btn.primario:hover { background: var(--azul-oscuro); } .rec-btn.naranja { background: var(--naranja); color: #fff; } .rec-btn.naranja:hover { background: #e63f00; } .rec-btn.contorno { background: #fff; color: var(--tinta); border-color: #d9d9de; } .rec-btn.contorno:hover { background: #f4f4f4; } .rec-btn svg { width: 17px; height: 17px; } /* En pantalla ancha la hamburguesa no existe */ .rec-hamburguesa { display: none; } /* Umbral alto a propósito: son cinco secciones más el logotipo y dos botones. Por debajo de esto la navegación baja a su propia línea completa, donde caben todas sin apretarse. */ @media screen and (max-width: 1180px) { .rec-cabecera .rec-ancho { flex-wrap: wrap; min-height: 0; padding-top: 14px; padding-bottom: 14px; gap: 12px; } .rec-nav { order: 3; width: 100%; margin-left: 0; } .rec-acciones { margin-left: auto; } .rec-btn { padding: 11px 20px; font-size: 0.92rem; } } /* En móvil la navegación se PLIEGA tras una hamburguesa. Desplegada ocupaba dos líneas fijas de cabecera —cerca de un quinto de la pantalla— que acompañaban durante todo el desplazamiento, porque la cabecera es sticky. Ahora solo se abre cuando hace falta, y entonces sí en vertical, que es donde se leen bien cinco secciones. */ @media screen and (max-width: 860px) { .rec-hamburguesa { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid #d9d9de; background: #fff; color: var(--tinta); cursor: pointer; } .rec-hamburguesa svg { width: 22px; height: 22px; } .rec-hamburguesa[aria-expanded="true"] { background: #eeecfd; border-color: var(--azul); color: var(--azul); } .rec-nav { display: none; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 6px; border-top: 1px solid var(--borde); } .rec-nav.abierta { display: flex; } .rec-nav a { padding: 12px 14px; border-radius: 10px; font-size: 1rem; } /* Esta regla escondía "Acceder" porque compartía sitio con "Crear cuenta" y la hamburguesa, y entre los dos mandaba crear cuenta. Ya no hay pareja: la cabecera tiene un único botón, así que aquí no se esconde nada o el móvil se quedaría sin ninguno. Se deja escrito porque el selector sigue existiendo en el resto de la hoja y el hueco llamaría la atención. */ } @media screen and (max-width: 560px) { .rec-logo img { height: 24px; } .rec-btn { padding: 10px 16px; font-size: 0.88rem; } } /* ------------------------------ portada ------------------------------ */ /* Azul de marca a sangre, como el bloque de planes y el pie de la web. Las curvas del fondo son el mismo recurso gráfico de la tarjeta "Semestral": van en el propio CSS, sin ninguna imagen. */ .rec-hero { position: relative; overflow: hidden; padding: 72px 0 78px 0; background: var(--azul); color: #fff; } .rec-hero::after { content: ''; position: absolute; right: -14%; top: -60%; width: 70%; padding-bottom: 70%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 0 0 60px rgba(255,255,255,0.05), 0 0 0 130px rgba(255,255,255,0.035); pointer-events: none; } .rec-hero .rec-ancho { position: relative; z-index: 1; } .rec-hero h1 { font-size: 3.6rem; color: #fff; margin-bottom: 0.3em; max-width: 15em; } .rec-hero .entradilla { font-size: 1.15rem; color: rgba(255,255,255,0.88); max-width: 40em; margin-bottom: 1.6em; } .rec-hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; } .rec-hero .rec-btn.contorno { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); } .rec-hero .rec-btn.contorno:hover { background: rgba(255,255,255,0.12); } .rec-sello { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; margin-bottom: 22px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; } .rec-sello svg { width: 15px; height: 15px; } @media screen and (max-width: 736px) { .rec-hero { padding: 46px 0 50px 0; } .rec-hero h1 { font-size: 2.3rem; } .rec-hero .entradilla { font-size: 1rem; } } /* ------------------------------ secciones ------------------------------ */ .rec-seccion { padding: 52px 0 64px 0; } .rec-seccion > .rec-ancho > h2 { font-size: 2.1rem; margin-bottom: 0.15em; } .rec-seccion > .rec-ancho > .sub { color: var(--gris); margin-bottom: 2em; max-width: 44em; } /* En la portada el subtítulo solo aparece cuando todavía no sabemos la comunidad, así que el resto del tiempo las tarjetas quedan pegadas al titular. Se separa la rejilla, no el titular: así vale para los dos casos sin duplicar espacio cuando el subtítulo sí está. */ .rec-columnas .rec-rejilla { margin-top: 1.6em; } .rec-blanca { background: #fff; } /* Portada a dos columnas: recursos + entradas recientes, como la retícula del blog */ .rec-columnas { display: grid; gap: 40px; grid-template-columns: minmax(0,1fr) 320px; align-items: start; } @media screen and (max-width: 1000px) { .rec-columnas { grid-template-columns: 1fr; } } /* ------------------------------ tarjeta estilo blog ------------------------------ */ .rec-rejilla { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } /* Las tarjetas son , no
con onclick: si no, un buscador no puede entrar en las fichas y la zona pública se queda en cinco páginas indexadas. Por eso hay que neutralizar el color y el subrayado de enlace. */ .rec-tarjeta { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); cursor: pointer; color: inherit; transition: transform .18s ease, box-shadow .18s ease; } .rec-tarjeta:hover { text-decoration: none; color: inherit; } .rec-tarjeta h3 { color: var(--tinta); } .rec-tarjeta:hover h3 { color: var(--azul); } .rec-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.12); } /* Alto FIJO, no aspect-ratio: las imágenes de origen tienen proporciones distintas y con aspect-ratio unas salían más bajas que otras. Con alto fijo + object-fit:cover todas las tarjetas miden exactamente lo mismo, se recorte lo que se recorte. */ .rec-tarjeta .imagen { position: relative; height: 210px; background: #e9e9ef; } /* object-position:top -> lo que se recorta es la parte de ABAJO. En estas imágenes lo que interesa (el titular de la ilustración, la cara de la persona) está arriba. */ .rec-tarjeta .imagen img { width: 100%; height: 100%; object-fit: cover; object-position: top; } /* Chip encima de la imagen, como la etiqueta "Educación" de las entradas del blog */ .rec-tarjeta .chip { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,0.94); color: var(--tinta); font-size: 0.78rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .rec-tarjeta .chip svg { width: 14px; height: 14px; stroke: var(--azul); } .rec-tarjeta .cuerpo { padding: 22px 22px 26px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .rec-tarjeta .meta { font-size: 0.85rem; color: var(--gris-suave); } .rec-tarjeta h3 { font-size: 1.5rem; } .rec-tarjeta p { font-size: 0.94rem; color: var(--gris); margin: 0; } .rec-tarjeta .entrar { margin-top: auto; padding-top: 6px; color: var(--azul); font-weight: 600; font-size: 0.92rem; } /* Recurso todavía no disponible: se enseña, pero no se puede pulsar */ .rec-tarjeta.pronto { cursor: default; } .rec-tarjeta.pronto:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .rec-tarjeta.pronto .imagen img { filter: grayscale(1); opacity: 0.55; } .rec-tarjeta.pronto .chip { background: rgba(255,255,255,0.94); color: var(--gris-suave); } /* ------------------------------ entradas recientes ------------------------------ */ /* Misma pieza que la barra lateral del blog: miniatura cuadrada, título y fecha debajo. */ .rec-lateral { background: transparent; } .rec-lateral h3 { font-size: 1.6rem; margin-bottom: 0.8em; } /* Cada entrada es un enlace a su documento completo */ .rec-reciente { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--borde); color: inherit; } .rec-reciente:last-child { border-bottom: 0; } .rec-reciente:hover { text-decoration: none; } .rec-reciente:hover .titulo { color: var(--azul); } .rec-reciente:hover .curso { background: var(--azul); color: #fff; } .rec-reciente .curso { transition: background .15s ease, color .15s ease; } /* El curso ocupa el sitio de la miniatura de las entradas del blog: es el dato que se busca de un vistazo al recorrer la lista. */ .rec-reciente .curso { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #e7e4fb; color: var(--azul); font-family: 'ClashDisplay', sans-serif; font-size: 1.35rem; line-height: 1; } .rec-reciente .ficha { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rec-reciente .titulo { font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--tinta); } .rec-reciente .datos { font-size: 0.85rem; color: var(--gris-suave); line-height: 1.4; } .rec-reciente .datos b { color: var(--gris); font-weight: 600; } /* Etiqueta corta: curso, etapa, área, comunidad, "Con rúbrica"... La usan las tarjetas de los buscadores y la cabecera del documento de una situación. */ .rec-chip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; background: #eeecfd; border: 1px solid #ddd8fa; color: var(--azul); font-size: 0.76rem; font-weight: 600; white-space: nowrap; } /* Chip que es solo un código (CCL3) y lleva el enunciado completo en el title. El cursor de ayuda es lo único que avisa de que hay algo que leer al pasar por encima: sin él nadie lo descubre. Es el mismo criterio que .rec-instrumentos .cod, que ya lo hacía. */ .rec-chip.ayuda { cursor: help; } /* Con el color del trimestre a fondo completo. Necesita más aire que los demás: sobre un color sólido el texto queda pegado al borde, y aquí además el rótulo es largo ("3r trimestre"). */ .rec-chip.solido { padding: 5px 16px; } /* Chip cuyo rótulo es una frase, no una etiqueta: competencias clave y ODS. Sin el nowrap del chip normal, porque textos como "08. Promover el crecimiento económico sostenido y el trabajo decente para todos" se salen de la caja. */ .rec-chip.largo { white-space: normal; text-align: left; line-height: 1.4; padding: 7px 14px; } .rec-chip.largo b { margin-right: 7px; color: var(--azul-oscuro); } .chips.largos { display: flex; flex-wrap: wrap; gap: 8px; } .rec-chip svg { width: 12px; height: 12px; stroke: currentColor; flex-shrink: 0; margin-right: 4px; } /* Chips de recuento: van al pie de la tarjeta, más apagados, porque son un resumen de cuánto tiene la situación y no deben competir con el curso y el área, que es lo que se busca. */ .rec-tarjeta .chips.cuentas { margin-top: 2px; } .rec-tarjeta .chips.cuentas .rec-chip { background: #f4f4f6; border-color: var(--borde); color: var(--gris); padding: 3px 9px; } .rec-tarjeta .chips.cuentas .rec-chip svg { stroke: var(--gris-suave); } /* ------------------------------ barra de comunidad y filtros ------------------------------ */ /* La comunidad NO va en un desplegable junto al resto de filtros: es la decisión que determina TODO el contenido, no un filtro más. Se cambia desde la misma ventana que la pregunta la primera vez. */ .rec-contexto { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 20px; border-radius: 8px; background: #fff; border: 1px solid var(--borde); font-size: 0.95rem; color: var(--gris); } .rec-contexto b { color: var(--tinta); } .rec-contexto svg { width: 17px; height: 17px; stroke: var(--azul); vertical-align: -3px; } .rec-contexto .cambiar { margin-left: auto; padding: 8px 16px; border-radius: 999px; border: 1px solid #d9d9de; background: #fff; color: var(--azul); font-size: 0.88rem; font-weight: 600; cursor: pointer; } .rec-contexto .cambiar:hover { background: #f4f4f4; } .rec-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 30px; } /* Los campos se reparten el ancho a partes iguales en vez de encogerse hasta el tamaño de su contenido: con cuatro desplegables en una línea cada uno se quedaba en un cuarto de su ancho y no se llegaba a leer la opción elegida. */ .rec-campo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 12em; } .rec-campo.ancho { flex: 1 1 18em; } /* El botón conserva su ancho natural: repartírselo lo convertía en una barra enorme */ .rec-campo.boton { flex: 0 0 auto; } /* Salto de línea dentro de la barra: obliga a que lo que venga detrás empiece en una línea nueva */ .rec-salto { flex: 1 0 100%; height: 0; } .rec-campo label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gris-suave); } .rec-campo select, .rec-campo input { font: inherit; font-size: 0.96rem; padding: 12px 14px; border: 1px solid #d9d9de; border-radius: 8px; background: #fff; color: var(--tinta); width: 100%; } .rec-campo select:focus, .rec-campo input:focus { outline: 2px solid #cfc9f5; border-color: var(--azul); } /* SlimSelect trae su propio aspecto, pensado para la plantilla de la aplicación. Aquí se ajusta a los bordes y radios de esta zona para que no desentone con los campos de texto. */ .rec-campo .ss-main { border: 1px solid #d9d9de; border-radius: 8px; background: #fff; padding: 11px 12px; font-size: 0.96rem; color: var(--tinta); min-height: 0; } .rec-campo .ss-main:focus, .rec-campo .ss-main.ss-open-below, .rec-campo .ss-main.ss-open-above { border-color: var(--azul); box-shadow: 0 0 0 2px #cfc9f5; } .rec-campo .ss-content { border-radius: 8px; border-color: var(--borde); } .rec-campo .ss-content .ss-list .ss-option.ss-highlighted, .rec-campo .ss-content .ss-list .ss-option:hover { background: #eeecfd; color: var(--azul); } .rec-campo .ss-content .ss-list .ss-option.ss-selected { background: var(--azul); } /* ------------------------------ resultados ------------------------------ */ .rec-bloque { margin-bottom: 38px; background: #fff; border-radius: 8px; border: 1px solid var(--borde); overflow: hidden; } .rec-bloque > h3 { display: flex; align-items: center; gap: 10px; padding: 18px 20px; margin: 0; font-size: 1.25rem; border-bottom: 1px solid var(--borde); } .rec-bloque > h3 svg { width: 20px; height: 20px; stroke: var(--azul); } /* La cabecera de grupo lleva la descripción entera de la competencia específica, que puede ser larga: por eso va con interlineado de texto y en Open Sans, no en ClashDisplay, que está pensada para titulares cortos. */ .rec-grupo { padding: 14px 20px; background: #f7f6ff; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); border-left: 4px solid var(--azul); font-size: 0.95rem; font-weight: 600; line-height: 1.5; color: var(--azul); } /* Segundo nivel de grupo: el área de la que vienen unos criterios o unos saberes, cuando la situación toca más de una materia. Va por encima de la competencia o del bloque. */ .rec-grupo.area { background: #eeecfd; border-left-color: var(--azul-oscuro); color: var(--azul-oscuro); font-style: italic; } /* Competencias clave de la competencia específica, debajo de su enunciado. En blanco y no con el lila de .rec-chip: sobre el fondo del grupo, que ya es lila claro, un chip lila sobre lila no se distinguía del fondo. */ .rec-grupo .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .rec-grupo .chips .rec-chip { background: #fff; } .rec-item { display: flex; gap: 14px; padding: 13px 20px; border-bottom: 1px solid #f0f0f3; } .rec-item:last-child { border-bottom: 0; } .rec-item:hover { background: #fafafc; } .rec-item .codigo { flex: 0 0 auto; min-width: 2.8em; font-weight: 600; color: var(--gris-suave); font-size: 0.9rem; } .rec-item .texto { font-size: 0.95rem; } .rec-item .texto b { display: block; color: var(--tinta); } .rec-item .texto span { color: var(--gris); } /* Acción a la derecha de una fila: el enlace a la rúbrica del instrumento */ /* Azul macizo, y es el único elemento azul de la fila: en el documento el azul significa "esto lleva a otra página" (la rúbrica, la actividad). Antes iba en blanco con el texto azul y se confundía con los chips, que solo informan. */ .rec-item-accion { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; align-self: center; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--azul); background: var(--azul); color: #fff; font-size: 0.84rem; font-weight: 600; white-space: nowrap; } .rec-item-accion:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; text-decoration: none; } .rec-item-accion svg { width: 14px; height: 14px; } .rec-item-accion small { color: rgba(255,255,255,0.72); font-weight: 400; } @media screen and (max-width: 600px) { .rec-item { flex-wrap: wrap; } .rec-item-accion { margin-left: 0; } } mark { background: #ffe9a8; color: inherit; padding: 0 2px; border-radius: 3px; } /* ------------------------------ buscadores globales ------------------------------ */ /* Tarjeta sin foto, para las situaciones y las actividades: aquí lo que importa es el texto, y una imagen genérica repetida doce veces no aportaría nada. */ .rec-tarjeta.sin-imagen .cuerpo { padding-top: 20px; } /* A quién va dirigida: "3º Primaria · Conocimiento del Medio". En texto y no en chips, para que no compita con los chips de recuento del pie de la tarjeta. */ .rec-tarjeta .destino { font-size: 0.88rem; color: var(--gris); } .rec-tarjeta .destino b { color: var(--tinta); font-weight: 600; } .rec-tarjeta .autor { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--gris); } .rec-tarjeta .autor svg { width: 14px; height: 14px; stroke: var(--gris-suave); } .rec-tarjeta .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .rec-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; font-size: 0.9rem; color: var(--gris); } .rec-volver { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; font-size: 0.92rem; font-weight: 600; color: var(--gris); } .rec-volver:hover { color: var(--azul); text-decoration: none; } .rec-volver svg { width: 16px; height: 16px; } /* ------------------------------ documento de una situación ------------------------------ */ .rec-doc { background: #fff; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; } .rec-doc > header { padding: 30px 30px 24px 30px; border-bottom: 1px solid var(--borde); } .rec-doc > header .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } /* Curso, etapa, área y comunidad en texto, encima del titular */ .rec-doc > header .destino { font-size: 0.92rem; color: var(--gris); margin-bottom: 10px; } .rec-doc > header .destino b { color: var(--tinta); font-weight: 600; } .rec-doc > header h1 { font-size: 2.1rem; margin-bottom: 0.35em; } .rec-doc > header .autor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--gris); margin: 0; } .rec-doc > header .autor svg { width: 15px; height: 15px; stroke: var(--gris-suave); } .rec-doc-bloque { border-bottom: 1px solid var(--borde); } .rec-doc-bloque:last-child { border-bottom: 0; } /* El documento es largo y todo él en blanco: con la cabecera casi blanca (#fafafc) los apartados se leían como un texto continuo y costaba ver dónde empezaba cada uno. Con el lila de marca a fondo completo el título hace de separador por sí solo, sin añadir ninguna línea más. Es el mismo tono de .rec-chip; .rec-grupo (#f7f6ff) queda por debajo, que es la jerarquía correcta: apartado > grupo dentro del apartado > fila. */ /* En MAYÚSCULA, igual que los títulos de apartado del informe de la aplicación (informe.css) y que los del .docx: es lo que hace que se lean como el encabezado de un apartado y no como una frase más del documento. Con caja alta hacen falta las dos cosas de siempre: bajar el cuerpo (de 1.2 a 1.1rem, porque la mayúscula ocupa más) y abrir el espacio entre letras, o se apelmazan. */ .rec-doc-bloque > h2 { display: flex; align-items: center; gap: 10px; padding: 18px 30px; margin: 0; font-size: 1.1rem; color: var(--azul-oscuro); text-transform: uppercase; letter-spacing: .05em; background: #eeecfd; border-bottom: 1px solid #ddd8fa; } .rec-doc-bloque > h2 svg { width: 19px; height: 19px; stroke: var(--azul); } .rec-doc-bloque > p { padding: 20px 30px; margin: 0; font-size: 0.96rem; line-height: 1.65; color: var(--gris); } .rec-doc-bloque .rec-grupo { border-left-width: 4px; } .rec-doc-bloque .rec-item { padding-left: 30px; padding-right: 30px; } .rec-doc-bloque > .chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 20px 30px; } .rec-doc-act { padding: 18px 30px; border-bottom: 1px solid #f0f0f3; } .rec-doc-act:last-child { border-bottom: 0; } .rec-doc-act b { display: block; font-size: 1rem; color: var(--tinta); margin-bottom: 4px; } .rec-doc-act p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--gris); } /* Cronograma del curso: diez meses de septiembre a junio, cinco casillas de semana cada uno. Se desplaza en horizontal en pantallas estrechas en vez de comprimirse hasta ser ilegible. */ .rec-crono { padding: 20px 30px 6px 30px; overflow-x: auto; } .rec-crono .meses { display: flex; gap: 10px; min-width: 620px; } .rec-crono .mes { flex: 1 1 0; text-align: center; } .rec-crono .mes span { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; color: var(--gris-suave); margin-bottom: 5px; } .rec-crono .semanas { display: flex; gap: 2px; } .rec-crono .sem { flex: 1 1 0; height: 22px; border-radius: 3px; background: #fff; border: 1px solid var(--borde); } /* Semana que no pertenece a este mes (los meses con cuatro lunes dejan la quinta casilla vacía) */ .rec-crono .sem.fuera { background: #f7f7f9; border-color: #f0f0f3; } /* Semana en curso: la marca de "estás aquí" es lo que hace útil el cronograma. Va en azul oscuro porque las semanas ocupadas ya son naranjas y en naranja sobre naranja no se distinguiría. */ .rec-crono .sem.hoy { border: 2px solid var(--azul-oscuro); } .rec-crono .fechas { margin: 14px 0 0 0; font-size: 0.88rem; color: var(--gris); } /* Chips DENTRO del documento —ODS, competencias clave, recursos, espacios, metodologías, DUA—: son lo que el autor seleccionó, no cosas que se puedan pulsar. Van en gris para dejar el azul solo a lo que lleva a otra página (el enlace a la rúbrica o a la actividad). Con todo en azul, el documento parecía lleno de botones y no se distinguía lo que era pulsable de lo que no. */ .rec-doc-bloque .rec-chip { background: #f4f4f6; border-color: var(--borde); color: var(--gris); } .rec-doc-bloque .rec-chip b { color: var(--tinta); } /* Los chips de recuento también en la cabecera del documento */ .rec-doc > header .chips.cuentas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .rec-doc > header .chips.cuentas .rec-chip { background: #f4f4f6; border-color: var(--borde); color: var(--gris); padding: 3px 9px; } .rec-doc > header .chips.cuentas .rec-chip svg { stroke: var(--gris-suave); } /* Tabla de una rúbrica: es ancha por definición (el ítem, el peso y cinco niveles), así que se desplaza en horizontal dentro de su caja en vez de comprimirse hasta ser ilegible. */ .rec-tabla-scroll { overflow-x: auto; } .rec-rubrica { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 0.86rem; } .rec-rubrica th, .rec-rubrica td { padding: 11px 13px; border: 1px solid var(--borde); vertical-align: top; text-align: left; } .rec-rubrica thead th { background: #f7f6ff; color: var(--azul); font-weight: 600; white-space: nowrap; position: sticky; top: 0; } /* Cabecera de nivel: el color va en línea porque sale del mismo array que usa la aplicación. Sin texto, solo los emojis, y centrada: la columna no necesita ser más ancha que su contenido. */ .rec-rubrica thead th.nivel { text-align: center; font-size: 0.92rem; letter-spacing: 1px; width: 16%; } .rec-rubrica td { color: var(--gris); line-height: 1.5; } .rec-rubrica .item { min-width: 15em; color: var(--tinta); font-weight: 600; } .rec-rubrica .pon { width: 4.5em; text-align: center; white-space: nowrap; color: var(--tinta); font-weight: 600; } .rec-rubrica tbody tr:hover td { background: #fafafc; } .rec-rubrica .vacio { color: #c8c8d0; } .rec-rubrica tfoot td { background: #f7f6ff; color: var(--gris); } /* Tabla de instrumentos de evaluación: qué criterios valora cada uno, qué competencias clave moviliza y cuánto pesa. Mismas columnas que el informe de la aplicación, para que el cuadro resulte reconocible. Se desplaza en horizontal en pantallas estrechas en vez de comprimirse. Las celdas de los extremos llevan los 30px del resto del documento para que la tabla no quede descolgada respecto a los demás apartados. */ .rec-instrumentos { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9rem; } .rec-instrumentos th, .rec-instrumentos td { padding: 13px 14px; border-bottom: 1px solid #f0f0f3; text-align: left; vertical-align: top; } .rec-instrumentos th:first-child, .rec-instrumentos td:first-child { padding-left: 30px; } .rec-instrumentos th:last-child, .rec-instrumentos td:last-child { padding-right: 30px; } .rec-instrumentos thead th { background: #f7f6ff; color: var(--azul); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .rec-instrumentos tbody tr:hover td { background: #fafafc; } .rec-instrumentos .nombre { display: block; color: var(--tinta); font-weight: 600; } .rec-instrumentos .pon { width: 5.5em; text-align: center; white-space: nowrap; color: var(--tinta); font-weight: 600; } .rec-instrumentos .vacio { color: var(--gris-suave); } /* El enlace a la rúbrica va debajo del nombre del instrumento, no en columna propia: es la única fila que lo tiene y una columna entera casi siempre vacía pesa más de lo que informa. */ .rec-instrumentos .rec-item-accion { margin: 9px 0 0 0; font-size: 0.78rem; padding: 5px 12px; } /* Códigos de criterio (3.1) y de competencia clave (CCL): el texto completo va en el title, así que la píldora tiene que verse "consultable" — de ahí el cursor de ayuda. */ .rec-instrumentos .cods { display: flex; flex-wrap: wrap; gap: 5px; } .rec-instrumentos .cod { padding: 2px 9px; border-radius: 999px; background: #f4f4f6; border: 1px solid var(--borde); color: var(--gris); font-size: 0.78rem; font-weight: 600; white-space: nowrap; cursor: help; } /* El total del trimestre no es la suma de la columna (ver el comentario en situacion.php), así que se separa con una línea más marcada para que no se lea como un subtotal. */ .rec-instrumentos tfoot td { border-bottom: 0; border-top: 2px solid var(--borde); background: #fafafc; color: var(--tinta); } .rec-instrumentos tfoot .rotulo { text-align: right; font-weight: 600; } .rec-doc-lista { padding: 16px 30px; border-bottom: 1px solid #f0f0f3; } .rec-doc-lista:last-child { border-bottom: 0; } .rec-doc-lista > b { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-suave); margin-bottom: 8px; } .rec-doc-lista .chips { display: flex; flex-wrap: wrap; gap: 7px; } @media screen and (max-width: 600px) { .rec-doc > header { padding: 22px 18px 18px 18px; } .rec-doc > header h1 { font-size: 1.5rem; } .rec-doc-bloque > h2 { padding: 14px 18px; font-size: 1.05rem; } .rec-doc-bloque > p, .rec-doc-bloque > .chips, .rec-doc-act, .rec-doc-lista { padding-left: 18px; padding-right: 18px; } .rec-doc-bloque .rec-item { padding-left: 18px; padding-right: 18px; } .rec-instrumentos th:first-child, .rec-instrumentos td:first-child { padding-left: 18px; } .rec-instrumentos th:last-child, .rec-instrumentos td:last-child { padding-right: 18px; } } /* ------------------------------ generador de recursos con IA ------------------------------ */ /* La pantalla tiene dos decisiones encadenadas (qué trabajo y qué recurso quiero) y 280 recursos entre los que elegir: sin numerar los pasos se pierde de vista para qué sirve cada bloque. */ /* Sin el párrafo explicativo el paso es una sola línea, así que el número y el título se centran */ .rec-ia-paso { display: flex; gap: 14px; align-items: center; margin: 34px 0 18px 0; } .rec-ia-paso .num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--azul); color: #fff; font-family: 'ClashDisplay', sans-serif; font-size: 1.05rem; } .rec-ia-paso h3 { font-size: 1.35rem; margin-bottom: 0; } .rec-ia-grupo { margin-bottom: 30px; } .rec-ia-grupo > h3 { display: flex; align-items: center; gap: 9px; font-size: 1.1rem; color: var(--azul-oscuro); margin-bottom: 0.7em; } .rec-ia-grupo > h3 svg { width: 19px; height: 19px; stroke: var(--azul); } .rec-ia-grupo > h3 small { color: var(--gris-suave); font-family: 'Open Sans', sans-serif; font-size: 0.8rem; font-weight: 600; } .rec-ia-rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } .rec-ia-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: #fff; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .rec-ia-card:hover { border-color: var(--azul); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(25,0,220,0.1); } .rec-ia-card .ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #eeecfd; } .rec-ia-card .ico svg { width: 18px; height: 18px; stroke: var(--azul); } .rec-ia-card b { display: block; font-size: 0.94rem; line-height: 1.3; color: var(--tinta); } .rec-ia-card span { display: block; margin-top: 3px; font-size: 0.82rem; line-height: 1.4; color: var(--gris); } .rec-vacio { padding: 54px 24px; text-align: center; color: var(--gris); background: #fff; border: 1px dashed #d9d9de; border-radius: 8px; } .rec-vacio svg { width: 32px; height: 32px; stroke: #bcbcc6; margin-bottom: 12px; } .rec-aviso { font-size: 0.86rem; color: var(--gris-suave); } /* Mismo hueco, otro peso: cuando el aviso deja de ser un resumen y pasa a ser algo que conviene corregir antes de seguir (generar sin criterios ni saberes), en gris claro pasaba desapercibido. */ .rec-aviso.alerta { padding: 11px 14px; border-radius: 8px; text-align: left; background: #fff8e6; border: 1px solid #f2d999; color: #7a5b00; } /* ------------------------------ botones flotantes ------------------------------ */ /* El de compartir va en el verde de WhatsApp, igual que en recursos_ia_asignatura.php: el color ya dice a dónde lleva, sin necesidad de rótulo. Se apilan de abajo arriba. */ .rec-flotante { position: fixed; right: 24px; bottom: 24px; width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; color: #fff; background: var(--wapp); box-shadow: 0 6px 18px rgba(37,211,102,0.42); transition: transform .18s ease; z-index: 90; } .rec-flotante:hover { transform: scale(1.08); } .rec-flotante svg { width: 26px; height: 26px; stroke: #fff; } .rec-flotante.secundaria { bottom: 98px; background: var(--naranja); box-shadow: 0 6px 18px rgba(255,72,0,0.4); } @media screen and (max-width: 480px) { .rec-flotante { width: 54px; height: 54px; right: 16px; bottom: 16px; } .rec-flotante.secundaria { bottom: 82px; } } /* ------------------------------ ventanas ------------------------------ */ /* Propias, sin duDialog: esta zona no carga los scripts de la aplicación. */ .rec-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(20,20,28,0.55); } .rec-modal.abierta { display: flex; } .rec-modal-caja { position: relative; width: 100%; max-width: 36em; max-height: 88vh; overflow-y: auto; padding: 34px 28px 26px 28px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.28); text-align: center; } .rec-modal-caja h3 { font-size: 1.6rem; margin-bottom: 0.35em; } .rec-modal-caja p { font-size: 0.96rem; color: var(--gris); margin-bottom: 1.6em; } .rec-modal-cerrar { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--borde); background: #fff; color: var(--gris); font-size: 19px; line-height: 1; cursor: pointer; } .rec-modal-cerrar:hover { background: #f4f4f4; } .rec-modal .acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* Cabeza fija y cuerpo con scroll: el título y la X de cerrar no se van de la vista por largo que sea el contenido. El scroll pasa del contenedor al cuerpo. .ancha ventana para contenido que se lee (la actividad con su rúbrica), no para un aviso. .fija mismo ancho y mismo centrado de siempre, solo con la cabeza quieta. La estructura es común a las dos; lo que cambia (ancho y alineación) va aparte. */ .rec-modal-caja.ancha, .rec-modal-caja.fija { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .rec-modal-caja.ancha { max-width: 56em; text-align: left; } .rec-modal-caja.ancha h3 { text-align: left; margin-bottom: 0.2em; } .rec-modal-caja.ancha p { text-align: left; } .rec-modal-caja.ancha > .cabeza, .rec-modal-caja.fija > .cabeza { flex: 0 0 auto; position: relative; padding: 26px 28px 0 28px; } .rec-modal-caja.ancha > .cuerpo, .rec-modal-caja.fija > .cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 0 28px 26px 28px; } .rec-modal-caja.ancha .rec-modal-cerrar, .rec-modal-caja.fija .rec-modal-cerrar { top: 14px; right: 14px; } /* En .ancha debajo del título vienen las pestañas, que ya traen su propio margen; aquí empieza directamente el texto y sin este hueco quedaría pegado al título. */ .rec-modal-caja.fija > .cuerpo { padding-top: 16px; } @media screen and (max-width: 600px) { .rec-modal-caja.ancha > .cabeza, .rec-modal-caja.fija > .cabeza { padding: 20px 18px 0 18px; } .rec-modal-caja.ancha > .cuerpo, .rec-modal-caja.fija > .cuerpo { padding: 0 18px 20px 18px; } .rec-modal-caja.fija > .cuerpo { padding-top: 14px; } } /* Ventana del generador con IA. La descripción ("qué vas a obtener") y el prompt ("lo que se le manda a la IA") son dos cosas distintas y seguidas se leían como un solo párrafo. El prompt va en su propia caja, alineado a la izquierda y con tipografía de código: así se ve de un vistazo que ese es el texto literal que se copia al portapapeles, no otra explicación. Va después de .rec-modal-caja p a propósito, para poder anular su margen inferior. */ .rec-ia-prompt { text-align: left; margin: 0 0 1.6em 0; padding: 12px 14px; border-radius: 8px; background: #f7f6ff; border: 1px solid #ddd8fa; border-left: 4px solid var(--azul); } .rec-ia-prompt > b { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--azul); } .rec-ia-prompt > b svg { width: 14px; height: 14px; stroke: var(--azul); } /* Con tope de altura: hay prompts largos y no deben empujar los botones fuera de la ventana */ .rec-ia-prompt p { margin: 0; max-height: 11em; overflow-y: auto; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 0.82rem; line-height: 1.55; color: var(--gris); } /* Pestañas dentro de la ventana: la actividad, lo que evalúa y con qué rúbrica */ .rec-modal-tabs { display: flex; gap: 4px; margin: 18px 0 0 0; border-bottom: 1px solid var(--borde); overflow-x: auto; } .rec-modal-tabs button { padding: 9px 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--gris); font-size: 0.92rem; font-weight: 600; cursor: pointer; } .rec-modal-tabs button:hover { color: var(--azul); } .rec-modal-tabs button.activa { color: var(--azul); border-bottom-color: var(--azul); } .rec-modal-panel { padding-top: 18px; } .rec-modal-panel .texto { white-space: pre-wrap; color: var(--tinta); font-size: 0.94rem; line-height: 1.6; } /* Dentro de la ventana los bloques van sin el sangrado de 30px del documento */ .rec-modal-panel .rec-grupo { margin: 12px 0 0 0; } .rec-modal-panel .rec-item { padding-left: 14px; padding-right: 14px; } .rec-modal-panel .rec-rubrica { min-width: 760px; font-size: 0.82rem; } /* Las comunidades son minitarjetas, no botones: son 18 opciones y en forma de píldora se leían como una nube de etiquetas. Con la retícula de tarjetas se recorren con la vista mucho antes. */ .rec-ccaa-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: 10px; text-align: left; } /* Sin icono: la chincheta se repetía 18 veces y era ruido, no información. */ .rec-ccaa-opcion { display: flex; align-items: center; min-height: 3.4em; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; color: var(--tinta); font-size: 0.88rem; font-weight: 600; line-height: 1.3; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .rec-ccaa-opcion:hover { background: #f7f6ff; border-color: var(--azul); color: var(--azul); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(25,0,220,0.12); text-decoration: none; } .rec-ccaa-opcion.actual { background: var(--azul); border-color: var(--azul); color: #fff; } /* ------------------------------ pie ------------------------------ */ /* Azul de marca a sangre y cuatro columnas, como el de www.didactio.es */ .rec-pie { background: var(--azul); color: #fff; padding: 56px 0 24px 0; font-size: 0.95rem; } .rec-pie a { color: #fff; text-decoration: underline; } .rec-pie .cols { display: grid; gap: 34px; grid-template-columns: 1.6fr 1fr 1fr 1fr; } /* La marca del pie es el logotipo blanco recortado, ver recursos_layout.php */ .rec-pie-marca { margin-bottom: 16px; } .rec-pie-marca img { display: block; width: 200px; max-width: 100%; height: auto; } .rec-pie h4 { font-family: 'Open Sans', sans-serif; font-size: 1.05rem; font-weight: 400; letter-spacing: 0.02em; margin-bottom: 0.9em; } .rec-pie ul { list-style: disc; margin: 0; padding-left: 1.1em; } .rec-pie li { margin-bottom: 0.45em; } .rec-pie .claim { color: rgba(255,255,255,0.9); max-width: 22em; } /* Redes sociales: solo el icono en un círculo, sin subrayado (el resto de enlaces del pie sí lo llevan, pero aquí no hay texto que subrayar). El área pulsable es de 40px, que es lo mínimo cómodo en un móvil. */ .rec-pie-redes { display: flex; gap: 10px; margin-top: 18px; } .rec-pie-redes a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); text-decoration: none; transition: background .15s ease, border-color .15s ease; } .rec-pie-redes a:hover { background: rgba(255,255,255,0.16); border-color: #fff; } .rec-pie-redes svg { width: 19px; height: 19px; stroke: #fff; } .rec-pie .legal { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.35); font-size: 0.86rem; color: rgba(255,255,255,0.85); } @media screen and (max-width: 860px) { .rec-pie .cols { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 560px) { .rec-pie .cols { grid-template-columns: 1fr; } } /* ================================================================== WEBINARS — franja de portada, calendario y formulario de reserva ------------------------------------------------------------------ Todo lo de aquí abajo es nuevo porque no había nada equivalente en la hoja: un calendario mensual y unos chips que se marcan. El resto de la pantalla (botones, ventana, campos, sello, estado vacío) reutiliza lo que ya estaba más arriba, así que aquí solo hay lo imprescindible. ================================================================== */ /* ------------------------------ franja de la portada ------------------------------ */ /* Baja y horizontal a propósito: siendo un bloque alto competiría con los recursos, que son el contenido principal de la portada. Sin relleno arriba porque la sección de recursos que la precede ya deja sus 64px; abajo los pone ella, o la caja quedaría pegada al pie azul. */ .rec-franja { padding: 0 0 64px 0; } .rec-franja-caja { display: flex; align-items: center; gap: 26px; padding: 22px 30px; border-radius: 18px; background: #fff; border: 1px solid var(--borde); box-shadow: 0 6px 24px rgba(16,1,131,0.07); } .rec-franja-arte { flex: 0 0 150px; } .rec-franja-arte svg { width: 100%; height: auto; display: block; } .rec-franja-texto { flex: 1 1 auto; min-width: 0; } .rec-franja-texto h2 { font-size: 1.55rem; margin: 10px 0 6px 0; } .rec-franja-texto p { margin: 0; color: var(--gris); font-size: 0.96rem; } .rec-franja-accion { flex: 0 0 auto; } /* El sello del hero, en su versión sobre fondo claro */ .rec-sello.directo { background: #fff1ec; color: #c33800; border: 1px solid #ffd2c2; } @media screen and (max-width: 860px) { .rec-franja-caja { flex-wrap: wrap; gap: 18px; padding: 20px; text-align: center; } .rec-franja-arte { flex: 0 0 110px; margin: 0 auto; } .rec-franja-texto { flex: 1 1 100%; } .rec-franja-accion { flex: 1 1 100%; } .rec-franja-accion .rec-btn { width: 100%; } } /* ------------------------------ hero corto ------------------------------ */ /* El hero de la portada mide 72px arriba y 78 abajo. Aquí lo que importa es el calendario, que tiene que verse sin desplazarse, así que la franja azul ocupa menos. Menos, pero no tan poco como para que el texto se pegue a los bordes: se probó con 30/32px y quitándole además el margen inferior a la entradilla, y con las dos cosas a la vez el titular y el párrafo quedaban comprimidos contra el azul. La altura la marca el aire alrededor del texto, no solo el relleno de la franja. */ .rec-hero.corto { padding: 40px 0 44px 0; } .rec-hero.corto h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 0.35em; } .rec-hero.corto .entradilla { margin-bottom: 0.2em; line-height: 1.6; } /* ------------------------------ resultado de la reserva ------------------------------ */ .rec-resultado { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 26px 0; padding: 18px 22px; border-radius: 14px; border: 1px solid; font-size: 0.95rem; } .rec-resultado b { display: block; font-size: 1.06rem; margin-bottom: 3px; } .rec-resultado p { margin: 0; } .rec-resultado svg { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 2px; } .rec-resultado.ok { background: #e9f9f0; border-color: #b6e6c9; color: #17603a; } .rec-resultado.aviso { background: #fff4e8; border-color: #ffd7ab; color: #8a4b00; } /* ------------------------------ barra de meses ------------------------------ */ .rec-cal-barra { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } /* Sin text-transform: capitalize. Esa regla pone en mayúscula CADA palabra, y el título es "agosto de 2026": salía "Agosto De 2026". La mayúscula inicial, que es la única que se quiere, la pone ya el PHP que compone el texto. */ .rec-cal-barra h2 { font-size: 1.7rem; text-align: center; flex: 1 1 auto; } /* El botón que no lleva a ninguna parte se deja en su sitio, apagado: quitándolo, el título saltaría de posición al cambiar de mes. */ .rec-btn.inerte { opacity: .35; cursor: default; pointer-events: none; } /* ------------------------------ calendario ------------------------------ */ .rec-cal { background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; } .rec-cal-cab, .rec-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); } .rec-cal-cab { background: #f7f6ff; border-bottom: 1px solid var(--borde); font-size: 0.76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); } .rec-cal-cab > div { padding: 11px 6px; text-align: center; } .rec-cal-cab > div.finde { color: var(--gris-suave); } .rec-cal-dia { min-height: 104px; padding: 8px 8px 10px 8px; border-right: 1px solid #f0f0f3; border-bottom: 1px solid #f0f0f3; display: flex; flex-direction: column; gap: 6px; } .rec-cal-dia:nth-child(7n) { border-right: 0; } .rec-cal-dia .num { font-size: 0.9rem; font-weight: 600; color: var(--gris); } /* Huecos previos al día 1, fines de semana y días pasados: mismo gris apagado. Nunca hay webinar en sábado ni en domingo, así que se ven pero no ofrecen nada. */ .rec-cal-dia.hueco { background: #fafafc; } .rec-cal-dia.finde { background: #fafafc; } .rec-cal-dia.pasado { background: #fafafc; } .rec-cal-dia.finde .num, .rec-cal-dia.pasado .num { color: #c3c3cc; } /* Hoy. Va DESPUÉS de .finde y .pasado a propósito: si hoy cae en sábado tiene que ganar el resaltado, porque para lo que sirve es para situarse en la rejilla. Lila suave y el número en azul, nada más fuerte: la protagonista de la casilla sigue siendo la sesión. */ .rec-cal-dia.hoy { background: #f5f2fe; } .rec-cal-dia.hoy .num { color: var(--azul); font-weight: 700; } /* El día con sesión se distingue por la franja azul de la izquierda, el mismo recurso que usan .tabla-lista y .tabla-grupo en la aplicación */ .rec-cal-dia.con-sesion { box-shadow: inset 3px 0 0 var(--azul); } .rec-cal-sesion { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 7px 6px; border-radius: 9px; background: #eeecfd; border: 1px solid #ddd8fa; color: var(--azul); font-size: 0.86rem; font-weight: 600; cursor: pointer; } .rec-cal-sesion:hover { background: var(--azul); border-color: var(--azul); color: #fff; } .rec-cal-sesion svg { width: 14px; height: 14px; } /* Sesión con gente ya apuntada. Verde claro, que es el color de "esto ya está en marcha" y no compite con el azul de marca del resto del calendario. Sigue siendo pulsable —no hay límite de plazas—, así que conserva su relieve y su cursor; lo único que cambia es que se distingue de un vistazo cuál es la sesión a la que ya va alguien. El :hover se mantiene en verde, más oscuro, en vez de saltar al azul: si cambiara de color al pasar por encima se perdería justo la señal. */ .rec-cal-sesion.con-gente { background: #e7f6ec; border-color: #c3e6ce; color: #17663a; } .rec-cal-sesion.con-gente:hover { background: #17663a; border-color: #17663a; color: #fff; } /* Sesión ya impartida: se sigue viendo, apagada y sin responder al cursor. Enseñarlas en gris hace que un mes empezado se lea como un calendario que se está usando; borrarlas dejaría medio mes en blanco y parecería que no hay nada. El :hover se anula expresamente, o al pasar por encima seguiría poniéndose azul y volvería a parecer pulsable. */ .rec-cal-sesion.pasada, .rec-cal-sesion.pasada:hover { background: #f4f4f6; border-color: #e4e4e8; color: #a0a0aa; cursor: default; font-weight: 500; } .rec-cal-nota { margin-top: 16px; } .rec-cal-nota p { margin: 0; font-size: 0.9rem; color: var(--gris); } /* En móvil siete columnas siguen siendo siete: es lo que hace reconocible un calendario. Lo que se encoge es la casilla, y la hora de la sesión pierde el icono para que quepa. */ @media screen and (max-width: 860px) { .rec-cal-barra { flex-wrap: wrap; } .rec-cal-barra h2 { order: -1; flex: 1 1 100%; } .rec-cal-barra .rec-btn { flex: 1 1 0; } .rec-cal-dia { min-height: 76px; padding: 5px 4px 7px 4px; gap: 4px; } .rec-cal-dia .num { font-size: 0.78rem; } .rec-cal-sesion { padding: 5px 2px; font-size: 0.74rem; gap: 0; } .rec-cal-sesion svg { display: none; } .rec-cal-cab > div { padding: 8px 2px; font-size: 0.66rem; } } /* ------------------------------ chips de temas ------------------------------ */ .rec-temas { border: 0; padding: 0; margin: 4px 0 0 0; min-width: 0; } .rec-temas legend { padding: 0; font-size: 0.82rem; font-weight: 600; color: var(--gris); } .rec-temas legend span { font-weight: 400; color: var(--gris-suave); } .rec-temas-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* La casilla real se oculta pero SIGUE EXISTIENDO: así se marca con el teclado, un lector de pantalla la anuncia y el formulario funciona aunque el JavaScript no llegue a ejecutarse. */ .rec-tema { cursor: pointer; } .rec-tema input { position: absolute; opacity: 0; width: 0; height: 0; } .rec-tema span { display: inline-block; padding: 7px 14px; border-radius: 999px; background: #f4f4f7; border: 1px solid #e3e3e8; color: var(--gris); font-size: 0.84rem; font-weight: 600; user-select: none; } .rec-tema:hover span { border-color: #c9c4f3; color: var(--azul); } .rec-tema input:checked + span { background: #eeecfd; border-color: var(--azul); color: var(--azul); } /* El foco tiene que verse: sin esto, quien navega con el tabulador no sabe dónde está */ .rec-tema input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; } /* ------------------------------ formulario de reserva ------------------------------ */ /* La caja base centra el texto (es la de los avisos). Un formulario se lee a la izquierda: los rótulos tienen que caer a plomo sobre sus campos. */ .rec-web-caja { text-align: left; } .rec-web-caja h3 { text-align: left; } /* La caja base separa cada

del siguiente bloque con 1.6em, pensando en un aviso de dos líneas. Aquí ese hueco descuadraba la cabecera; el aire con los campos lo pone .rec-web-campos. */ .rec-web-caja .rec-web-cuando { margin: 0 0 14px 0; } .rec-web-cuando { color: var(--gris); font-size: 0.95rem; } .rec-web-cuando b { color: var(--tinta); } /* Ventana de TRES bloques: cabeza quieta, campos que se desplazan y pie quieto con los botones. Es el

quien hace de columna flexible y no la caja, porque tiene que envolver a la vez a los campos y a los botones: un