/* * Estilos de Plancito sobre los principios de Material 3. * * Paleta: los colores de la bandera argentina (celeste, sol, blanco) mapeados a * los roles de color de M3. Modo claro y modo oscuro: el oscuro es una noche azul * marino, no negro. Fuente del sistema. * Todos los pares de texto y fondo cumplen contraste AA (ver DECISIONES). * Ningun estado depende solo del color: seleccionado lleva check, un aviso * lleva icono y texto. */ /* ---------- Tokens del sistema ---------- */ :root { /* Celeste */ --md-sys-color-primary: #2a6aa6; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #cde5f4; --md-sys-color-on-primary-container: #0e2f52; --md-sys-color-secondary-container: #d6ebf6; --md-sys-color-on-secondary-container: #12324f; /* Sol */ --md-sys-color-tertiary: #8a5d00; --md-sys-color-tertiary-container: #f6b414; --md-sys-color-on-tertiary-container: #3b2800; --md-sys-color-tertiary-fixed: #fce6ae; --md-sys-color-on-tertiary-fixed: #3b2800; /* Blanco y superficies, con un tinte celeste muy leve */ --md-sys-color-surface: #f6f9fc; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #eef4f9; --md-sys-color-surface-container: #e8eff6; --md-sys-color-surface-container-high: #e1e8f0; --md-sys-color-surface-container-highest: #dadfea; --md-sys-color-on-surface: #182038; --md-sys-color-on-surface-variant: #465068; --md-sys-color-outline: #737b92; --md-sys-color-outline-variant: #c4cbda; --md-sys-color-inverse-surface: #22294a; --md-sys-color-inverse-on-surface: #eef1f8; --md-sys-color-inverse-primary: #9cccf0; /* El cielo de arriba de la pagina */ --plancito-cielo-claro: #cfe8f6; --plancito-cielo: #9ecbea; /* Fondo de tarjetas y del formulario */ --plancito-tarjeta: #ffffff; /* El ".ar" de la marca: el primario da 4,45 sobre el cielo, uno mas profundo da 5,86 */ --plancito-marca: #22578a; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; --md-sys-state-hover: 0.08; --md-sys-state-focus: 0.1; --md-sys-state-pressed: 0.1; --md-sys-elevation-1: 0 1px 2px rgb(24 32 56 / 0.18), 0 1px 3px 1px rgb(24 32 56 / 0.1); --md-sys-elevation-3: 0 1px 3px rgb(24 32 56 / 0.2), 0 4px 8px 3px rgb(24 32 56 / 0.12); --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-duration-short: 200ms; --md-sys-motion-duration-medium: 300ms; /* Margenes por clase de ventana: compacta 16, media y expandida 24 */ --margen: 16px; --barra-alto: 64px; color-scheme: light; } /* Modo oscuro: una noche azul marino, no negro. El pone data-tema antes de pintar. */ :root[data-tema="oscuro"] { --md-sys-color-primary: #9cccf0; --md-sys-color-on-primary: #0b2e4e; --md-sys-color-primary-container: #1f4f7d; --md-sys-color-on-primary-container: #d3eafb; --md-sys-color-secondary-container: #2a4c6e; --md-sys-color-on-secondary-container: #d9ecf8; --md-sys-color-tertiary: #ffcb5c; --md-sys-color-tertiary-container: #f6b414; --md-sys-color-on-tertiary-container: #3b2800; --md-sys-color-surface: #121b33; --md-sys-color-surface-container-lowest: #0e1629; --md-sys-color-surface-container-low: #172241; --md-sys-color-surface-container: #1b284a; --md-sys-color-surface-container-high: #223157; --md-sys-color-surface-container-highest: #2a3a63; --md-sys-color-on-surface: #e6ecf7; --md-sys-color-on-surface-variant: #b7c3da; --md-sys-color-outline: #8793ad; --md-sys-color-outline-variant: #3a4a70; --md-sys-color-inverse-surface: #e6ecf7; --md-sys-color-inverse-on-surface: #1b284a; --md-sys-color-inverse-primary: #2a6aa6; --plancito-cielo-claro: #24497a; --plancito-cielo: #182b52; --plancito-tarjeta: #1a2647; --plancito-marca: #9cccf0; --md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px 1px rgb(0 0 0 / 0.25); --md-sys-elevation-3: 0 1px 3px rgb(0 0 0 / 0.45), 0 4px 8px 3px rgb(0 0 0 / 0.3); color-scheme: dark; } @media (min-width: 600px) { :root { --margen: 24px; } } /* ---------- Escala tipografica (tamanio / interlineado / peso / tracking) ---------- */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .headline-medium { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; } .title-large { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; } .title-medium { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; } .title-small { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; } .body-large { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.5px; } .body-medium { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; } .body-small { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.4px; } .label-large { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; } .label-medium { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; } .variante { color: var(--md-sys-color-on-surface-variant); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; color: var(--md-sys-color-on-surface); /* Un cielo celeste arriba que se funde con el blanco */ background: linear-gradient(180deg, var(--plancito-cielo-claro) 0, var(--plancito-cielo) 200px, var(--md-sys-color-surface) 520px) no-repeat, var(--md-sys-color-surface); background-size: 100% 520px; -webkit-tap-highlight-color: transparent; } h1, h2, h3, p { margin: 0; } a { color: var(--md-sys-color-primary); } fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { padding: 0; } .icono { width: 24px; height: 24px; fill: currentColor; flex: none; } :focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .saltar { position: absolute; left: 8px; top: -100px; z-index: 20; } .saltar:focus { top: 8px; } /* ---------- Capas de estado ---------- */ .estado { position: relative; overflow: hidden; } .estado::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: currentColor; opacity: 0; border-radius: inherit; transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); } .estado:hover::after { opacity: var(--md-sys-state-hover); } .estado:focus-visible::after { opacity: var(--md-sys-state-focus); } .estado:active::after { opacity: var(--md-sys-state-pressed); } label:hover > input + .estado::after { opacity: var(--md-sys-state-hover); } label > input:focus-visible + .estado::after { opacity: var(--md-sys-state-focus); } /* ---------- Top app bar ---------- */ .barra-superior { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 4px; height: var(--barra-alto); padding: 0 var(--margen); background: transparent; transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); } .barra-superior.con-scroll { background: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-1); } .barra-superior:has(#volver:not([hidden])) { padding-left: 4px; } .barra-titulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #marca { font-weight: 500; letter-spacing: -0.2px; } .dominio { color: var(--plancito-marca); } /* ---------- Botones ---------- */ .boton-relleno, .boton-tonal, .boton-texto, .fab-extendido, .chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-family: inherit; text-decoration: none; } .boton-relleno, .boton-tonal, .boton-texto { min-height: 40px; border-radius: var(--md-sys-shape-corner-full); padding: 0 24px; } .boton-relleno .icono, .boton-tonal .icono, .boton-texto .icono { width: 18px; height: 18px; } .boton-relleno { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .boton-relleno:hover { box-shadow: var(--md-sys-elevation-1); } .boton-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); padding: 0 24px 0 16px; } .boton-texto { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; } .boton-ancho { width: 100%; min-height: 56px; border-radius: var(--md-sys-shape-corner-large); font-size: 16px; } /* Area tactil de 48px aunque el boton visible sea de 40 */ .boton-relleno::before, .boton-tonal::before, .boton-texto::before, .chip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); } .boton-icono { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: var(--md-sys-shape-corner-full); background: transparent; color: var(--md-sys-color-on-surface); cursor: pointer; } /* Extended FAB: el sol */ .fab-extendido { position: fixed; right: var(--margen); bottom: var(--margen); z-index: 9; min-height: 56px; padding: 0 20px 0 16px; gap: 12px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); box-shadow: var(--md-sys-elevation-3); } /* ---------- Text field (outlined) con select ---------- */ .grupo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .grupo legend { margin-bottom: 8px; } .campo-texto { position: relative; } .campo-texto select { appearance: none; width: 100%; height: 56px; padding: 0 48px 0 16px; font: inherit; font-size: 16px; letter-spacing: 0.5px; color: var(--md-sys-color-on-surface); background: var(--plancito-tarjeta); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small); cursor: pointer; } /* La lista desplegable la dibuja el navegador: sin colores propios, en modo oscuro las opciones heredaban el texto claro sobre fondo blanco y no se leian. */ .campo-texto option { background-color: var(--plancito-tarjeta); color: var(--md-sys-color-on-surface); } .campo-texto select:hover { border-color: var(--md-sys-color-on-surface); } .campo-texto select:focus-visible { outline: none; border: 2px solid var(--md-sys-color-primary); padding-left: 15px; } .campo-texto label { position: absolute; left: 12px; top: -8px; padding: 0 4px; background: var(--plancito-tarjeta); color: var(--md-sys-color-on-surface-variant); } .campo-texto:focus-within label { color: var(--md-sys-color-primary); } .campo-texto .icono-final { position: absolute; right: 12px; top: 16px; pointer-events: none; color: var(--md-sys-color-on-surface-variant); } .campo-texto.error select { border: 2px solid var(--md-sys-color-tertiary); } .texto-ayuda { padding: 0 16px; color: var(--md-sys-color-on-surface-variant); min-height: 16px; } .texto-ayuda.error { color: var(--md-sys-color-tertiary); font-weight: 500; } .texto-ayuda.error::before { content: "⚠ "; } /* ---------- Chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; min-height: 32px; padding: 0 16px 0 8px; border-radius: var(--md-sys-shape-corner-small); border: 1px solid var(--md-sys-color-outline-variant); background: var(--plancito-tarjeta); color: var(--md-sys-color-on-surface); } .chip .icono { width: 18px; height: 18px; color: var(--md-sys-color-primary); } .chip-asistencia { align-self: flex-start; overflow: visible; } /* Filter chip: checkbox nativo, check visible al seleccionar */ .chip-filtro { position: relative; display: inline-flex; } .chip-filtro input, .segmentado input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; } .chip-filtro .chip { overflow: hidden; } .chip-filtro .marca { display: none; } .chip-filtro input:checked + .chip { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; } .chip-filtro input:checked + .chip .marca { display: block; color: inherit; } .chip-filtro input:checked + .chip .icono-categoria { display: none; } .chip-filtro input:focus-visible + .chip { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; } /* ---------- Segmented button ---------- */ .segmentado { display: flex; min-height: 40px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); overflow: hidden; } .segmentado label { position: relative; flex: 1 1 0; min-width: 0; } .segmentado label + label { border-left: 1px solid var(--md-sys-color-outline); } .segmentado label > span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 40px; padding: 0 12px; text-align: center; color: var(--md-sys-color-on-surface); } .segmentado .marca { display: none; width: 18px; height: 18px; } .segmentado input:checked + span { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .segmentado input:checked + span .marca { display: block; } .segmentado input:focus-visible + span { outline: 3px solid var(--md-sys-color-primary); outline-offset: -3px; } /* ---------- Switch ---------- */ .interruptor { position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; cursor: pointer; } .interruptor-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; } .interruptor input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .interruptor-pista { position: relative; flex: none; width: 52px; height: 32px; border: 2px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest); transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); } .interruptor-manija { position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-outline); transform: translateY(-50%); transition: left var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), width var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), height var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); } .interruptor-manija .marca { display: none; width: 16px; height: 16px; color: var(--md-sys-color-primary); } .interruptor input:checked + .interruptor-pista { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); } .interruptor input:checked + .interruptor-pista .interruptor-manija { left: 22px; width: 24px; height: 24px; background: var(--md-sys-color-on-primary); } .interruptor input:checked + .interruptor-pista .marca { display: block; } .interruptor input:focus-visible + .interruptor-pista { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; } /* ---------- Disposicion y vistas ---------- */ .contenido { padding: 8px var(--margen) 112px; } .vista { animation: aparecer var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized-decelerate); } @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .vista-preferencias { max-width: 560px; margin: 0 auto; } .vista h1:focus { outline: none; } /* Encabezado bajo el cielo, con un sol de decoracion */ .heroe { position: relative; padding: 16px 0 28px; } .heroe h1, .heroe p { position: relative; max-width: 80%; } .heroe h1 { margin-bottom: 8px; } .sol { position: absolute; right: -8px; top: -16px; width: 112px; height: 112px; color: var(--md-sys-color-tertiary-container); animation: girar 90s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .formulario { padding: 24px 20px 20px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--plancito-tarjeta); box-shadow: var(--md-sys-elevation-1); } /* Plan en ventana compacta y media: una columna, mapa desplegable */ .vista-plan { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; grid-template-areas: "cabecera" "mapa" "lista"; } .plan-cabecera { grid-area: cabecera; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .plan-cabecera h1 { margin-top: 8px; } .plan-cabecera .boton-tonal { margin-top: 8px; background: var(--plancito-tarjeta); } .plan-mapa { grid-area: mapa; display: none; } .vista-plan[data-mapa="abierto"] .plan-mapa { display: block; } .plan-lista { grid-area: lista; min-width: 0; } .mapa { height: 320px; border-radius: var(--md-sys-shape-corner-large); overflow: hidden; background: var(--md-sys-color-surface-container); z-index: 0; box-shadow: var(--md-sys-elevation-1); } /* Solo el mapa de OSM (desarrollo) se retoca con filtros: MapTiler trae estilo claro y oscuro */ .mapa[data-proveedor="osm"] .leaflet-tile-pane { filter: saturate(0.7); } /* En oscuro se invierte y se rota el tono, asi el agua sigue azul y las calles quedan claras */ :root[data-tema="oscuro"] .mapa[data-proveedor="osm"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.6); } .logo-maptiler { display: block; margin: 0 0 6px 6px; } .logo-maptiler img { display: block; width: 88px; height: auto; } .marcador { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: 2px solid #ffffff; box-shadow: var(--md-sys-elevation-1); font: 500 12px/1 system-ui, sans-serif; } /* Ventana expandida: panel de apoyo con el mapa fijo */ @media (min-width: 840px) { .vista-plan { max-width: 1200px; column-gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "cabecera mapa" "lista mapa"; align-items: start; } .plan-mapa { display: block !important; position: sticky; top: calc(var(--barra-alto) + 8px); } .mapa { height: calc(100vh - var(--barra-alto) - 32px); min-height: 360px; } #alternar-mapa { display: none; } } /* ---------- Recorrido ---------- */ .recorrido { list-style: none; margin: 0; padding: 0; } /* List item con icono al inicio y riel vertical que une las paradas */ .item-lista { position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0 8px 8px; } .item-lista > .icono { color: var(--md-sys-color-primary); } .item-lista .texto { flex: 1; min-width: 0; } .item-lista .boton-texto { flex: none; } .tramo::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; border-left: 2px dotted var(--md-sys-color-primary); opacity: 0.45; } .tramo > .icono { position: relative; background: var(--md-sys-color-surface); padding: 2px 0; } /* Card para cada parada */ .tarjeta { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: var(--plancito-tarjeta); } .tarjeta-cabecera { display: flex; gap: 16px; align-items: flex-start; } .insignia { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .datos { display: flex; flex-wrap: wrap; gap: 4px 16px; } .dato { display: inline-flex; align-items: center; gap: 6px; color: var(--md-sys-color-on-surface-variant); } .dato .icono { width: 18px; height: 18px; } .dato.atencion { color: var(--md-sys-color-tertiary); font-weight: 500; } .tarjeta-acciones { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0 -12px -8px; } .libre { display: flex; gap: 16px; align-items: center; padding: 16px 0 0 8px; } .libre .icono { color: var(--md-sys-color-primary); } /* ---------- Estado vacio ---------- */ .estado-vacio { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 48px 24px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-tertiary-fixed); color: var(--md-sys-color-on-tertiary-fixed); } .estado-vacio .variante { color: var(--md-sys-color-on-tertiary-fixed); } .icono-grande { width: 48px; height: 48px; color: var(--md-sys-color-on-tertiary-fixed); } /* ---------- Snackbar ---------- */ .snackbar { position: fixed; left: 50%; bottom: var(--margen); z-index: 11; display: flex; align-items: center; gap: 8px; width: min(calc(100% - 2 * var(--margen)), 560px); min-height: 48px; padding: 4px 8px 4px 16px; border-radius: var(--md-sys-shape-corner-extra-small); background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); box-shadow: var(--md-sys-elevation-3); transform: translateX(-50%); animation: subir var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized-decelerate); } .snackbar span { flex: 1; } .snackbar .boton-texto { color: var(--md-sys-color-inverse-primary); } @keyframes subir { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } /* En ventana compacta el snackbar va arriba del FAB, no encima */ @media (max-width: 599px) { body:has(#otro:not([hidden])) .snackbar { bottom: calc(var(--margen) + 56px + 16px); } } /* ---------- Pie ---------- */ .pie { max-width: 720px; margin: 0 auto; padding: 0 var(--margen) 32px; } .pie p { margin: 4px 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }