/* MyLine — sistema visual. * * La marca es Avianca Cargo: rojo Avianca (#DA291C) sobre blanco, con grises * neutros. El rojo vive SOLO en el armazón —la barra superior, el botón * principal, la pestaña activa— y como relleno macizo, nunca como texto dentro * de los datos. Esa separación es deliberada: dentro de la tabla el rojo * significa "no voló", y si la marca también fuera roja ahí, el color dejaría * de decir nada. * * Tres principios, y de ellos sale todo lo demás: * * 1. LA HORA MANDA. Esta pantalla existe para que un piloto lea una hora y una * ruta, muchas veces desde un celular y con prisa. Las horas van grandes, * con cifras de ancho fijo; las etiquetas, pequeñas y calladas. Nunca * compiten. * * 2. EL COLOR SIGNIFICA. Verde, ámbar y rojo solo dicen si algo salió a * tiempo, se desvió o se cayó. El violeta solo dice deadhead. Un color * decorativo le roba fuerza al que sí informa. * * 3. EL AIRE SEPARA, NO LAS LÍNEAS. Bordes mínimos, sombras suaves, espacio * generoso. Una tabla llena de rayas se lee peor que una con silencio. */ /* ======================================================================== TOKENS ======================================================================== */ /* El atributo `hidden` gana SIEMPRE. * * `hidden` esconde por la hoja del navegador, que tiene la prioridad más baja * que existe: basta con que el elemento tenga su propio `display` —y aquí hay * varios que lo tienen, `.banda-ausencia` entre ellos— para que se niegue a * esconderse. Entonces el filtro de mes ponía el atributo, el bloque seguía a * la vista, y elegir septiembre enseñaba agosto igualmente. * * Lleva `!important` a propósito: `hidden` no es decoración, es una afirmación * sobre si algo existe para el lector, y no puede perder contra una regla de * maquetación escrita meses antes en otro sitio. */ [hidden] { display: none !important; } :root { color-scheme: light; /* --- Marca: Avianca Cargo ------------------------------------------- */ --marca: #da291c; /* rojo Avianca */ --marca-fuerte: #a81d13; --marca-suave: #fdeceb; --marca-contra: #ffffff; --acento: #da291c; --grafito: #1c1c1c; /* el gris oscuro que acompaña al rojo */ /* Fondo de la columna de matrículas y de la banda de día del tablero. Lleva texto blanco encima, así que es oscuro en los DOS temas: un token que se invierte dejaría blanco sobre blanco. */ --tablero-oscuro: #1c2431; /* --- Superficies. Tres niveles: página, tarjeta, y lo que se eleva sobre ella. Más de tres y se pierde la jerarquía. ---------------- */ --fondo: #f5f7fa; --fondo-degrade: radial-gradient(1100px 520px at 12% -12%, #fbeeed 0%, transparent 62%), radial-gradient(900px 460px at 108% 0%, #f0f2f4 0%, transparent 55%); --superficie: #ffffff; --superficie-alta:#ffffff; --velo: rgba(255, 255, 255, .78); /* --- Texto ----------------------------------------------------------- */ --tinta: #0d1117; --tinta-media: #4a5259; --tinta-suave: #868f98; /* --- Trazos ---------------------------------------------------------- */ --borde: rgba(13, 17, 23, .08); --borde-fuerte: rgba(13, 17, 23, .15); --lavado: rgba(13, 17, 23, .03); /* --- Estado de un tramo. La única familia de color con significado --- El "cancelado" es un granate apagado, no el rojo de la marca: puestos uno al lado del otro tienen que distinguirse, porque uno es identidad y el otro es información. */ --en-hora: #0f7a45; --desviado: #b3730a; --cancelado: #8c1d18; --adicional: #1c6fd6; --deadhead: #6d47c4; --en-hora-velo: rgba(15, 122, 69, .10); --desviado-velo: rgba(179, 115, 10, .12); --cancelado-velo: rgba(192, 57, 47, .10); --adicional-velo: rgba(28, 111, 214, .10); --deadhead-velo: rgba(109, 71, 196, .10); /* --- Medidas --------------------------------------------------------- */ --radio: 14px; --radio-menudo: 8px; --sombra: 0 1px 2px rgba(13, 17, 23, .05), 0 8px 24px rgba(13, 17, 23, .05); --sombra-alta: 0 2px 6px rgba(13, 17, 23, .08), 0 18px 48px rgba(13, 17, 23, .10); --ancho: 1180px; } :root[data-theme="dark"], :root:not([data-theme="light"]) { /* Nada aquí todavía: el bloque real va en la consulta de más abajo, para que el tema del sistema no gane cuando el usuario eligió a mano. */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --marca: #e8453a; --marca-fuerte: #c22a1e; --marca-suave: #351816; --acento: #e8453a; --grafito: #e6ebf2; --tablero-oscuro: #0f1520; --fondo: #0c1017; --fondo-degrade: radial-gradient(1100px 520px at 12% -12%, #241413 0%, transparent 62%), radial-gradient(900px 460px at 108% 0%, #16181c 0%, transparent 55%); --superficie: #141a24; --superficie-alta:#1a212d; --velo: rgba(20, 26, 36, .78); --tinta: #e6ebf2; --tinta-media: #a3adba; --tinta-suave: #6f7987; --borde: rgba(230, 235, 242, .10); --borde-fuerte: rgba(230, 235, 242, .20); --lavado: rgba(230, 235, 242, .04); --en-hora: #4ec98a; --desviado: #e5aa42; --cancelado: #d98077; --adicional: #6aa8f5; --deadhead: #a98bec; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .45); } } :root[data-theme="dark"] { color-scheme: dark; --marca: #e8453a; --marca-fuerte: #c22a1e; --marca-suave: #351816; --acento: #e8453a; --grafito: #e6ebf2; --tablero-oscuro: #0f1520; --fondo: #0c1017; --fondo-degrade: radial-gradient(1100px 520px at 12% -12%, #241413 0%, transparent 62%), radial-gradient(900px 460px at 108% 0%, #16181c 0%, transparent 55%); --superficie: #141a24; --superficie-alta:#1a212d; --velo: rgba(20, 26, 36, .78); --tinta: #e6ebf2; --tinta-media: #a3adba; --tinta-suave: #6f7987; --borde: rgba(230, 235, 242, .10); --borde-fuerte: rgba(230, 235, 242, .20); --lavado: rgba(230, 235, 242, .04); --en-hora: #4ec98a; --desviado: #e5aa42; --cancelado: #d98077; --adicional: #6aa8f5; --deadhead: #a98bec; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .45); } /* ======================================================================== BASE ======================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fondo); background-image: var(--fondo-degrade); background-attachment: fixed; color: var(--tinta); font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-text-size-adjust: 100%; } h1 { font-size: 1.55rem; margin: 0 0 .2rem; letter-spacing: -.015em; } h2 { font-size: 1.15rem; margin: 2rem 0 .7rem; letter-spacing: -.01em; } h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; } p { margin: .35rem 0; } a { color: inherit; } a:not(.boton):not(.logotipo):not(.tramo) { text-decoration-color: var(--borde-fuerte); } /* Las horas, las matrículas y los códigos van con cifras de ancho fijo: si no, una columna de horas baila y deja de leerse como columna. */ .horas, .franja, .cifra-celda, .matricula, .sigla, .numero-vuelo, .par, .duracion, td.desviado, .numeraco, .cifra b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 1.6rem 1.1rem 3rem; flex: 1; } .contenedor.sin-barra { display: flex; align-items: center; } .apunte { color: var(--tinta-media); } .apunte.menudo, .menudo { font-size: .82rem; } .rotulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-suave); font-weight: 700; margin: 1.8rem 0 .6rem; } .rotulo-campo { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); font-weight: 700; } .titular { font-size: 1.1rem; font-weight: 600; } .migas { margin: 0 0 1rem; font-size: .88rem; } /* ======================================================================== BARRA Y PIE ======================================================================== */ /* La barra va en rojo macizo, no en velo translúcido: es lo único que lleva el color de la marca, y así queda claro de un vistazo que el rojo de aquí arriba es identidad y el de abajo, dentro de los datos, es información. */ .barra-marca { /* Muy por encima de cualquier cosa del contenido: es lo único que debe quedar siempre visible al desplazar. */ position: sticky; top: 0; z-index: 100; background: var(--marca); color: var(--marca-contra); border-bottom: 1px solid rgba(0, 0, 0, .18); box-shadow: 0 1px 8px rgba(0, 0, 0, .12); } .barra-marca .interior { max-width: var(--ancho); margin: 0 auto; padding: .5rem 1.1rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; } .logotipo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; text-decoration: none; letter-spacing: -.02em; } .logotipo .simbolo { width: 26px; height: 26px; border-radius: 7px; } .logotipo .liviano { font-weight: 300; opacity: .78; } .logotipo { color: var(--marca-contra); } .menu { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; } .menu a { padding: .35rem .7rem; border-radius: 999px; text-decoration: none; color: rgba(255, 255, 255, .84); font-size: .9rem; white-space: nowrap; } .menu a:hover { background: rgba(255, 255, 255, .16); color: #fff; } /* La pestaña activa se invierte: blanco sobre rojo no destaca lo suficiente cuando todo el fondo ya es rojo. */ .menu a.activo { background: var(--marca-contra); color: var(--marca); font-weight: 700; } .identidad { display: flex; align-items: center; gap: .4rem; } .identidad form { margin: 0; } .quien { display: flex; align-items: center; gap: .35rem; text-decoration: none; padding: .25rem .55rem; border-radius: 999px; } .quien { color: var(--marca-contra); } .quien:hover { background: rgba(255, 255, 255, .16); } .quien .codigo { font-weight: 700; letter-spacing: .04em; } .etiqueta-rol { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; background: rgba(255, 255, 255, .22); color: var(--marca-contra); padding: .08rem .35rem; border-radius: 4px; font-weight: 700; } .barra-marca button.suave { background: rgba(255, 255, 255, .12); color: var(--marca-contra); border-color: rgba(255, 255, 255, .3); } .barra-marca button.suave:hover { background: rgba(255, 255, 255, .24); } .barra-marca a:focus-visible, .barra-marca button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .pie-marca { border-top: 1px solid var(--borde); padding: 1rem 1.1rem; text-align: center; color: var(--tinta-suave); font-size: .8rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; } .pie-marca .separador { opacity: .5; } /* ======================================================================== CONTROLES ======================================================================== */ button, .boton { font: inherit; cursor: pointer; border-radius: var(--radio-menudo); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta); padding: .45rem .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } button:hover, .boton:hover { background: var(--lavado); } button:disabled { opacity: .45; cursor: not-allowed; } button.principal, .boton.principal { background: var(--marca); color: var(--marca-contra); border-color: var(--marca); font-weight: 600; } button.principal:hover { background: var(--marca-fuerte); } button.suave { background: transparent; } button.menudo, .boton.menudo { padding: .25rem .55rem; font-size: .82rem; } button.peligro { color: var(--cancelado); border-color: var(--cancelado-velo); } .ancho { width: 100%; justify-content: center; margin-top: .6rem; } input, select, textarea { font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-menudo); padding: .45rem .6rem; width: 100%; } input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .codigo-entrada { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: 1.1rem; } label { font-size: .85rem; font-weight: 600; color: var(--tinta-media); } .casilla { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; white-space: nowrap; } .casilla input { width: auto; } .formulario { display: flex; flex-direction: column; gap: .3rem; text-align: left; } .formulario label { margin-top: .7rem; } .filtros { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 .7rem; } .filtros input[type="search"] { flex: 1; min-width: 220px; } .filtros select { width: auto; } .selectores { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin: 1rem 0; } .selectores label { display: flex; flex-direction: column; gap: .2rem; } .aviso { border-radius: var(--radio-menudo); padding: .6rem .8rem; background: var(--marca-suave); color: var(--tinta); border: 1px solid var(--borde); margin: .8rem 0; font-size: .9rem; } .aviso.malo { background: var(--cancelado-velo); border-color: var(--cancelado); color: var(--cancelado); } .aviso.ojo { background: var(--desviado-velo); border-color: var(--desviado); } .aviso.bien { background: var(--en-hora-velo); border-color: var(--en-hora); } /* ======================================================================== PIEZAS COMUNES ======================================================================== */ .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.2rem; margin-bottom: 1.2rem; } .vacio { text-align: center; color: var(--tinta-media); padding: 2rem 1rem; } .vacio.grande { padding: 4rem 1rem; } .numeraco { font-size: 3.5rem; font-weight: 800; margin: 0; color: var(--tinta-suave); } .cifras { display: flex; gap: 1.4rem; flex-wrap: wrap; } .cifra { display: flex; flex-direction: column; } .cifra b { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } .cifra span { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); font-weight: 600; } .cifra.malo b { color: var(--cancelado); } .cifras.grandes .cifra b { font-size: 2rem; } .marca { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: .1rem .4rem; border-radius: 4px; background: var(--lavado); color: var(--tinta-media); white-space: nowrap; } .marca.dh { background: var(--deadhead-velo); color: var(--deadhead); } .marca.cancelado { background: var(--cancelado-velo); color: var(--cancelado); } .marca.vigente { background: var(--en-hora-velo); color: var(--en-hora); } .marca.temporal { background: var(--desviado-velo); color: var(--desviado); } /* Grafito y no el rojo de la marca: dentro de los datos el rojo significa "no voló", y gastarlo en un "usted" le quita fuerza donde sí hace falta. */ .marca.yo { background: var(--lavado); color: var(--tinta-media); } .marca.tipo-plan { background: var(--adicional-velo); color: var(--adicional); } .marca.tipo-ejecutado { background: var(--en-hora-velo); color: var(--en-hora); } .sigla { font-weight: 700; letter-spacing: .05em; } .sigla.grande { font-size: 1rem; } .flechita { color: var(--tinta-suave); } .pestanas { display: flex; gap: .2rem; border-bottom: 1px solid var(--borde); margin: 1.4rem 0 0; flex-wrap: wrap; } .pestana { border: none; background: transparent; border-radius: 0; border-bottom: 2px solid transparent; color: var(--tinta-media); padding: .5rem .9rem; } .pestana.activa { border-bottom-color: var(--marca); color: var(--tinta); font-weight: 600; } .panel { padding-top: .4rem; } .desplazable { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ======================================================================== TABLAS ======================================================================== */ .tabla { width: 100%; border-collapse: collapse; font-size: .9rem; } .tabla.menuda { font-size: .82rem; } .tabla th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); font-weight: 700; padding: .5rem .6rem; border-bottom: 1px solid var(--borde-fuerte); white-space: nowrap; position: sticky; top: 0; background: var(--fondo); } .tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: top; } .tabla tbody tr:hover { background: var(--lavado); } .tabla tr.vigente { background: var(--en-hora-velo); } .tabla tr.malo td { color: var(--cancelado); } .tabla td.vacio, .tabla .vacio { text-align: center; color: var(--tinta-suave); } .tabla .estrecha { width: 2rem; } .acciones-celda { white-space: nowrap; text-align: right; } .tabla.comparativa th { position: static; background: transparent; } /* ======================================================================== ACCESO ======================================================================== */ .portada { width: 100%; display: flex; justify-content: center; } .tarjeta-acceso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); padding: 2rem 1.8rem; width: 100%; max-width: 420px; text-align: center; } .tarjeta-acceso h1 { font-size: 1.8rem; letter-spacing: -.02em; } .tarjeta-acceso h1 .liviano { font-weight: 300; color: var(--tinta-media); } .marca-grande { width: 52px; height: 52px; border-radius: 14px; margin-bottom: .5rem; } .pie-acceso { margin-top: 1.4rem; font-size: .8rem; color: var(--tinta-suave); line-height: 1.5; } /* ======================================================================== MI LÍNEA ======================================================================== */ .cabecera-linea { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; } .origen-datos { font-size: .78rem; color: var(--tinta-suave); margin: .9rem 0 0; } .jornada { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: .9rem; overflow: hidden; } .jornada.destacada { border-color: var(--marca); box-shadow: var(--sombra-alta); } .jornada.cancelada { opacity: .6; } .jornada > header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; background: var(--lavado); border-bottom: 1px solid var(--borde); } .jornada > header .derecha { text-align: right; } .jornada .dia { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-suave); font-weight: 700; margin: 0; } .jornada .ruta { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; margin: .1rem 0 0; } .jornada .franja { font-size: 1.15rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; } /* Un tramo: hora | vuelo y ruta | matrícula y marcas | compañeros. En pantalla ancha es una rejilla de tres columnas; en celular se apila. */ .tramo { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .3rem 1rem; align-items: center; padding: .7rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--borde); } .tramo:last-child { border-bottom: none; } .tramo:hover { background: var(--lavado); } .tramo.cancelado { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--tinta-suave); } .tramo.dh { background: var(--deadhead-velo); } .tramo .horas { font-size: 1.05rem; display: flex; gap: .3rem; align-items: baseline; } .tramo .identificacion { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; } .numero-vuelo { font-weight: 700; } .par { color: var(--tinta-media); letter-spacing: .04em; } .par .guion { color: var(--tinta-suave); margin: 0 .1rem; } .tramo .apostillas { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .matricula { font-weight: 600; letter-spacing: .03em; } .duracion { color: var(--tinta-suave); font-size: .85rem; } .companeros { grid-column: 1 / -1; display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .1rem; } .companero { display: inline-flex; gap: .3rem; align-items: baseline; font-size: .78rem; background: var(--lavado); padding: .12rem .45rem; border-radius: 999px; } .companero .rango { color: var(--tinta-suave); } .companero.es-dh { background: var(--deadhead-velo); color: var(--deadhead); } .jornada.suelta .ruta { font-size: 1.02rem; } .jornada.traslado { border-left: 3px solid var(--adicional); } .jornada.entrenamiento { border-left: 3px solid var(--desviado); } /* Los días que vienen del roster y no de la programación diaria. Rellenan el hueco donde el JSON todavía no llega, y por eso van con el borde punteado y el sello a la vista: son una PROYECCIÓN de hace semanas, y confundirla con un vuelo ya programado es peor que no enseñarla. */ .jornada.roster { border-left: 3px dashed var(--r-otro); background: var(--lavado); } .jornada.roster > header { background: transparent; } .jornada.roster .ruta { font-size: .98rem; } /* Un día de descanso se apaga más: no compite con lo que hay que hacer. */ .jornada.roster.sin-tarea .ruta { color: var(--tinta-media); font-weight: 600; } /* La costura que no cierra. Es un aviso, no un error: el dato sigue siendo el único que hay de ese día, así que se marca y se deja leer. */ .jornada.no-empalma { border-left-color: var(--desviado) !important; } .salto { margin: .2rem 0 0; font-size: .74rem; font-weight: 600; color: var(--desviado); } .salto b { font-variant-numeric: tabular-nums; } /* La marca de que un dato viene del roster. Antes era un sello que ponía «Del roster» a toda letra; ahora es una `R` y punto. El piloto no necesita que se le grite el origen del dato cada vez —le basta con poder distinguirlo si mira— y en una casilla del calendario el sello entero no cabía. Lleva `title`, así que el significado sigue estando para quien lo busque. */ .marca-r { display: inline-flex; align-items: center; justify-content: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .15rem; font-size: .6rem; font-weight: 700; line-height: 1; color: var(--tinta-suave); border: 1px solid var(--borde-fuerte); border-radius: 4px; vertical-align: middle; } .dia .marca-r { min-width: .9rem; height: .9rem; font-size: .52rem; } /* El color del borde lo pone la clase, con las mismas reglas `.clase-*` que «Mi roster», para que las dos pantallas se lean igual. Solo tocan el color, así que el punteado de arriba se mantiene. */ .jornada .notas { padding: .7rem 1rem; margin: 0; color: var(--tinta-media); font-size: .88rem; } /* ======================================================================== FICHA DE UN TRAMO ======================================================================== */ .ficha-vuelo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.3rem; } .ficha-vuelo.cancelado { border-color: var(--cancelado); } .ficha-vuelo > header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--borde); } .ficha-vuelo .derecha { text-align: right; } .ruta.grande { font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; margin: 0; } .matricula.grande { font-size: 1.2rem; } .rejilla-horas { display: flex; gap: 2rem; flex-wrap: wrap; padding: 1rem 0; border-bottom: 1px solid var(--borde); } .rejilla-horas b { font-size: 1.15rem; display: block; } .rejilla-horas.menuda b { font-size: 1rem; } .bloque { padding: 1rem 0; border-bottom: 1px solid var(--borde); } .bloque:last-child { border-bottom: none; padding-bottom: 0; } .lista-tripulacion { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .lista-tripulacion li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .35rem .5rem; border-radius: var(--radio-menudo); } .lista-tripulacion li.yo { background: var(--lavado); font-weight: 600; box-shadow: inset 3px 0 0 var(--marca); } .lista-tripulacion li.es-dh { background: var(--deadhead-velo); } .lista-tripulacion .nombre { flex: 1; min-width: 10rem; } .lista-tripulacion .rango { color: var(--tinta-suave); font-size: .85rem; } .banderas { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; } .banderas li { font-size: .8rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--borde-fuerte); color: var(--tinta-suave); } .banderas li.si { background: var(--en-hora-velo); color: var(--en-hora); border-color: transparent; font-weight: 600; } .banderas li.si::before { content: "✓ "; } .comparado.desviado { border-left: 3px solid var(--desviado); padding-left: .8rem; } .comparado.cancelado { border-left: 3px solid var(--cancelado); padding-left: .8rem; } /* Estados, allí donde se pinten */ .en_hora, td.en_hora, .estado-en_hora { color: var(--en-hora); font-weight: 600; } .desviado, td.desviado, .estado-desviado { color: var(--desviado); font-weight: 600; } .cancelado.texto, td.cancelado, .estado-cancelado { color: var(--cancelado); font-weight: 600; } .adicional, td.adicional, .estado-adicional { color: var(--adicional); font-weight: 600; } /* ======================================================================== CARGA ======================================================================== */ .zona-archivo { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2.2rem 1rem; border: 2px dashed var(--borde-fuerte); border-radius: var(--radio); cursor: pointer; text-align: center; color: var(--tinta-media); font-weight: 400; } .zona-archivo:hover, .zona-archivo.encima { border-color: var(--marca); background: var(--marca-suave); } .zona-archivo .icono { font-size: 1.6rem; color: var(--marca); } .zona-archivo .nombre-archivo { font-weight: 600; color: var(--tinta); } .formulario-confirmar fieldset { border: 1px solid var(--borde); border-radius: var(--radio-menudo); padding: .8rem 1rem; margin: 1rem 0; } .formulario-confirmar legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); font-weight: 700; padding: 0 .3rem; } .opcion { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; font-weight: 400; cursor: pointer; } .opcion input { width: auto; margin-top: .25rem; } .acciones { display: flex; gap: .6rem; flex-wrap: wrap; } .titulo-archivo { font-size: 1.05rem; } .lista-avisos { margin: .8rem 0; padding-left: 1.1rem; } .lista-avisos li { margin: .25rem 0; } .claves .cabecera-claves { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .claves { border-color: var(--desviado); background: var(--desviado-velo); } .claves .rotulo { margin: 0; color: var(--desviado); } .clave-texto { font-family: "Consolas", "SF Mono", ui-monospace, monospace; font-size: 1rem; letter-spacing: .06em; user-select: all; } /* ======================================================================== GANTT ======================================================================== */ .marco-gantt { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); } .gantt { min-width: 900px; position: relative; } .gantt-encabezado { display: flex; position: sticky; top: 0; z-index: 3; background: var(--superficie); border-bottom: 1px solid var(--borde-fuerte); } .gantt-fila { display: flex; border-bottom: 1px solid var(--borde); } .gantt-fila:last-child { border-bottom: none; } .gantt-etiqueta { width: 110px; flex: none; padding: .5rem .7rem; font-weight: 700; font-size: .85rem; letter-spacing: .03em; position: sticky; left: 0; z-index: 2; background: var(--superficie); border-right: 1px solid var(--borde-fuerte); } .gantt-encabezado .gantt-etiqueta { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); } .gantt-pista { position: relative; flex: 1; height: 40px; } .gantt-encabezado .gantt-pista { height: 30px; } .gantt-hora { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--borde); font-size: .68rem; color: var(--tinta-suave); padding-left: .2rem; white-space: nowrap; } .gantt-hora.dia { border-left-color: var(--borde-fuerte); font-weight: 700; color: var(--tinta-media); } .gantt-rejilla { position: absolute; inset: 0; pointer-events: none; } .gantt-barra { position: absolute; top: 6px; height: 28px; border-radius: 6px; background: var(--marca); color: var(--marca-contra); font-size: .72rem; line-height: 28px; padding: 0 .35rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid rgba(0, 0, 0, .12); cursor: default; } .gantt-barra.manto { background: repeating-linear-gradient(45deg, var(--tinta-suave), var(--tinta-suave) 5px, var(--borde-fuerte) 5px, var(--borde-fuerte) 10px); color: var(--tinta); } .gantt-barra.cancelado { opacity: .45; text-decoration: line-through; } .gantt-barra.apagada { opacity: .22; } .gantt-barra.resaltada { outline: 2px solid var(--acento); outline-offset: 1px; z-index: 2; } .leyenda { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--tinta-suave); flex-wrap: wrap; } .muestra { width: 14px; height: 10px; border-radius: 3px; display: inline-block; } .muestra.vuelo { background: var(--marca); } .muestra.manto { background: var(--tinta-suave); } .muestra.cancelado { background: var(--marca); opacity: .4; } /* ======================================================================== PROSA (ayuda) ======================================================================== */ .prosa { max-width: 62ch; line-height: 1.65; } .prosa h2 { margin-top: 0; } .prosa h2 + h3 { margin-top: 1rem; } .prosa ul { padding-left: 1.2rem; } .prosa li { margin: .4rem 0; } /* ======================================================================== CELULAR ======================================================================== El piloto abre esto en el teléfono, camino al aeropuerto. Por debajo de 720 px la barra se compacta, el tramo se apila en dos filas y las horas siguen siendo lo más grande de la pantalla. */ @media (max-width: 720px) { .contenedor { padding: 1rem .75rem 2.5rem; } .barra-marca .interior { gap: .5rem; padding: .45rem .75rem; } /* `flex: 1` de la regla base es `1 1 0%`: la base 0 gana sobre cualquier `width`, y el menú se quedaba en la misma fila, cortado. Hay que mover la base del flex, no el ancho. */ .menu { order: 3; flex: 1 0 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; scrollbar-width: none; } .menu::-webkit-scrollbar { display: none; } .menu a { font-size: .85rem; padding: .3rem .6rem; } .identidad { margin-left: auto; } h1 { font-size: 1.3rem; } .cabecera-linea { gap: .8rem; } .cifras { gap: 1rem; } .cifra b { font-size: 1.25rem; } .tramo { grid-template-columns: 1fr auto; gap: .25rem .6rem; } .tramo .horas { grid-column: 1; font-size: 1.1rem; } .tramo .identificacion { grid-column: 1; } .tramo .apostillas { grid-column: 2; grid-row: 1 / 3; align-items: flex-end; flex-direction: column; justify-content: center; gap: .2rem; } .jornada > header { padding: .7rem .8rem; } .jornada .ruta { font-size: 1.05rem; } .rejilla-horas { gap: 1.2rem; } .ficha-vuelo { padding: 1rem; } .tarjeta { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media print { .barra-marca, .pie-marca, .filtros, .pestanas, .acciones { display: none; } body { background: #fff; } .jornada, .tarjeta, .ficha-vuelo { box-shadow: none; break-inside: avoid; } } /* La marca de cumplimiento sobre un tramo de la línea. Hereda el color del estado, que ya está definido arriba, y solo le pone el fondo al tono. */ .marca.estado-desviado { background: var(--desviado-velo); color: var(--desviado); } .marca.estado-cancelado { background: var(--cancelado-velo); color: var(--cancelado); } .marca.estado-adicional { background: var(--adicional-velo); color: var(--adicional); } .marca.estado-en_hora { background: var(--en-hora-velo); color: var(--en-hora); } /* ======================================================================== HORA ZULU Y ESTADOS DE LA LÍNEA ======================================================================== Cada hora se muestra dos veces. La de Colombia manda —es la que trae la programación de la oficina— y la Zulu va al lado, más pequeña y apagada: presente para quien la necesita, callada para quien no. */ .zulu { font-size: .74rem; color: var(--tinta-suave); font-weight: 400; letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; } /* `.horas` es un contenedor flex, y ahí un `display: block` NO salta de línea: el hijo se convierte en otro elemento de la fila y la hora Zulu acababa encima del número de vuelo. Lo que salta de línea en flex es una base del 100 % con el contenedor autorizado a envolver. */ .tramo .horas { flex-wrap: wrap; } .tramo .horas .zulu { flex: 1 0 100%; margin-top: -.15rem; } .jornada > header .zulu { margin: 0; } .antes { font-size: .76rem; color: var(--desviado); font-variant-numeric: tabular-nums; white-space: nowrap; } .antes::before { content: "· "; color: var(--tinta-suave); } .marca.estado-desviado, .marca.estado-reprogramado { background: var(--desviado-velo); color: var(--desviado); } .marca.estado-cancelado { background: var(--cancelado-velo); color: var(--cancelado); } .marca.estado-adicional { background: var(--adicional-velo); color: var(--adicional); } .marca.estado-en_hora { background: var(--en-hora-velo); color: var(--en-hora); } .rotulo .apunte { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .4rem; } .aclaracion { margin: -.3rem 0 .8rem; } .origen-datos strong { color: var(--tinta); } /* La sección de historia se separa con una línea: al desplazar hacia abajo hay que notar que se cruzó de "lo que viene" a "lo que pasó", porque las horas de una y otra significan cosas distintas. */ .rotulo + .aclaracion { color: var(--tinta-suave); } @media (max-width: 720px) { .tramo .horas .zulu { flex: 1 0 100%; margin-top: -.1rem; } .jornada > header .zulu { font-size: .7rem; } } .rejilla-horas .zulu { display: block; margin-top: -.15rem; } /* ======================================================================== OPERACIÓN ======================================================================== */ /* La franja de "lo suyo": el piloto entra a ver la operación, pero si su propio vuelo sale en dos horas eso no puede quedar a un clic de distancia. */ .franja-propia { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; padding: .7rem 1rem; margin-bottom: 1.2rem; text-decoration: none; border: 1px solid var(--borde); border-left: 4px solid var(--marca); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); } .franja-propia:hover { background: var(--lavado); } .franja-propia b { font-size: 1.05rem; } .horas-propias { font-variant-numeric: tabular-nums; font-weight: 600; } .franja-propia .ir { margin-left: auto; color: var(--marca); font-weight: 600; font-size: .85rem; white-space: nowrap; } .dia-selector { display: flex; flex-direction: column; gap: .2rem; } .dia-selector input { width: auto; } .cifras.tablero { gap: 1.8rem; margin-top: .3rem; } .flota { display: grid; gap: .7rem; margin-bottom: .5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .avion { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem .9rem; border-left: 4px solid var(--borde-fuerte); display: flex; flex-direction: column; gap: .1rem; } .avion.en_ruta { border-left-color: var(--adicional); } .avion.en_tierra { border-left-color: var(--desviado); } .avion.terminado { border-left-color: var(--en-hora); opacity: .72; } .avion.sin_datos { border-left-color: var(--tinta-suave); opacity: .6; } .avion .situacion { font-size: .88rem; color: var(--tinta-media); } .marca.op-en_ruta { background: var(--adicional-velo); color: var(--adicional); } .marca.op-aterrizo { background: var(--en-hora-velo); color: var(--en-hora); } .marca.op-por_salir { background: var(--lavado); color: var(--tinta-media); } .marca.op-cancelado { background: var(--cancelado-velo); color: var(--cancelado); } .marca.op-sin_reporte { background: var(--desviado-velo); color: var(--desviado); } .tabla .zulu { display: block; } /* ======================================================================== MESES ======================================================================== */ .mes { margin-bottom: 1.4rem; } .cabecera-mes { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 1.2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--borde-fuerte); } .nombre-mes { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; } .cabecera-mes .apunte { margin-left: auto; } .marca.estado-sin_confirmar { background: var(--desviado-velo); color: var(--desviado); } @media (max-width: 720px) { .cabecera-mes .apunte { margin-left: 0; width: 100%; } .franja-propia .ir { margin-left: 0; } .cifras.tablero { gap: 1rem; } } /* Los calzos que reportó la tripulación. Es el único dato duro del archivo, y va junto a la hora programada para que la diferencia se lea sin restar. */ .reportado { flex: 1 0 100%; font-size: .74rem; font-weight: 600; color: var(--en-hora); font-variant-numeric: tabular-nums; margin-top: -.1rem; } .marca.estado-volo { background: var(--en-hora-velo); color: var(--en-hora); } .cifras.tablero + .aclaracion { margin: .9rem 0 0; max-width: 78ch; line-height: 1.5; padding-top: .7rem; border-top: 1px solid var(--borde); } /* ======================================================================== GANTT OPERATIVO ======================================================================== La estructura sigue la del tablero que ya usa la oficina (programacion.html) para que se lea sin aprender nada nuevo: una fila por matrícula, la etiqueta fija a la izquierda, y las barras posicionadas sobre una pista. La unidad es el CUARTO DE HORA: --pw es su ancho, así que una hora son cuatro y la rejilla de fondo cae justo en cada hora en punto. */ .tablero { /* `position: relative` con un `z-index` propio encierra todo lo de dentro en su propia capa. Sin esto, la etiqueta de matrícula —que es sticky con z-index 20, igual que la barra superior— empataba con ella, y al empatar gana la que va después en el documento: la matrícula se pintaba encima de la barra roja al desplazar. Encerrada aquí, por alta que sea su capa dentro, el conjunto queda por debajo de la barra. */ position: relative; z-index: 0; --pw: 14px; /* ancho de 15 minutos */ --lw: 88px; /* columna de matrículas */ --hh: 52px; /* alto de la cabecera */ --dh: 26px; /* alto de la banda de día */ /* La fila tiene que dar para la barra (100) más el recuadro de tripulación, que crece con cada tripulante. Con cuatro —comandante, copiloto y dos de relevo, que en esta operación es normal— hacen falta 172. */ --rh: 172px; /* alto de una fila */ --bh: 100px; /* alto de la barra */ --ph: 28px; /* franja de progreso dentro de la barra */ overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 1.2rem; } .tablero-interior { display: inline-flex; flex-direction: column; min-width: 100%; } .tablero-fila { display: flex; align-items: stretch; border-bottom: 1px solid var(--borde); } .tablero-fila:last-child { border-bottom: none; } .tablero-etiqueta { width: var(--lw); min-width: var(--lw); flex-shrink: 0; position: sticky; left: 0; z-index: 20; /* Grafito con filo rojo, no rojo macizo: una columna entera del color de la marca compite con las barras, que es donde hay que mirar. */ background: var(--tablero-oscuro); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; letter-spacing: .05em; border-right: 3px solid var(--marca); } .tablero-cabecera .tablero-etiqueta { height: var(--hh); background: var(--lavado); color: var(--tinta-suave); font-size: .68rem; text-transform: uppercase; border-bottom: 2px solid var(--borde-fuerte); } .tablero-eje { position: relative; height: var(--hh); flex-shrink: 0; background: var(--lavado); border-bottom: 2px solid var(--borde-fuerte); } .marca-dia { position: absolute; top: 0; height: var(--dh); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: #fff; background: var(--tablero-oscuro); border-right: 3px solid var(--marca); white-space: nowrap; overflow: hidden; letter-spacing: .04em; text-transform: uppercase; } /* Por DEBAJO de la columna de matrículas, que es fija y va en z-index 20. Sin decirlo, una etiqueta de hora asomaba por detrás de esa columna al desplazar el tablero y se veía un dígito suelto flotando a la izquierda. */ .marca-dia, .marca-hora { z-index: 1; } .marca-hora { position: absolute; top: var(--dh); bottom: 0; display: flex; align-items: center; font-size: .62rem; font-weight: 700; color: var(--tinta-media); padding-left: 3px; border-left: 1px solid var(--borde); white-space: nowrap; pointer-events: none; } /* La pista: rejilla cada hora, para poder leer una hora sin bajar la vista. */ .tablero-pista { position: relative; height: var(--rh); flex-shrink: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--pw) * 4 - 1px), var(--borde) calc(var(--pw) * 4 - 1px), var(--borde) calc(var(--pw) * 4)); } .linea-dia { position: absolute; top: 0; bottom: 0; width: 0; border-left: 3px solid rgba(218, 41, 28, .75); z-index: 5; } /* La raya del «ahora». Se quitó una vez y se volvió a pedir: sin una referencia de la hora actual hay que contar columnas para situarse. */ .linea-ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: #F59E0B; transform: translateX(-1px); z-index: 6; } .linea-ahora::before { content: '▶ AHORA'; position: absolute; top: 2px; left: 4px; font-size: .52rem; font-weight: 800; color: #b26a00; white-space: nowrap; background: rgba(255, 255, 255, .9); padding: 1px 3px; border-radius: 2px; } /* --- La barra de un vuelo ------------------------------------------------ Tres franjas apiladas, como en el tablero de la oficina: arriba la ruta, en medio el número de vuelo entre sus horas, abajo las notas. Encima, la franja de progreso con los tiempos que reportó la tripulación. */ .barra { position: absolute; top: 8px; height: var(--bh); border-radius: 2px; z-index: 10; min-width: 6px; padding-top: var(--ph); box-sizing: border-box; text-decoration: none; color: inherit; overflow: visible; } .barra:hover { filter: brightness(1.05); z-index: 15; } .barra-alto { height: 24px; background: #FFD5DB; border: 1px solid #E8A0AC; border-bottom: none; border-radius: 2px 2px 0 0; display: flex; align-items: center; justify-content: space-between; padding: 0 3px; overflow: hidden; } .barra-medio { height: 26px; background: #A0566A; border-left: 1px solid #7A3A4E; border-right: 1px solid #7A3A4E; display: flex; align-items: center; justify-content: space-between; padding: 0 3px; overflow: hidden; } .barra-bajo { height: 22px; background: #F2F2F2; border: 1px solid #C8C8C8; border-top: none; border-radius: 0 0 2px 2px; display: flex; align-items: center; padding: 0 4px; overflow: hidden; } .b-org, .b-dst { font-size: .5rem; font-weight: 700; color: #6B0011; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b-sal, .b-lle { font-size: .5rem; font-weight: 700; color: #fff; white-space: nowrap; } .b-num { font-size: .62rem; font-weight: 700; color: #fff; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; } .b-notas { font-size: .5rem; color: #6B0011; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .barra.manto .barra-alto { background: #D0D0D0; border-color: #AAA; } .barra.manto .barra-medio { background: #9E9E9E; border-color: #777; } .barra.manto .barra-bajo { background: #E5E5E5; border-color: #C0C0C0; } /* El vuelo del piloto que está mirando. Es lo único que se resalta: el resto del tablero está ahí como contexto, no como información suya. */ .barra.mio { z-index: 14; } .barra.mio::after { content: ''; position: absolute; top: var(--ph); left: 0; right: 0; bottom: 0; box-shadow: 0 0 0 3px var(--marca), 0 2px 8px rgba(0, 0, 0, .2); border-radius: 2px; pointer-events: none; } /* Progreso: los cuatro tiempos reportados, en franja y con su etiqueta. */ .barra-tiempos { position: absolute; top: 0; left: 0; right: 0; height: 22px; pointer-events: none; z-index: 4; overflow: visible; } .tic { position: absolute; font-size: .47rem; font-weight: 800; white-space: nowrap; line-height: 11px; padding: 0 2px; letter-spacing: -.2px; } .barra-progreso { position: absolute; top: 22px; left: 0; height: 6px; display: flex; border-radius: 1px; overflow: hidden; z-index: 3; } .barra-progreso i { height: 100%; display: block; } /* La tripulación, en su recuadro bajo la barra. */ .barra-crew { position: absolute; top: calc(var(--bh) + 2px); left: 50%; transform: translateX(-50%); width: max(100%, 96px); min-height: 22px; border: 1.5px solid #AAA; border-radius: 4px; background: #F0F0F0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: .55rem; padding: 2px 3px; z-index: 12; } .barra-crew.vacia { border-style: dashed; border-color: #c8c8c8; background: rgba(255, 255, 255, .7); } .crew-linea { font-size: .55rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--marca-fuerte); } .crew-linea.dh { color: var(--deadhead); font-weight: 600; } .crew-vacio { font-size: .55rem; color: #aaa; } .leyenda-gantt { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: .76rem; color: var(--tinta-media); margin: -.6rem 0 1rem; } .leyenda-gantt i { width: 14px; height: 6px; border-radius: 2px; display: inline-block; margin-right: .25rem; vertical-align: middle; } @media (max-width: 900px) { /* En un teléfono el tablero se recorre en horizontal, así que la escala no puede encogerse hasta que las etiquetas dejen de caber: se ENCOGE LA FILA —barra más baja, tripulación en una línea— y se conserva el ancho de la hora, que es lo que permite leer "MIA PTY 06:45 QT4071 09:50" dentro de la barra. Un tablero ilegible que cabe entero no sirve de nada. */ .tablero { --pw: 13px; /* 52 px la hora: da para el rótulo de un tramo corto */ --lw: 58px; --rh: 104px; --bh: 66px; --ph: 18px; --hh: 46px; } .tablero .barra-alto { height: 16px; } .tablero .barra-medio { height: 20px; } .tablero .barra-bajo { display: none; } /* las notas no caben; van en el título */ .tablero .b-org, .tablero .b-dst, .tablero .b-sal, .tablero .b-lle { font-size: .46rem; } .tablero .b-num { font-size: .56rem; } .tablero .barra-crew { min-height: 14px; flex-direction: row; flex-wrap: wrap; gap: 0 4px; padding: 1px 2px; } .tablero .crew-linea { font-size: .5rem; } .tablero .tic { font-size: .42rem; } .tablero .barra-tiempos { height: 16px; } .tablero .barra-progreso { top: 16px; height: 4px; } } .par-controles { display: flex; gap: .4rem; } .par-controles select { width: auto; } .leyenda-gantt button { margin-left: auto; } .consola { background: var(--tablero-oscuro); color: #e6ebf2; padding: .6rem .8rem; border-radius: var(--radio-menudo); font-family: "Consolas", ui-monospace, monospace; font-size: .8rem; overflow-x: auto; margin: .5rem 0; } /* ======================================================================== TABLERO EN MÓVIL ======================================================================== Dos días de Gantt son unos 1700 px: en un teléfono no se lee, se recorre a ciegas. Pero lo que hace útil un Gantt no es el ancho, es ver de un vistazo LA FORMA DEL DÍA de cada avión: cuántos tramos, dónde están los huecos, por dónde va ahora. Eso sí cabe en 390 px si se gira el planteamiento. Una tarjeta por matrícula. Dentro, una tira proporcional a la ventana —el Gantt de esa fila, comprimido a lo ancho de la pantalla— y debajo sus tramos en vertical, que es como se lee un teléfono. */ .movil-tablero { display: none; } .avion-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: .8rem; overflow: hidden; } .avion-tarjeta > header { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; padding: .6rem .8rem; background: var(--lavado); border-bottom: 1px solid var(--borde); } .avion-tarjeta .matricula { font-size: 1rem; } .avion-tarjeta .situacion { font-size: .78rem; color: var(--tinta-media); margin-left: auto; text-align: right; } /* La tira: la fila del Gantt comprimida al ancho de la pantalla. No lleva horas escritas —no caben— pero sí las divisiones de día y la marca de ahora, que es lo que se necesita para situarse. */ .tira { position: relative; height: 22px; margin: .5rem .8rem .2rem; background: var(--lavado); border-radius: 4px; overflow: hidden; } .tira i { position: absolute; top: 3px; height: 16px; border-radius: 2px; background: var(--marca-fuerte); } .tira i.mio { background: var(--marca); box-shadow: 0 0 0 2px var(--marca-suave); } .tira i.manto { background: var(--tinta-suave); } .tira i.aterrizo { background: var(--en-hora); } .tira i.en_ruta { background: var(--adicional); } .tira i.sin_reporte { background: var(--desviado); } .tira .corte-dia { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--borde-fuerte); } .tira .ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: #F59E0B; } .tira-pies { display: flex; justify-content: space-between; margin: 0 .8rem .5rem; font-size: .64rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } /* Los tramos del avión, uno por línea. */ .movil-tramo { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .1rem .6rem; align-items: baseline; padding: .55rem .8rem; border-top: 1px solid var(--borde); text-decoration: none; color: inherit; } .movil-tramo:hover, .movil-tramo:active { background: var(--lavado); } .movil-tramo.mio { box-shadow: inset 3px 0 0 var(--marca); } .movil-tramo .hora { font-weight: 700; font-variant-numeric: tabular-nums; } .movil-tramo .ruta-corta { font-weight: 600; letter-spacing: .02em; } .movil-tramo .num { color: var(--tinta-media); font-size: .84rem; } .movil-tramo .real { grid-column: 2 / -1; font-size: .74rem; color: var(--en-hora); font-weight: 600; font-variant-numeric: tabular-nums; } .movil-tramo .crew { grid-column: 2 / -1; font-size: .72rem; color: var(--tinta-suave); } .movil-tramo .zulu { grid-column: 1; font-size: .62rem; } /* En móvil manda el GANTT, igual que en escritorio: es lo que se pidió y es lo que se lee de un vistazo. Lo que cambia es la escala, no la vista. La lista de tarjetas sigue estando a un botón, para quien la prefiera. */ .ver-lista .tablero { display: none; } .ver-lista .movil-tablero { display: block; } .acciones-tablero { margin-left: auto; display: flex; gap: .4rem; } @media (max-width: 720px) { .acciones-tablero { margin-left: 0; width: 100%; } .leyenda-gantt { gap: .5rem; } } /* Las filas sin avión —entrenamiento, traslados— se distinguen del resto: lo que pasa ahí no es una rotación, es la agenda de la gente. */ /* "ENTRENAMIENTO" no cabe en 58 px de una línea: se deja envolver y se encoge, antes que recortarlo por los dos lados y dejar "TRENAMIEN". */ .tablero-fila.suelta .tablero-etiqueta { background: var(--marca-fuerte); font-size: .5rem; letter-spacing: .04em; white-space: normal; text-align: center; line-height: 1.15; padding: 0 3px; word-break: break-word; } .barra.curso .barra-alto { background: #E9D5FF; border-color: #C4A6E8; } .barra.curso .barra-medio { background: #6D47C4; border-color: #56359E; } .barra.curso .b-org, .barra.curso .b-dst { color: #3B1F73; } .barra.traslado .barra-alto { background: #CFE3FB; border-color: #9FC4EE; } .barra.traslado .barra-medio { background: #1C6FD6; border-color: #1557A8; } .barra.traslado .b-org, .barra.traslado .b-dst { color: #0D3E7D; } /* Ver la línea de otro es cosa de la oficina, y tiene que notarse. */ .selector-piloto { margin-bottom: 1rem; } .selector-piloto select { max-width: 26rem; } .aviso-ajena { border-left: 4px solid var(--desviado); } .aviso-ajena strong { font-variant-numeric: tabular-nums; letter-spacing: .04em; } /* --- Barras angostas ----------------------------------------------------- El número de vuelo es lo único que no puede faltar: sin él la barra no dice qué vuelo es. Cuando no cabe todo, lo que se retira son las horas —que están en el eje y en el título emergente— y el número se queda con el ancho. */ .b-num { flex: 1 1 auto; min-width: 0; } .b-sal, .b-lle { flex: 0 1 auto; min-width: 0; overflow: hidden; } .barra.estrecha .b-sal, .barra.estrecha .b-lle { display: none; } .barra.estrecha .b-num { text-align: left; padding: 0 1px; } .barra.estrecha .b-dst { display: none; } .barra.muy-estrecha .b-org, .barra.muy-estrecha .b-dst { display: none; } .barra.muy-estrecha .barra-alto { justify-content: center; } .barra.muy-estrecha .b-num { font-size: .5rem; letter-spacing: -.03em; } @media (max-width: 900px) { /* En móvil el número manda todavía más: es lo que se busca al recorrer el tablero con el pulgar. */ .tablero .b-num { font-size: .58rem; font-weight: 800; } .tablero .barra.estrecha .b-num { font-size: .54rem; } } /* La base editable en la tabla de usuarios. La corregida a mano se distingue de la que viene del archivo: si no, nadie sabe cuál está mirando. */ .tabla input.base { width: 4.2rem; padding: .2rem .35rem; font-size: .85rem; font-weight: 600; text-transform: uppercase; text-align: center; letter-spacing: .04em; } .tabla input.base.corregida { border-color: var(--desviado); background: var(--desviado-velo); color: var(--desviado); } /* --- Una tira por día ---------------------------------------------------- Con la ventana entera en una sola tira, dos días dejan bloques de veinte píxeles y ahí no cabe un número de vuelo. Un día por tira duplica la escala y de paso separa los días de verdad. */ .dia-tira { padding: .1rem 0 .3rem; } .dia-tira + .dia-tira { border-top: 1px dashed var(--borde); } .dia-nombre { margin: .5rem .8rem .15rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); } .dia-tira .tira { height: 26px; margin: 0 .8rem .1rem; } .dia-tira .tira i { top: 4px; height: 18px; line-height: 18px; font-size: .56rem; font-weight: 800; color: #fff; text-align: center; overflow: hidden; white-space: nowrap; letter-spacing: -.02em; padding: 0 1px; } .dia-tira .tira i.sin_reporte { color: #4a3200; } .dia-tira .tira-pies { margin: 0 .8rem .2rem; } /* Crear un usuario: plegado por defecto, porque es lo que menos se usa de esta pantalla y ocupa sitio a lo que sí. */ .crear-usuario summary { cursor: pointer; font-size: .95rem; } .crear-usuario summary::marker { color: var(--marca); } .formulario-usuario { display: grid; gap: .5rem .8rem; margin-top: .8rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; } .formulario-usuario .ancho2 { grid-column: span 2; } .formulario-usuario label { display: block; margin-bottom: .15rem; } .formulario-usuario .acciones { align-self: end; } @media (max-width: 720px) { .formulario-usuario { grid-template-columns: 1fr; } .formulario-usuario .ancho2 { grid-column: span 1; } } .llaves-carga summary, .crear-usuario summary { cursor: pointer; font-size: .95rem; } .llaves-carga .par-controles { margin: .8rem 0; } .llaves-carga .par-controles input { max-width: 24rem; } #llave-nueva .clave-texto { font-size: .95rem; word-break: break-all; margin: .4rem 0; } #llave-nueva code { display: block; margin-top: .3rem; word-break: break-all; background: var(--lavado); padding: .4rem; border-radius: 4px; } /* La cabecera del mes separa lo VOLADO de lo que falta. Mezclarlos da una cifra que no responde nada: un mes con veinte tramos de los que se volaron ocho y quedan doce por delante no son «veinte tramos». */ .cuentas-mes { margin-left: auto; display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--tinta-media); font-weight: 400; text-transform: none; letter-spacing: 0; } .cuenta b { font-variant-numeric: tabular-nums; } .cuenta.volado b { color: var(--en-hora); } .cuenta.pendiente b { color: var(--tinta); } .cuenta.dh b { color: var(--deadhead); } .asterisco { color: var(--desviado); font-weight: 700; cursor: help; } @media (max-width: 720px) { .cuentas-mes { margin-left: 0; width: 100%; gap: .6rem; } } /* ======================================================================== AJUSTES DE CELULAR ======================================================================== El piloto abre esto con el pulgar, de pie y con prisa. Cada línea de preámbulo antes del tablero es una que tiene que desplazar. */ .plegable-movil > summary { cursor: pointer; font-size: .8rem; color: var(--tinta-suave); padding: .3rem 0; list-style-position: inside; } .plegable-movil > summary::marker { color: var(--marca); } .plegable-movil[open] > summary { margin-bottom: .2rem; } .plegable-movil p { margin: 0 0 .4rem; max-width: 78ch; line-height: 1.5; } .barra-tablero { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; } .barra-tablero .rotulo { margin-bottom: .2rem; } .barra-tablero .acciones-tablero { margin-left: auto; } @media (max-width: 720px) { /* La barra superior a una sola línea de alto util. */ .barra-marca .interior { padding: .35rem .6rem; gap: .4rem; } .logotipo { font-size: .95rem; } .logotipo .simbolo { width: 22px; height: 22px; } .contenedor { padding: .7rem .6rem 2rem; } h1 { font-size: 1.15rem; } .rotulo { margin: 1rem 0 .4rem; } /* Las cifras del día, en rejilla apretada: siete números en dos filas ocupaban 130 px de alto. */ .cifras.tablero { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .4rem; margin-top: .2rem; } .cifras.tablero .cifra b { font-size: 1.15rem; } /* Sin recortes: "DEMORADOS" no cabe a .58rem con espaciado de letra, y una etiqueta cortada por la izquierda se lee peor que una más pequeña. */ .cifras.tablero .cifra { min-width: 0; overflow: hidden; } .cifras.tablero .cifra span { font-size: .52rem; letter-spacing: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cifras.tablero + .plegable-movil { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--borde); } .cabecera-linea { gap: .5rem; } .dia-selector { width: 100%; } .dia-selector .par-controles { width: 100%; } .dia-selector input[type="date"] { flex: 1; } .franja-propia { padding: .55rem .7rem; gap: .5rem; margin-bottom: .8rem; } .franja-propia b { font-size: .98rem; } .barra-tablero .acciones-tablero { margin-left: 0; } /* Objetivos de toque: 44 px es lo que se acierta con el pulgar. */ .movil-tramo { padding: .7rem .8rem; min-height: 44px; } .menu a { padding: .4rem .7rem; } button, .boton { min-height: 38px; } .barra-marca button.suave { min-height: 32px; } } /* Lo que solo tiene sentido cuando hay sitio. */ @media (max-width: 720px) { .solo-ancho { display: none; } .cabecera-linea { flex-direction: column; align-items: stretch; } .barra-tablero { gap: .5rem; } .barra-tablero .rotulo { margin: .6rem 0 0; } .barra-tablero .acciones-tablero { margin-left: auto; } .plegable-movil > summary { padding: .15rem 0; } .leyenda.plegable-movil { margin-bottom: .4rem; } } /* El resumen habla del MES EN CURSO. Sin decirlo, un total sin periodo invita a leerlo como «todo lo que llevo», que es otra cifra. Va de rótulo encima de las tarjetas, no flotando sobre ellas como antes. */ .mes-de { margin: 0 0 .35rem; color: var(--tinta-suave); } /* ======================================================================== EL MES: CABECERA, CIFRAS Y REJILLA ======================================================================== Lo comparten «Mi roster» y «Mi línea». Las dos enseñan un mes y las dos tienen que verse igual: si cada una se pintara a su manera, cambiar de pestaña parecería cambiar de aplicación. El mes entero de un vistazo. La rejilla es la vista buena en pantalla ancha; en el celular se cambia por la lista, porque siete columnas en 360 píxeles dejan cada día del ancho de un dedo y ahí no cabe «4225 MIABOGMDE». Cada clase de día tiene su color, y son colores NUEVOS, no los de estado de Mi línea: allí verde significa «salió en hora» y aquí significaría «vuelo», dos cosas distintas con el mismo verde. Se reutiliza solo el violeta del deadhead, que sí quiere decir lo mismo en las dos pantallas. ======================================================================== */ :root { --r-vuelo: #1c6fd6; --r-entrenamiento: #0f7a45; --r-libre: #868f98; --r-vacaciones: #0e8f8f; --r-disponible: #b3730a; --r-pernocta: #6b7f9e; --r-ausencia: #8c1d18; --r-incapacidad: #b3261e; --r-otro: #4a5259; } .cabecera-pantalla { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .quien-pantalla h1 { font-size: 1.7rem; letter-spacing: -.02em; margin: .1rem 0 .15rem; } .quien-pantalla .apunte { margin: 0; color: var(--tinta-media); } .mandos-pantalla { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; } .elegir-mes { display: flex; flex-direction: column; gap: .2rem; } .elegir-mes select { min-width: 12rem; } /* Las tres cifras oficiales. Van grandes porque son lo primero que se busca al abrir el mes. */ .cifras-grandes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; } .cifras-grandes .cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: .8rem 1rem; text-align: center; } .cifras-grandes .valor { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .leyenda-clases { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; } .leyenda-clases li { font-size: .78rem; color: var(--tinta-media); display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; background: var(--lavado); border: 1px solid var(--borde); border-left: 3px solid var(--r-otro); } .leyenda-clases b { color: var(--tinta); font-variant-numeric: tabular-nums; } /* --- La rejilla ------------------------------------------------------- */ .rejilla-mes { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; } .encabezado-semana, .semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .encabezado-semana { background: var(--tablero-oscuro); color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; } .encabezado-semana span { padding: .5rem .6rem; text-align: center; } .semana + .semana .dia, .semana + .semana .hueco { border-top: 1px solid var(--borde); } .dia, .hueco { min-height: 5.6rem; padding: .45rem .55rem; } .dia + .dia, .hueco + .dia, .dia + .hueco { border-left: 1px solid var(--borde); } .hueco { background: var(--lavado); } .dia { display: flex; flex-direction: column; gap: .12rem; border-left: 3px solid transparent; /* El borde de color va a la izquierda y no de fondo: un relleno macizo por día convierte el mes en una manta de colores donde ya no se lee el texto, que es lo que el piloto viene a leer. */ } .encabezado-dia { display: flex; align-items: center; justify-content: space-between; } .dia .numero { font-size: .82rem; font-weight: 700; color: var(--tinta-media); font-variant-numeric: tabular-nums; } /* El emoji se declara con su propia familia: sin ella, Windows lo pinta en blanco y negro dentro de una fuente de texto y la mitad del sentido se pierde. `line-height: 1` evita que agrande el renglón que lo contiene. */ .emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: .95em; line-height: 1; font-style: normal; } .dia .emoji { font-size: .9rem; } .dia .horas { font-size: .72rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .dia .horas .a { opacity: .5; margin: 0 .12rem; } .dia .que { font-size: .76rem; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; } .dia .bloque { margin-top: auto; font-size: .68rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } /* El día que se sale del mes —el que el PDF trae de propina— se apaga: está ahí como aviso de lo que viene, no como parte de este mes. */ .dia.ajeno { opacity: .45; } .dia.hoy { background: var(--marca-suave); box-shadow: inset 0 0 0 2px var(--marca); } /* --- La lista, para pantalla pequeña ---------------------------------- */ .lista-roster { display: none; } .renglon-dia { display: flex; gap: .8rem; align-items: flex-start; background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--r-otro); border-radius: var(--radio-menudo); box-shadow: var(--sombra); padding: .6rem .8rem; margin-bottom: .45rem; } .renglon-dia .fecha { text-align: center; min-width: 2.4rem; } .renglon-dia .fecha .numero { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; } .renglon-dia .fecha .dia-semana { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); font-weight: 700; } .renglon-dia .que { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .renglon-dia .detalle { margin: .15rem 0 0; font-size: .76rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .renglon-dia .etiqueta-clase { font-weight: 700; color: var(--tinta-media); } .renglon-dia.hoy { border-color: var(--marca); box-shadow: var(--sombra-alta); } /* --- El color de cada clase, en los tres sitios que lo usan ----------- */ .clase-vuelo { border-left-color: var(--r-vuelo); } .clase-dh { border-left-color: var(--deadhead); } .clase-entrenamiento { border-left-color: var(--r-entrenamiento); } .clase-libre { border-left-color: var(--r-libre); } .clase-vacaciones { border-left-color: var(--r-vacaciones); } .clase-disponible { border-left-color: var(--r-disponible); } .clase-pernocta { border-left-color: var(--r-pernocta); } .clase-ausencia { border-left-color: var(--r-ausencia); } .clase-incapacidad { border-left-color: var(--r-incapacidad); } .clase-otro, .clase-sin_asignar { border-left-color: var(--r-otro); } .dia.clase-vuelo .que { color: var(--r-vuelo); } .dia.clase-dh .que { color: var(--deadhead); } .dia.clase-entrenamiento .que { color: var(--r-entrenamiento); } .dia.clase-vacaciones .que { color: var(--r-vacaciones); } .dia.clase-disponible .que { color: var(--r-disponible); } .dia.clase-ausencia .que { color: var(--r-ausencia); } .dia.clase-incapacidad .que { color: var(--r-incapacidad); } .dia.clase-libre .que, .dia.clase-pernocta .que { color: var(--tinta-suave); font-weight: 500; } /* Calendario o vertical, y lo elige el piloto — no el ancho de la ventana. Antes «Mi roster» saltaba solo a la lista por debajo de 860 px y «Mi línea» no, así que las dos pantallas se comportaban distinto con el mismo gesto. */ body:not(.ver-calendario) .rejilla-mes { display: none; } body:not(.ver-calendario) .lista-roster { display: block; } @media (max-width: 860px) { .cabecera-pantalla { align-items: flex-start; } .mandos-pantalla, .elegir-mes { width: 100%; } .cifras-grandes .valor { font-size: 1.35rem; } } /* ======================================================================== IMPRIMIR ======================================================================== Se imprime LO QUE SE ESTÁ VIENDO: si está en calendario sale el mes en una hoja apaisada, y si está en vertical sale la lista día a día. Forzar una de las dos convertiría el botón de vista en una mentira, y las dos formas sirven para cosas distintas — el calendario para la nevera, la lista para repasar un día con detalle. La orientación la elige la vista: apaisada para la rejilla, vertical para la lista, que es como cada una cabe. ======================================================================== */ @media print { @page { margin: 10mm; } .mandos-pantalla, .selector-piloto, .aviso-ajena { display: none !important; } .cabecera-pantalla { margin-bottom: .5rem; } .quien-pantalla h1 { font-size: 16pt; } .cifras-grandes { gap: .3rem; margin-bottom: .5rem; } .cifras-grandes .cifra { padding: .3rem .5rem; border: 1px solid #999; } .cifras-grandes .valor { font-size: 13pt; } .leyenda-clases { margin-bottom: .4rem; } .leyenda-clases li { border: 1px solid #999; padding: .05rem .35rem; } /* La cabecera de los días de la semana lleva texto blanco sobre oscuro. Las impresoras suelen descartar los fondos, y entonces sería blanco sobre blanco: en papel se invierte a texto negro sobre una línea. */ .encabezado-semana { background: #fff !important; color: #000 !important; border-bottom: 1.5pt solid #000; } .encabezado-semana span { padding: .15rem .3rem; } .rejilla-mes { border: 1px solid #999; box-shadow: none; } .semana { break-inside: avoid; } .dia, .hueco { min-height: 2.6cm; border-color: #bbb !important; } .dia .que { font-size: 7.5pt; } .dia .horas, .dia .bloque { font-size: 7pt; } /* El día de hoy se marca con un trazo, no con un fondo rojo que la impresora puede no sacar y que en blanco y negro sale de gris sucio. */ .dia.hoy { background: transparent !important; box-shadow: inset 0 0 0 1.5pt #000 !important; } .origen-datos { font-size: 7pt; margin-top: .4rem; } } /* ======================================================================== MI LÍNEA EN CALENDARIO ======================================================================== La misma línea que la lista, en rejilla de mes. Las dos vistas están en la página y se conmuta con una clase en el : son los mismos datos, así que cambiar es instantáneo y no hay nada que volver a pedir. La rejilla reutiliza las clases de «Mi roster» —`.rejilla-mes`, `.dia`, `.clase-*`— a propósito. Un vuelo tiene que verse igual en las dos pantallas; dos paletas para lo mismo obligan a aprenderse dos. ======================================================================== */ .calendario-linea { display: none; } body.ver-calendario .calendario-linea { display: block; } .mes-calendario { margin-bottom: 1.2rem; } .mes-calendario .nombre-mes { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } /* Un día sin nada no es un error: es un día del que no hay dato. Se deja en blanco y callado, sin inventarle un «libre» que nadie ha dicho. */ .dia.vacio-dia { background: var(--lavado); } .dia.vacio-dia .numero { color: var(--tinta-suave); } /* Los días que vienen del roster llevan el número apagado y el punteado, la misma señal que en la lista: es una proyección, no lo confirmado. */ .dia.del-roster { border-left-style: dashed; } .dia.del-roster .numero { color: var(--tinta-suave); font-weight: 500; } .dia .que.tachado { text-decoration: line-through; opacity: .6; } @media (max-width: 860px) { /* Aquí NO se cambia por la lista, al revés que en «Mi roster»: si el piloto ha pedido el calendario, es el calendario lo que quiere ver. Se estrecha lo que se pueda y se deja recorrer en horizontal. */ body.ver-calendario .calendario-linea { overflow-x: auto; } body.ver-calendario .rejilla-mes { min-width: 34rem; } } @media print { /* En papel manda lo que se esté viendo, y la lista se parte sola por tarjetas. El calendario, si está activo, se imprime entero. */ } /* --- La casilla pulsable y su detalle -------------------------------------- Una casilla del calendario es un