/* ============================================================================
   Direcciones Frutaleza — consulta de direcciones para choferes
   Paleta y tipografia heredadas de la landing del sistema 2026.
============================================================================ */
:root {
    --fz-orange-50:  #FFF4EC;
    --fz-orange-100: #FFE2CC;
    --fz-orange-300: #FFB07A;
    --fz-orange-500: #F2682A;
    --fz-orange-600: #DC4F12;
    --fz-orange-700: #B33C0E;
    --fz-cream:      #FFF9F2;
    --fz-mint:       #6CD9B0;
    --fz-green-700:  #1E7A53;
    --fz-ink-900:    #1F1410;
    --fz-ink-700:    #3F2A20;
    --fz-ink-500:    #6B564B;
    --fz-ink-300:    #B8A89E;
    --fz-white:      #FFFFFF;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 8px rgba(31,20,16,.06);
    --shadow-md: 0 10px 28px rgba(242,104,42,.14);

    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Necesario: las tarjetas usan display:flex, que de lo contrario gana sobre el
   [hidden] del navegador y las mantiene visibles al filtrar. */
[hidden] { display: none !important; }

html, body { max-width: 100vw; overflow-x: clip; }

body {
    font-family: var(--font);
    color: var(--fz-ink-900);
    background: var(--fz-cream);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------- Topbar */
.topbar {
    position: sticky; top: 0; z-index: 30;
    background: var(--fz-ink-900);
    color: var(--fz-white);
    padding: 12px 0;
    padding-top: calc(12px + env(safe-area-inset-top));
}
.topbar-inner {
    max-width: 1080px; margin: 0 auto; padding: 0 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: var(--fz-orange-300); }
.brand-sub { font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.78); }
.brand-hint { font-size: .82rem; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 6px; }
.brand-hint .bi { color: var(--fz-orange-300); }

/* ----------------------------------------------------------- Layout */
.wrap { max-width: 1080px; margin: 0 auto; padding: 18px 18px 48px; }
.intro { margin: 6px 2px 14px; }
.intro h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.intro-sub { color: var(--fz-ink-500); font-size: .95rem; margin-top: 2px; }

/* ----------------------------------------------------------- Alerta */
.alerta {
    display: flex; gap: 12px; align-items: flex-start;
    background: #FFEDE8; border: 1px solid #F6C3B4; color: #8A2B12;
    padding: 14px 16px; border-radius: var(--radius-md); margin-bottom: 16px;
}
.alerta .bi { font-size: 1.2rem; margin-top: 1px; }
.alerta strong { display: block; }
.alerta-detalle { font-size: .82rem; opacity: .85; word-break: break-word; white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; display: block; margin-top: 4px; }

/* ----------------------------------------------------------- Buscador */
.search-row {
    position: sticky; top: 64px; z-index: 20;
    display: flex; align-items: stretch; gap: 10px;
}
.searchbar {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    background: var(--fz-white);
    border: 1.5px solid var(--fz-orange-100);
    border-radius: var(--radius-pill);
    padding: 12px 16px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.btn-buscar {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--fz-orange-500); color: var(--fz-white);
    font-family: var(--font); font-weight: 700; font-size: .95rem;
    padding: 0 22px; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform .08s ease, filter .15s ease;
}
.btn-buscar:active { transform: scale(.97); }
@media (hover: hover) { .btn-buscar:hover { filter: brightness(1.05); } }
.searchbar:focus-within { border-color: var(--fz-orange-500); box-shadow: var(--shadow-md); }
.searchbar > .bi { color: var(--fz-orange-500); font-size: 1.1rem; }
.searchbar input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: var(--font); font-size: 1.02rem; color: var(--fz-ink-900); min-width: 0;
}
.searchbar input::placeholder { color: var(--fz-ink-300); }
.btn-limpiar {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--fz-orange-50); color: var(--fz-ink-500);
}
.btn-limpiar:hover { background: var(--fz-orange-100); }

.conteo { color: var(--fz-ink-500); font-size: .85rem; margin: 12px 4px; }
.conteo #conteo-num { font-weight: 700; color: var(--fz-ink-900); }

/* ----------------------------------------------------------- Grid + cards */
.grid {
    display: grid; gap: 14px;
    grid-template-columns: 1fr;
}
.card {
    background: var(--fz-white);
    border: 1px solid #F0E5DB;
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 10px;
    /* Las tarjetas fuera de pantalla se omiten del layout/paint. Con 464 tarjetas
       esto elimina el lag al escribir / hacer scroll. El navegador reserva ~220px
       hasta que la tarjeta entra al viewport. */
    content-visibility: auto;
    contain-intrinsic-size: 0 220px;
}
.card-nombre { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }

.card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill);
}
.chip .bi { font-size: .82rem; }
.chip-vend { background: var(--fz-orange-50); color: var(--fz-orange-700); }
.chip-hora { background: #E9F7F0; color: var(--fz-green-700); }

.card-dir {
    display: flex; gap: 8px; align-items: flex-start;
    color: var(--fz-ink-700); font-size: .92rem;
}
.card-dir .bi { color: var(--fz-orange-500); margin-top: 2px; flex-shrink: 0; }

.card-tel { margin-top: 2px; }
.tel-num {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 1.02rem; color: var(--fz-ink-900);
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.tel-num .bi { color: var(--fz-orange-500); font-size: .95rem; }
.tel-vacio { color: var(--fz-ink-300); font-weight: 600; font-size: .9rem; }
.tel-vacio .bi { color: var(--fz-ink-300); }

/* ----------------------------------------------------------- Cargando */
.cargando {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 20px; gap: 14px; color: var(--fz-ink-500);
}
.cargando p { font-weight: 600; font-size: 1rem; }
.spinner {
    width: 48px; height: 48px;
    border: 4px solid var(--fz-orange-100);
    border-top-color: var(--fz-orange-500);
    border-radius: 50%;
    animation: dir-spin .8s linear infinite;
}
@keyframes dir-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2s; }
}

/* ----------------------------------------------------------- Sin resultados */
.sin-resultados { text-align: center; color: var(--fz-ink-500); padding: 48px 16px; }
.sin-resultados .bi { font-size: 2.4rem; color: var(--fz-ink-300); display: block; margin-bottom: 8px; }
.sin-resultados strong { color: var(--fz-ink-900); }

/* ----------------------------------------------------------- Responsive */
@media (min-width: 620px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .intro h1 { font-size: 1.8rem; }
}