/* Reuniones de Teams — el horario de clases de cada actividad (y la base de la consola). Papel blanco, tinta azul noche, marco de tabla de 2 px y filetes finos; cada curso tiene su color de materia. Esquinas rectas; cifras tabulares para las horas. */ @font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); } /* El atributo hidden gana a los display de las clases (p. ej. .boton). */ [hidden] { display: none !important; } :root { --papel: #ffffff; --tinta: #15202e; --tinta-2: #3b4859; --tinta-3: #56657a; --filete: #cfd6df; --filete-medio: #7d8898; --cabecera: #edf1f5; --foco: #1d4ea8; --ok: #17663d; --ok-tinte: #dcf1e4; --error: #a1261c; --error-tinte: #fbe3e0; --aviso: #664c00; --aviso-tinte: #fbefc2; /* Color de la materia (el curso); se reemplaza con data-materia en . */ --materia: #1d4ea8; --materia-tinte: #dde8fb; --letra: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --letra-estrecha: "Barlow Condensed", "Barlow", "Arial Narrow", "Segoe UI", system-ui, sans-serif; /* Cuadro del horario: todas las medidas son múltiplos de 4 px. */ --u: 4px; --marco: 2px solid var(--tinta); --linea: 1px solid var(--filete); font-family: var(--letra); color: var(--tinta); line-height: 1.5; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--filete-medio) var(--papel); accent-color: var(--tinta); } body[data-materia="1"] { --materia: #1d4ea8; --materia-tinte: #dde8fb; } body[data-materia="2"] { --materia: #17663d; --materia-tinte: #d9efe1; } body[data-materia="3"] { --materia: #924400; --materia-tinte: #fce3c9; } body[data-materia="4"] { --materia: #5731a8; --materia-tinte: #e9e1fa; } body[data-materia="5"] { --materia: #a1261c; --materia-tinte: #fbdeda; } body[data-materia="6"] { --materia: #0b5f67; --materia-tinte: #d4edef; } body[data-materia="7"] { --materia: #6b5000; --materia-tinte: #f6eab6; } body[data-materia="8"] { --materia: #93205d; --materia-tinte: #f8deec; } * { box-sizing: border-box; } body { margin: 0; background: var(--papel); } ::selection { background: var(--materia-tinte); color: var(--tinta); } h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; } h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: 1.25rem; font-weight: 700; } h3 { font-size: 1.0625rem; font-weight: 600; } p { margin: 0 0 calc(var(--u) * 3); } a { color: var(--foco); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.875em; background: var(--cabecera); padding: 0.1em 0.35em; word-break: break-all; } :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; } /* Solo para lectores de pantalla. */ .sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ hoja */ .hoja { max-width: 1040px; margin: 0 auto; padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 8); display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 7); } .hoja-estrecha { max-width: 600px; padding-top: calc(var(--u) * 10); } /* Encabezado: el título del horario con sus campos, como en un horario impreso. */ .encabezado { display: grid; gap: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 3); border-bottom: var(--marco); } .campos { display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 8); margin: 0; } .campos div { display: flex; align-items: baseline; gap: calc(var(--u) * 2); min-width: 0; } .campos dt, .campo label, .grupo, .dia-nombre, .sello, legend, .tabla thead th, .talon-dia, .talon-mes { font-family: var(--letra-estrecha); text-transform: uppercase; letter-spacing: 0.04em; } .campos dt { font-weight: 600; font-size: 0.8125rem; color: var(--tinta-3); } .campos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .rol { font-family: var(--letra-estrecha); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-2); margin-left: calc(var(--u) * 1); } .aviso-simulacion { margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 3); background: var(--aviso-tinte); color: var(--aviso); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; } .nota { color: var(--tinta-2); max-width: 72ch; } .vacio { color: var(--tinta-2); margin: 0; padding: calc(var(--u) * 4) 0; } /* ------------------------------------------------------------------ secciones */ .seccion { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 3); } .seccion > .nota { margin: 0; } .seccion-cabecera { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 2) calc(var(--u) * 4); flex-wrap: wrap; } .acciones { display: flex; gap: calc(var(--u) * 2); flex-wrap: wrap; align-items: center; } /* ------------------------------------------------------------------ botones */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); min-height: 44px; padding: calc(var(--u) * 2) calc(var(--u) * 4); border-radius: 0; border: 1px solid transparent; font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; text-align: center; transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; } .boton-primario { background: var(--tinta); color: var(--papel); } .boton-primario:hover { background: #2a3a50; } .boton-secundario { background: var(--papel); color: var(--tinta); border-color: var(--tinta); } .boton-secundario:hover { background: var(--cabecera); } .boton-enlace { background: none; color: var(--foco); padding-left: calc(var(--u) * 2); padding-right: calc(var(--u) * 2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .boton-enlace:hover { text-decoration-thickness: 2px; } .boton-unirse { background: var(--materia); color: var(--papel); min-height: 56px; padding: calc(var(--u) * 3) calc(var(--u) * 6); font-size: 1.125rem; } .boton-unirse:hover { background: var(--tinta); } .boton-peligro { background: var(--papel); color: var(--error); border-color: var(--error); margin-left: auto; } .boton-peligro:hover { background: var(--error-tinte); } .boton:disabled, .boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .boton-primario:disabled:hover { background: var(--tinta); } /* ------------------------------------------------------------------ sellos (estado) */ .sello { display: inline-flex; align-items: center; gap: var(--u); font-size: 0.8125rem; font-weight: 700; line-height: 1; padding: calc(var(--u) * 1) calc(var(--u) * 2) 3px; border: 1px solid currentColor; color: var(--tinta-2); white-space: nowrap; } .sello[data-kind="vivo"] { background: var(--materia); border-color: var(--materia); color: var(--papel); } .sello[data-kind="ok"] { color: var(--ok); } .sello[data-kind="error"] { color: var(--error); } .sello[data-kind="aviso"] { color: var(--aviso); background: var(--aviso-tinte); } .sello[data-kind="apagado"] { color: var(--tinta-3); } /* ------------------------------------------------------------------ la clase de hoy */ .celda-clase { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "estado estado estado" "horas info boton" "regla regla regla"; align-items: center; gap: calc(var(--u) * 3) calc(var(--u) * 6); padding: calc(var(--u) * 5) calc(var(--u) * 6); background: var(--materia-tinte); border: 2px solid var(--materia); } .celda-clase[data-kind="proxima"] { background: var(--papel); grid-template-areas: "estado estado estado" "horas info boton"; } .celda-estado { grid-area: estado; display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 3); margin: 0; font-weight: 600; color: var(--tinta-2); } .celda-horas { grid-area: horas; margin: 0; font-family: var(--letra-estrecha); font-weight: 700; font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--materia); white-space: nowrap; } .celda-horas .hasta { color: var(--tinta-2); font-weight: 600; } .celda-info { grid-area: info; min-width: 0; } .celda-info h2 { font-size: 1.375rem; overflow-wrap: anywhere; } .celda-info .meta { margin: var(--u) 0 0; color: var(--tinta-2); } .celda-clase .boton-unirse { grid-area: boton; } .celda-clase .otra { grid-column: 1 / -1; margin: 0; padding-top: calc(var(--u) * 3); border-top: 1px solid var(--materia); } /* Regla de tiempo: de la hora de inicio a la de fin, con marcas cada 15 minutos. */ .regla { grid-area: regla; display: grid; gap: calc(var(--u) * 1); } .regla-cuerpo { position: relative; } .regla-pista { position: relative; height: 16px; border: 1px solid var(--materia); background: var(--papel); overflow: hidden; } .regla-avance { position: absolute; inset: 0; background: var(--materia); transform-origin: left center; transform: scaleX(0); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } /* Marcas debajo de la pista: cada 15 min (4 px) y en las horas en punto (8 px). */ .regla-marcas { position: relative; height: 8px; } .regla-marcas span { position: absolute; top: 0; width: 1px; height: 4px; margin-left: -0.5px; background: var(--tinta-2); } .regla-marcas span[data-hora] { height: 8px; background: var(--tinta); } /* Línea de «ahora»: cruza la pista y las marcas en el borde del avance. */ .regla-ahora { position: absolute; top: -4px; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--tinta); transition: left 900ms cubic-bezier(0.16, 1, 0.3, 1); } .regla-escala { position: relative; height: 1.25rem; font-family: var(--letra-estrecha); font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; font-variant-numeric: tabular-nums; color: var(--tinta-2); } .regla-escala span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .regla-escala .regla-inicio { left: 0; transform: none; } .regla-escala .regla-fin { right: 0; left: auto; transform: none; } .regla-texto { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ la semana */ .semana { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--marco); } .dia { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-right: var(--linea); } .dia:last-child { border-right: 0; } .dia-cabecera { display: flex; align-items: baseline; justify-content: center; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.5) var(--u); background: var(--cabecera); border-bottom: var(--linea); } .dia-nombre { font-weight: 700; font-size: 0.875rem; } .dia-numero { font-family: var(--letra-estrecha); font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--tinta-2); } .dia[data-hoy] .dia-cabecera { background: var(--tinta); border-bottom-color: var(--tinta); } .dia[data-hoy] .dia-nombre, .dia[data-hoy] .dia-numero { color: var(--papel); } .dia-clases { display: grid; align-content: start; gap: var(--u); padding: calc(var(--u) * 1.5); min-height: 48px; } .ficha-hora { display: block; padding: calc(var(--u) * 1) calc(var(--u) * 1.5); background: var(--materia-tinte); color: var(--tinta); border: 1px solid var(--materia); text-decoration: none; font-family: var(--letra-estrecha); font-weight: 700; font-size: 0.9375rem; line-height: 1.2; font-variant-numeric: tabular-nums; text-align: center; overflow: hidden; text-overflow: ellipsis; } .ficha-hora:hover { background: var(--materia); color: var(--papel); } .ficha-hora[data-kind="vivo"] { background: var(--materia); color: var(--papel); } .ficha-hora[data-kind="pasada"] { background: var(--papel); border-color: var(--filete-medio); color: var(--tinta-3); } .ficha-hora[data-kind="pasada"]:hover { background: var(--cabecera); color: var(--tinta); } /* Casilla vacía del docente: escribir una sala nueva ese día. */ .ficha-nueva { display: block; width: 100%; padding: calc(var(--u) * 1) 0; background: var(--papel); color: var(--tinta-3); border: 1px dashed var(--filete-medio); font: inherit; font-family: var(--letra-estrecha); font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .ficha-nueva:hover { color: var(--tinta); border-style: solid; border-color: var(--tinta); } /* ------------------------------------------------------------------ filas del horario y del registro */ .grupo { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 3); background: var(--cabecera); border-top: var(--marco); border-bottom: var(--linea); font-size: 0.9375rem; font-weight: 700; } .grupo small { font-size: 0.875rem; font-weight: 600; color: var(--tinta-2); } .filas { display: grid; } .filas > .mensaje { margin: calc(var(--u) * 2) 0; } .fila { display: grid; grid-template-columns: 76px 128px minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 2) calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 3); border-bottom: var(--linea); scroll-margin-top: calc(var(--u) * 6); } .fila:target { background: var(--materia-tinte); } .fila-sin-horas { grid-template-columns: 76px minmax(0, 1fr) auto; } .talon { display: grid; justify-items: start; line-height: 1.05; } .talon-dia { font-size: 0.8125rem; font-weight: 700; color: var(--tinta-2); } .talon-numero { font-family: var(--letra-estrecha); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; } .talon-mes { font-size: 0.8125rem; font-weight: 600; color: var(--tinta-2); } .talon[data-hoy] .talon-dia, .talon[data-hoy] .talon-mes { color: var(--materia); } .talon[data-hoy] .talon-numero { color: var(--materia); } .horas { font-family: var(--letra-estrecha); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; } .fila-info { min-width: 0; display: grid; gap: var(--u); } .fila-info h3 { overflow-wrap: anywhere; } .fila-info .meta { margin: 0; color: var(--tinta-2); font-size: 0.9375rem; } .fila-info .sellos { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); } .fila-acciones { display: flex; gap: calc(var(--u) * 2); flex-wrap: wrap; justify-content: flex-end; } .fila[data-pasada] .horas, .fila[data-pasada] .talon-numero { color: var(--tinta-3); } .fila .mensaje, .fila .nota { margin: 0; font-size: 0.9375rem; } details.filas { display: block; } details.anteriores > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 2); } details.anteriores > summary small { margin-left: auto; } details.anteriores > summary::-webkit-details-marker { display: none; } details.anteriores > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); transform: rotate(-45deg); transition: transform 160ms ease-out; flex: none; } details.anteriores[open] > summary::before { transform: rotate(45deg); } details.anteriores > summary:hover { background: #e2e8ef; } /* Reproductor dentro de la fila de la grabación. */ .reproductor { grid-column: 1 / -1; width: 100%; max-height: 72vh; background: var(--tinta); display: block; } /* ------------------------------------------------------------------ mensajes */ .mensaje { margin: 0; min-height: 0; font-weight: 500; max-width: 72ch; } .mensaje:empty { display: none; } .mensaje[data-kind="ok"] { color: var(--ok); } .mensaje[data-kind="error"] { color: var(--error); } .mensaje[data-kind="info"] { color: var(--tinta-2); } /* ------------------------------------------------------------------ formularios */ .formulario { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4); align-items: end; } .campo { display: grid; gap: calc(var(--u) * 1.5); min-width: 0; } .campo-ancho { grid-column: 1 / -1; } .campo label { font-size: 0.875rem; font-weight: 600; color: var(--tinta-2); } .campo.acciones { display: flex; } .campo > .boton { justify-self: start; } .campo label.casilla { font-family: var(--letra); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 500; color: var(--tinta); } input, select, textarea { font: inherit; color: var(--tinta); min-height: 44px; padding: calc(var(--u) * 2) calc(var(--u) * 3); border: 1px solid var(--filete-medio); border-radius: 0; background: var(--papel); width: 100%; caret-color: var(--foco); } input:hover, select:hover { border-color: var(--tinta-2); } input::placeholder { color: var(--tinta-3); } input[type="date"], input[type="time"] { font-variant-numeric: tabular-nums; } .casilla { display: flex; align-items: flex-start; gap: calc(var(--u) * 2.5); font-weight: 500; cursor: pointer; } .casilla input { width: 20px; min-height: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--tinta); } /* ------------------------------------------------------------------ ventanas (crear y configurar) */ .dialogo { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: var(--marco); border-radius: 0; color: var(--tinta); background: var(--papel); box-shadow: 0 16px 40px rgb(21 32 46 / 22%); } .dialogo-estrecho { width: min(620px, calc(100vw - 32px)); } .dialogo::backdrop { background: rgb(21 32 46 / 50%); } .dialogo[open] { animation: aparecer 220ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } } .dialogo-contenido { display: grid; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 6) calc(var(--u) * 6); } .dialogo-cabecera { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 3); margin: 0 calc(var(--u) * -6); padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 6); background: var(--cabecera); border-bottom: var(--marco); } .grupo-campos { border: 0; border-top: var(--linea); padding: calc(var(--u) * 3) 0 0; margin: 0; display: grid; gap: calc(var(--u) * 3); min-width: 0; } .grupo-campos legend { float: left; width: 100%; padding: 0 0 calc(var(--u) * 3); font-weight: 700; font-size: 0.9375rem; } .grupo-campos legend + * { clear: both; } .grupo-campos .nota { margin: 0; font-size: 0.9375rem; } .opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4); } .casillas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3) calc(var(--u) * 5); } .acciones-dialogo { padding-top: calc(var(--u) * 4); border-top: var(--marco); } /* Bloque plegable (opciones avanzadas, instrucciones). */ .desplegable { border-top: var(--linea); border-bottom: var(--linea); } .desplegable > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3) 0; font-weight: 600; color: var(--foco); } .desplegable > summary::-webkit-details-marker { display: none; } .desplegable > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 160ms ease-out; flex: none; } .desplegable[open] > summary::before { transform: rotate(45deg); } .desplegable[open] { display: grid; gap: calc(var(--u) * 4); padding-bottom: calc(var(--u) * 4); } .desplegable > p { margin: 0; } /* Días de clase de una serie: la franja de la semana convertida en casillas. */ .dias { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: calc(var(--u) * 1.5); } .dias legend { padding: 0 0 calc(var(--u) * 1.5); font-size: 0.875rem; font-weight: 600; color: var(--tinta-2); } .dias-opciones { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--marco); } .dia-opcion { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; border-right: var(--linea); cursor: pointer; font-family: var(--letra-estrecha); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-2); background: var(--papel); } .dia-opcion:last-child { border-right: 0; } .dia-opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .dia-opcion:hover { background: var(--cabecera); color: var(--tinta); } .dia-opcion:has(input:checked) { background: var(--tinta); color: var(--papel); } .dia-opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; z-index: 1; } .grupo-repetir [data-repetir][hidden] { display: none !important; } /* En la ventana «Crear» (más angosta), repetición y opciones van en dos columnas. */ .grupo-repetir .formulario, .dialogo-estrecho .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ------------------------------------------------------------------ hojas sueltas (errores, avisos, resultados) */ .hoja-aviso { display: grid; gap: calc(var(--u) * 3); padding: calc(var(--u) * 6); border: var(--marco); } .hoja-aviso > * { margin: 0; } .hoja-aviso h1 { font-size: 1.5rem; padding-bottom: calc(var(--u) * 3); border-bottom: var(--linea); } .hoja-aviso[data-kind="error"] h1 { color: var(--error); } .hoja-aviso[data-kind="exito"] h1 { color: var(--ok); } .hoja-aviso ol, .hoja-aviso ul { padding-left: calc(var(--u) * 6); display: grid; gap: calc(var(--u) * 2); } .hoja-aviso .boton { justify-self: start; } .datos { margin: 0; } .datos dt { font-weight: 600; margin-top: calc(var(--u) * 2); } .datos dd { margin: var(--u) 0 0; } .pie { padding-top: calc(var(--u) * 3); border-top: var(--linea); color: var(--tinta-3); font-family: var(--letra-estrecha); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ------------------------------------------------------------------ pantallas medianas */ @media (max-width: 860px) { .ficha-fin { display: none; } .celda-clase { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "estado estado" "horas boton" "info info" "regla regla"; } .celda-clase[data-kind="proxima"] { grid-template-areas: "estado estado" "horas boton" "info info"; } .fila { grid-template-columns: 64px minmax(0, 1fr) auto; } .fila .horas { grid-column: 2; grid-row: 1; } .fila .fila-info { grid-column: 2; grid-row: 2; } .fila .talon { grid-row: 1 / span 2; align-self: start; } .fila .fila-acciones { grid-column: 3; grid-row: 1 / span 2; } .fila-sin-horas .fila-info { grid-row: 1; } .fila-sin-horas .talon { grid-row: 1; } .fila-sin-horas .fila-acciones { grid-row: 1; } } /* ------------------------------------------------------------------ celular */ @media (max-width: 600px) { .hoja { padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 6); gap: calc(var(--u) * 6); } h1 { font-size: 1.5rem; } .celda-clase, .celda-clase[data-kind="proxima"] { grid-template-columns: minmax(0, 1fr); padding: calc(var(--u) * 4); grid-template-areas: "estado" "horas" "info" "regla" "boton"; } .celda-clase[data-kind="proxima"] { grid-template-areas: "estado" "horas" "info"; } .celda-horas { font-size: 2.25rem; } .celda-clase .boton-unirse { width: 100%; } .semana { grid-template-columns: repeat(7, minmax(0, 1fr)); } .dia-cabecera { flex-direction: column; align-items: center; gap: 0; padding: var(--u) 0; } .dia-nombre { font-size: 0.8125rem; } .dia-clases { padding: var(--u) 2px; } .ficha-hora { padding: var(--u) 0; font-size: 0.8125rem; border-width: 1px; } .ficha-nueva { font-size: 0.75rem; letter-spacing: 0; } .fila, .fila-sin-horas { grid-template-columns: 52px minmax(0, 1fr); gap: calc(var(--u) * 2) calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 2); } .fila .fila-acciones { grid-column: 1 / -1; grid-row: auto; justify-content: stretch; } .fila .fila-acciones .boton { flex: 1 1 0; } .fila-sin-horas .fila-info { grid-column: 2; } .talon-numero { font-size: 1.5rem; } .formulario, .opciones, .casillas, .grupo-repetir .formulario, .dialogo-estrecho .opciones { grid-template-columns: minmax(0, 1fr); } .dialogo-contenido { padding: 0 calc(var(--u) * 4) calc(var(--u) * 4); } .dialogo-cabecera { margin: 0 calc(var(--u) * -4); padding-left: calc(var(--u) * 4); } .acciones-dialogo .boton { flex: 1 1 auto; } .boton-peligro { margin-left: 0; } .hoja-aviso { padding: calc(var(--u) * 4); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }