/* Sistema de diseño "Organic" — proveniente del proceso de diseño aprobado. Tokens y componentes del design system + estructura propia de la app. Fuentes autoalojadas (static/fonts), sin dependencias externas. */ /* ── fuentes ─────────────────────────────────────────────────────────── */ @font-face { font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/caprasimo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC; } @font-face { font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/caprasimo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; } /* ── tokens ──────────────────────────────────────────────────────────── */ :root { --color-bg: #f5ead8; --color-surface: #ebddc5; --color-text: #201e1d; --color-accent: #c67139; --color-accent-2: #7a8a5e; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a; --color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25; --color-accent-100: #fff2eb; --color-accent-200: #ffe1d0; --color-accent-300: #ffc6a5; --color-accent-400: #f6a06b; --color-accent-500: #d67f48; --color-accent-600: #b2622d; --color-accent-700: #8c491a; --color-accent-800: #643312; --color-accent-900: #402310; --color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2; --color-accent-2-400: #aebf92; --color-accent-2-500: #8fa073; --color-accent-2-600: #728157; --color-accent-2-700: #56633f; --color-accent-2-800: #3d472b; --color-accent-2-900: #272e1b; --color-success: #4f7a4a; --color-success-bg: #e6f0df; --color-success-text: #345c30; --color-warning: #ab7d1f; --color-warning-bg: #f8ecd2; --color-warning-text: #7a5714; --color-danger: #b3492f; --color-danger-bg: #f8e1da; --color-danger-text: #8a331d; --font-heading: "Caprasimo", system-ui, sans-serif; --font-heading-weight: 400; --font-body: "Figtree", system-ui, sans-serif; --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent); --nav-h: 64px; /* altura de la barra inferior móvil */ } /* tema oscuro: automático por preferencia del sistema, con override manual vía data-theme en (el toggle lo estampa y lo guarda en localStorage) */ .tema-oscuro { --color-bg: #23201b; --color-surface: #322e26; --color-text: #f5efe3; --color-divider: color-mix(in srgb, #f5efe3 20%, transparent); --color-success: #85ab7d; --color-success-bg: #20301c; --color-success-text: #a8d39d; --color-warning: #d1a856; --color-warning-bg: #3a2c10; --color-warning-text: #eec876; --color-danger: #d97b5e; --color-danger-bg: #3a2019; --color-danger-text: #f0a48c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 3px 10px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } /* ── base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100%; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 26px; } h2 { font-size: 21px; } h3 { font-size: 18px; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } img { display: block; max-width: 100%; } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── botones ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: 999px; min-height: 44px; } .btn svg { display: block; flex: none; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--color-accent); color: #f5ead8; } .btn-primary:hover { background: var(--color-accent-600); } .btn-primary:active { background: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-danger { background: var(--color-danger); color: #fff; } .btn-danger:hover, .btn-danger:active { background: var(--color-danger-text); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-2); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 44px; height: 44px; padding: 0; } .btn-block { width: 100%; } .btn-grande { min-height: 52px; font-size: 16px; } /* ── formularios ─────────────────────────────────────────────────────── */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 48px; padding: 6px 14px; font: inherit; font-size: 16px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 999px; } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } .input.invalido { border-color: var(--color-danger); } .ayuda-error { font-size: 12px; color: var(--color-danger-text); } textarea.input { min-height: 90px; resize: vertical; border-radius: var(--radius-lg); } .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; min-height: 44px; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: 999px; } .seg-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; font-size: 13px; cursor: pointer; flex: 1; } .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt:has(input:checked) { background: var(--color-accent); color: #f5ead8; } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* ── tarjetas, tags, tablas, diálogo ─────────────────────────────────── */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; } .card-body { margin: 0; font-size: 13px; opacity: .8; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; } .tema-oscuro .tag-accent { background: var(--color-accent-900); color: var(--color-accent-300); } .tema-oscuro .tag-accent-2 { background: var(--color-accent-2-900); color: var(--color-accent-2-300); } .tema-oscuro .tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-300); } .pastilla-estado { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .pastilla-exacta { background: var(--color-success-bg); color: var(--color-success-text); } .pastilla-aprox { background: var(--color-warning-bg); color: var(--color-warning-text); } .pastilla-error { background: var(--color-danger-bg); color: var(--color-danger-text); } .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); box-shadow: var(--shadow-lg); } /* ── estructura de la app ────────────────────────────────────────────── */ .pantalla { max-width: 640px; margin-inline: auto; padding-bottom: calc(var(--nav-h) + 16px); } .topbar { position: sticky; top: 0; z-index: 20; background: var(--color-bg); padding: 14px 18px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .topbar .titulo { font-family: var(--font-heading); font-size: 19px; } .barra-busqueda { position: sticky; top: 58px; z-index: 20; background: var(--color-bg); padding: 0 18px 12px; } .caja-busqueda { display: flex; align-items: center; gap: 8px; background: var(--color-surface); border-radius: 999px; padding: 0 14px; height: 48px; } .caja-busqueda input { border: none; background: transparent; outline: none; font-size: 16px; font-family: var(--font-body); color: var(--color-text); width: 100%; } .chipbar { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 12px; scrollbar-width: none; } .chipbar::-webkit-scrollbar { display: none; } .chipbar .tag { white-space: nowrap; cursor: pointer; min-height: 36px; text-decoration: none; } .fila-cliente { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--color-divider); min-height: 64px; text-decoration: none; color: var(--color-text); } .fila-cliente:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } .avatar { width: 44px; height: 44px; border-radius: 999px; flex: none; background: var(--color-accent-200); color: var(--color-accent-800); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-heading); } .tema-oscuro .avatar { background: var(--color-accent-800); color: var(--color-accent-200); } .punto-precision { width: 12px; height: 12px; border-radius: 50%; flex: none; } .prec-exacta { background: var(--color-success); } .prec-aprox { background: var(--color-warning); } .prec-sin { background: var(--color-neutral-400); } .fila-contacto { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--color-surface); border-radius: var(--radius-md); margin-bottom: 10px; text-decoration: none; color: var(--color-text); min-height: 44px; } .icono-redondo { width: 40px; height: 40px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--color-accent-200); color: var(--color-accent-800); } .icono-redondo.verde { background: var(--color-accent-2-200); color: var(--color-accent-2-800); } .tema-oscuro .icono-redondo { background: var(--color-accent-800); color: var(--color-accent-200); } .tema-oscuro .icono-redondo.verde { background: var(--color-accent-2-800); color: var(--color-accent-2-200); } .pie-fijo { position: sticky; bottom: var(--nav-h); z-index: 15; background: var(--color-bg); padding: 12px 18px; border-top: 1px solid var(--color-divider); } /* estado vacío / error */ .estado-centro { text-align: center; padding: 50px 30px 20px; } .estado-centro svg { margin: 0 auto 12px; opacity: .35; } /* esqueleto de carga */ .skeleton { background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-neutral-300) 37%, var(--color-surface) 63%); background-size: 400% 100%; animation: sk 1.4s infinite; border-radius: 8px; } @keyframes sk { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } } /* navegación inferior (móvil) */ .nav-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--nav-h); background: var(--color-bg); border-top: 1px solid var(--color-divider); display: flex; align-items: stretch; padding-bottom: env(safe-area-inset-bottom); } .nav-inferior a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; text-decoration: none; color: color-mix(in srgb, var(--color-text) 55%, transparent); min-width: 44px; } .nav-inferior a[aria-current="page"] { color: var(--color-accent); } .nav-inferior a:hover { color: var(--color-accent-600); } /* mapa */ .mapa-lleno { position: fixed; inset: 0 0 var(--nav-h) 0; z-index: 1; } .busqueda-flotante { position: fixed; top: 14px; left: 14px; right: 14px; z-index: 10; background: var(--color-bg); border-radius: 999px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 50px; } .busqueda-flotante input { border: none; background: transparent; outline: none; font-size: 16px; font-family: var(--font-body); color: var(--color-text); width: 100%; } .chips-flotantes { position: fixed; top: 74px; left: 14px; right: 14px; z-index: 10; padding: 0; } .chips-flotantes .tag { box-shadow: var(--shadow-sm); background: var(--color-bg); } .chips-flotantes .tag.tag-accent { background: var(--color-accent-100); } .tema-oscuro .chips-flotantes .tag.tag-accent { background: var(--color-accent-900); } .hoja-inferior { position: fixed; left: 0; right: 0; bottom: var(--nav-h); z-index: 25; background: var(--color-bg); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .25s ease; } .hoja-inferior.abierta { transform: translateY(0); } .hoja-asa { width: 36px; height: 4px; border-radius: 2px; background: var(--color-neutral-400); margin: 0 auto 14px; } .mapa-mini { height: 200px; border-radius: var(--radius-lg); overflow: hidden; } .mapa-form { height: 300px; border-radius: var(--radius-lg); overflow: hidden; } /* pines Leaflet propios (divIcon) */ .pin-cliente svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); } .pin-numero { background: transparent !important; border: none !important; } .pin-num-burbuja { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; box-shadow: var(--shadow-md); border: 2px solid #fff; line-height: 1; } .pin-num-burbuja.pin-num-sede { background: var(--color-text); font-size: 11px; } /* constructor de rutas: mapa + lista reordenable */ .mapa-constructor { height: 42vh; min-height: 220px; max-height: 360px; border-bottom: 1px solid var(--color-divider); z-index: 1; } .mapa-constructor .leaflet-control-attribution { font-size: 9px; } .constructor-panel { padding: 14px 20px calc(24px + var(--nav-h)); display: flex; flex-direction: column; gap: 14px; } .parada-item { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); min-height: 52px; touch-action: manipulation; background: var(--color-bg); } .parada-item.arrastrando { opacity: 0.45; } .parada-item.sobre { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .parada-asa { cursor: grab; color: color-mix(in srgb, var(--color-text) 40%, transparent); font-size: 16px; line-height: 1; padding: 8px 4px; user-select: none; } .parada-asa:active { cursor: grabbing; } .resumen-ruta { font-weight: 700; min-height: 1.4em; margin: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface); } .resumen-ruta.modo-sugerido { border-left: 3px solid var(--color-success); } .resumen-ruta.modo-manual { border-left: 3px solid var(--color-warning); } @media (min-width: 900px) { .constructor-layout { display: grid; grid-template-columns: 1fr 400px; grid-template-rows: auto 1fr; min-height: calc(100vh - 60px); } .constructor-layout .topbar { grid-column: 1 / -1; } .mapa-constructor { height: auto; min-height: 0; max-height: none; grid-row: 2; grid-column: 1; border-bottom: none; border-right: 1px solid var(--color-divider); } .constructor-panel { grid-row: 2; grid-column: 2; overflow-y: auto; max-height: calc(100vh - 70px); padding-bottom: 24px; } } /* flashes */ .avisos { position: fixed; top: 10px; left: 14px; right: 14px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .aviso { margin-inline: auto; padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-md); background: var(--color-surface); color: var(--color-text); } .aviso.error { background: var(--color-danger-bg); color: var(--color-danger-text); } .aviso.ok { background: var(--color-success-bg); color: var(--color-success-text); } /* ── escritorio ──────────────────────────────────────────────────────── */ @media (min-width: 900px) { .pantalla { padding-bottom: 24px; } .nav-inferior { display: none; } .mapa-lleno { inset: 0; } .hoja-inferior { bottom: 0; left: auto; right: 24px; width: 400px; border-radius: 24px 24px 0 0; } .pie-fijo { bottom: 0; } .nav-superior { display: flex !important; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); max-width: 1100px; margin-inline: auto; } .nav-superior .marca { font-family: var(--font-heading); font-size: 18px; margin-right: auto; color: inherit; text-decoration: none; } .nav-superior a:not(.marca) { color: inherit; text-decoration: none; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; } .nav-superior a:hover, .nav-superior a[aria-current="page"] { color: var(--color-accent); } /* vista dividida del mapa */ .division-mapa { display: flex; height: 100vh; } .division-mapa .lateral { width: 360px; flex: none; border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; min-height: 0; background: var(--color-bg); } .division-mapa .lateral .lista { overflow-y: auto; flex: 1; } .busqueda-flotante, .chips-flotantes { position: static; margin: 14px 16px 0; box-shadow: none; } .chips-flotantes { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; } } @media (max-width: 899.98px) { .nav-superior { display: none !important; } .division-mapa .lateral { display: none; } }