/* * Aula Virtual — base comun de todas las pantallas. * * Aca viven los tokens (colores, espacios, tipografia, sombras) y los * componentes que se repiten: barra superior, tarjetas, botones, formularios, * tablas, chips de estado y mensajes. Encima de esto se apoyan publico.css, * admin.css, verificar.css y diploma.css, que solo agregan lo suyo. * * LOS COLORES DE MARCA NO SE DEFINEN ACA. * --color-primario* y --color-acento* los inyecta el tema desde PHP * (lib/tema.php -> tema_cabeza_html(), que va en el despues de este * archivo). Los valores que aparecen abajo son un respaldo neutro para que, * si el tema no cargara, el sitio se vea sobrio en vez de roto. Cambiar de * cliente NO es tocar este archivo: es cambiar TEMA_ACTIVO en config.php. * * Los colores de estado (aprobado, en curso, no aprobado, error) si son de * aca y NO cambian con la marca: un aprobado tiene que verse aprobado en * todos los clientes. */ :root { color-scheme: light; /* --- Respaldo de marca (lo pisa el tema; ver comentario de arriba) --- */ --color-primario: #28486B; --color-primario-fuerte: #1B3450; --color-primario-suave: #ECF1F7; --color-primario-borde: #C3D1E1; --color-acento: #C9A227; --color-acento-fuerte: #8A6D0B; --color-acento-suave: #FAF4E2; --color-acento-borde: #E7D28E; /* --- Neutros --- */ --color-fondo: #F4F6F9; --color-superficie: #FFFFFF; --color-superficie-alt: #FAFBFC; --color-borde: #DEE4EB; --color-borde-fuerte: #C2CCD8; --color-texto: #16202C; --color-texto-suave: #5A6675; /* --- Estado: fijos, no dependen de la marca --- */ --color-exito: #1B7A46; --color-exito-suave: #E7F5ED; --color-exito-borde: #A9DCC0; --color-espera: #8A5300; --color-espera-suave: #FDF3E3; --color-espera-borde: #EFD3A2; --color-info: #0B5FA5; --color-info-suave: #E7F1FA; --color-info-borde: #B7D4EC; --color-peligro: #B3261E; --color-peligro-suave: #FCEBEA; --color-peligro-borde: #EFB9B5; /* --- Forma --- */ --radio: 12px; --radio-chico: 8px; --sombra: 0 1px 2px rgba(16, 24, 32, .05), 0 2px 10px rgba(16, 24, 32, .04); --sombra-alta: 0 2px 6px rgba(16, 24, 32, .07), 0 12px 28px rgba(16, 24, 32, .07); /* --- Tipografia --- */ --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fuente-titulo: Georgia, "Times New Roman", Times, serif; --fuente-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; /* --- Ancho de lectura --- */ --ancho: 1080px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* * Columna vertical para que el pie quede pegado abajo cuando la pantalla tiene * poco contenido (por ejemplo "Mis cursos" con un solo curso), en vez de * quedar flotando a media pagina con fondo gris debajo. * * Se excluye el diploma a proposito: esa pagina tiene su propio armado de * hoja de 11x8.5 pulgadas calibrado para imprimir, y no se le cambia el * modelo de caja al (ver assets/css/diploma.css). */ body:not(.pagina-diploma) { display: flex; flex-direction: column; } /* width:100% no sobra: en un contenedor flex, un margen automatico (el `margin: 0 auto` que centra el contenedor) anula el estirado, y sin esto el main se encoge al ancho de su contenido. */ body:not(.pagina-diploma) > main { flex: 1 0 auto; width: 100%; } body:not(.pagina-diploma) > .pie-sitio { flex-shrink: 0; } body { margin: 0; min-height: 100vh; background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente); font-size: 16px; line-height: 1.55; /* Quita el retardo de 300ms del toque en telefono. */ touch-action: manipulation; -webkit-tap-highlight-color: rgba(7, 110, 211, .15); } a { color: var(--color-primario-fuerte); text-underline-offset: 2px; } a:hover { color: var(--color-primario); } img { max-width: 100%; } /* Un solo anillo de foco para todo el sitio, siempre visible. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; border-radius: 4px; } /* Salto al contenido: primer elemento enfocable de cada pantalla. */ .salto-contenido { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-superficie); color: var(--color-primario-fuerte); padding: .75rem 1.1rem; border-radius: 0 0 var(--radio-chico) 0; font-weight: 700; text-decoration: none; } .salto-contenido:focus { left: 0; } /* ------------------------------------------------------------------ */ /* Tipografia */ /* ------------------------------------------------------------------ */ h1, h2, h3 { text-wrap: balance; line-height: 1.25; } h1 { font-size: 1.65rem; letter-spacing: -.01em; margin: 0 0 .4rem; } h2 { font-size: 1.15rem; margin: 0 0 .9rem; } h3 { font-size: .98rem; margin: 0 0 .5rem; } p.subtitulo { color: var(--color-texto-suave); margin: 0 0 1.75rem; max-width: 62ch; } .antetitulo { margin: 0 0 .4rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-acento-fuerte); } .vacio { color: var(--color-texto-suave); padding: 1.25rem 0; margin: 0; } /* ------------------------------------------------------------------ */ /* Barra superior */ /* ------------------------------------------------------------------ */ .barra-superior { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; padding: .8rem 1.25rem; padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); background: var(--color-superficie); /* Filete de acento: es lo unico decorativo de la barra y es donde el color clarito de la marca (un verde lima, un dorado) se puede usar entero, sin tener que llevar texto encima. */ border-top: 4px solid var(--color-acento); border-bottom: 1px solid var(--color-borde); position: relative; } .barra-superior .marca { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-texto); margin-right: auto; } .logo-marca { display: block; height: 34px; width: auto; } .marca-texto { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; } .marca-sufijo { margin-left: .6rem; padding-left: .6rem; border-left: 1px solid var(--color-borde); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-texto-suave); white-space: nowrap; } .barra-superior nav { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; } .barra-superior nav a { text-decoration: none; color: var(--color-texto-suave); font-weight: 600; font-size: .92rem; padding: .5rem .7rem; border-radius: var(--radio-chico); white-space: nowrap; } .barra-superior nav a:hover { color: var(--color-texto); background: var(--color-fondo); } .barra-superior nav a.activo { color: var(--color-primario-fuerte); background: var(--color-primario-suave); } .usuario-sesion { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--color-texto-suave); } .usuario-sesion .nombre-sesion { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 640px) { .barra-superior { gap: .6rem 1rem; } .logo-marca { height: 26px; } .barra-superior nav { order: 3; width: 100%; gap: .15rem; overflow-x: auto; /* La barra de desplazamiento del menu no debe arrastrar la pagina. */ overscroll-behavior-x: contain; } .barra-superior nav a { padding: .45rem .55rem; font-size: .88rem; } .usuario-sesion .nombre-sesion { display: none; } /* En telefono el logo ya ocupa casi todo el ancho: el "Administracion" al lado empujaba el boton Salir a una linea propia. Se saca, que para eso esta el filete azul de la barra y el titulo de cada pantalla. */ .marca-sufijo { display: none; } } /* ------------------------------------------------------------------ */ /* Contenedores */ /* ------------------------------------------------------------------ */ main.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 2rem 1.25rem 4rem; padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); } main.contenedor-angosto { max-width: 720px; } .migas { margin: 0 0 1rem; font-size: .9rem; } .migas a { font-weight: 600; text-decoration: none; } .migas a:hover { text-decoration: underline; } .encabezado-pagina { margin-bottom: 1.75rem; } .encabezado-pagina .subtitulo { margin-bottom: 0; } /* Titulo a la izquierda + accion a la derecha, apilados en telefono. */ .fila-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .fila-titulo > div { min-width: 0; } /* ------------------------------------------------------------------ */ /* Tarjetas */ /* ------------------------------------------------------------------ */ .tarjeta { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.4rem 1.5rem; margin-bottom: 1.5rem; } .tarjeta > :last-child { margin-bottom: 0; } .tarjeta-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; } .tarjeta-titulo h2 { margin: 0; } .conteo { font-size: .85rem; font-weight: 600; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .tarjeta { padding: 1.15rem 1.1rem; } } /* ------------------------------------------------------------------ */ /* Tarjetas de resumen (numeros del panel) */ /* ------------------------------------------------------------------ */ .grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .tarjeta-resumen { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.15rem 1.3rem; /* Franja de acento a la izquierda: da color sin poner texto sobre el. */ border-left: 4px solid var(--color-acento); } .tarjeta-resumen .numero { font-size: 2.1rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tarjeta-resumen .etiqueta { margin-top: .2rem; color: var(--color-texto-suave); font-size: .85rem; font-weight: 600; } /* ------------------------------------------------------------------ */ /* Formularios */ /* ------------------------------------------------------------------ */ form.formulario { display: grid; gap: 1.1rem; } .fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; } label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; } input[type="text"], input[type="email"], input[type="date"], input[type="number"], input[type="password"], select, textarea { width: 100%; /* 16px reales: con menos, iOS hace zoom solo al enfocar el campo. */ font-size: 1rem; font-family: inherit; padding: .65rem .8rem; min-height: 44px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-chico); background: var(--color-superficie); color: var(--color-texto); } input::placeholder, textarea::placeholder { color: #8A94A2; } input:hover, select:hover, textarea:hover { border-color: var(--color-primario); } select { /* Windows en modo oscuro pinta los