/* ─────────────────────────────────────────────────────────────────────────
   Quipu Go — Design tokens Puna/NOA (Sprint 6 D8)
   Portado del prototipo Claude Design. Carga ANTES que Bootstrap para que
   nuestras vistas nuevas usen estos colores, y Bootstrap sigue pintando las
   vistas Admin sin tocar.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* DAY — bone / ink */
    --qr-bg:           #EFE9DC;
    --qr-bg-2:         #E5DDCB;
    --qr-surface:      #FBF7EE;
    --qr-surface-2:    #F2ECDD;
    --qr-surface-3:    #E8E0CB;
    --qr-ink:          #0E0E0E;
    --qr-ink-2:        #2A2A28;
    --qr-ink-3:        #6A655A;
    --qr-ink-4:        #9D978A;
    --qr-line:         rgba(14, 14, 14, 0.10);
    --qr-line-2:       rgba(14, 14, 14, 0.18);
    --qr-line-strong:  rgba(14, 14, 14, 0.35);

    /* Brand: cochinilla / rojo tierra puna */
    --qr-accent:       #C13818;
    --qr-accent-deep:  #8E230A;
    --qr-accent-soft:  #EAC0B3;
    --qr-accent-tint:  #F4DACE;
    --qr-accent-ink:   #FFFFFF;

    /* Functional */
    --qr-ok:           #1E6F47;
    --qr-warn:         #C7881A;
    --qr-danger:       #A52A14;
    --qr-gold:         #E4B33A;

    /* Overlay para chrome sobre mapa */
    --qr-overlay:      rgba(14, 14, 14, 0.55);
    --qr-scrim:        rgba(14, 14, 14, 0.42);

    /* Geometry */
    --qr-r-xs:         6px;
    --qr-r-sm:         10px;
    --qr-r-md:         14px;
    --qr-r-lg:         20px;
    --qr-r-pill:       999px;

    /* Type */
    --qr-font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --qr-font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="night"] {
    --qr-bg:           #0A0A0C;
    --qr-bg-2:         #07070A;
    --qr-surface:      #14141A;
    --qr-surface-2:    #1C1C24;
    --qr-surface-3:    #25252E;
    --qr-ink:          #F2ECDD;
    --qr-ink-2:        #DDD6C4;
    --qr-ink-3:        #8E887A;
    --qr-ink-4:        #5E594F;
    --qr-line:         rgba(242, 236, 221, 0.10);
    --qr-line-2:       rgba(242, 236, 221, 0.18);
    --qr-line-strong:  rgba(242, 236, 221, 0.32);
    --qr-accent:       #E85A38;
    --qr-accent-deep:  #C13818;
    --qr-accent-soft:  #4A2418;
    --qr-accent-tint:  #2A1410;
    --qr-overlay:      rgba(0, 0, 0, 0.65);
    --qr-scrim:        rgba(0, 0, 0, 0.55);
}

/* ─────────── Typography utilities ─────────── */
.qr-display {
    font-family: var(--qr-font-sans);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 0.95;
}
.qr-num {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
}
.qr-mono {
    font-family: var(--qr-font-mono);
    font-feature-settings: "tnum" 1;
}
.qr-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qr-ink-3);
}
.qr-label-strong { color: var(--qr-ink); }

/* ─────────── Card / surface ─────────── */
.qr-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--qr-r-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.qr-pill-ink     { background: var(--qr-ink);     color: var(--qr-surface); }
.qr-pill-accent  { background: var(--qr-accent);  color: var(--qr-accent-ink); }
.qr-pill-ok      { background: var(--qr-ok);      color: #fff; }
.qr-pill-warn    { background: var(--qr-warn);    color: #1a1409; }
.qr-pill-soft    { background: var(--qr-surface-2); color: var(--qr-ink); }
.qr-pill-outline { background: transparent;       color: var(--qr-ink); border: 1px solid var(--qr-line-2); }

/* Mapa Leaflet: skin oscuro automatico cuando data-theme=night */
[data-theme="night"] .leaflet-container { background: #0A0A0C; }
[data-theme="night"] .leaflet-tile {
    filter: hue-rotate(190deg) invert(0.94) saturate(0.55) brightness(0.85) contrast(0.95);
}

/* Pulse para indicadores en vivo */
@keyframes qr-pulse-accent {
    0%   { box-shadow: 0 0 0 0 rgba(193, 56, 24, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(193, 56, 24, 0); }
    100% { box-shadow: 0 0 0 0 rgba(193, 56, 24, 0); }
}
[data-theme="night"] @keyframes qr-pulse-accent {
    0%   { box-shadow: 0 0 0 0 rgba(232, 90, 56, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(232, 90, 56, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 90, 56, 0); }
}

/* Entry animation para bottom sheets */
@keyframes qr-rise {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.qr-rise { animation: qr-rise 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Sheet handle */
.qr-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--qr-line-strong);
    margin: 0 auto;
}

/* Toggle dia/noche sun/moon en navbar */
.qr-theme-toggle {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    width: 36px; height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.qr-theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.qr-theme-toggle svg { width: 18px; height: 18px; }

/* ─────────────────────────────────────────────────────────────────────────
   Accesibilidad (Plan armonizacion #4) — carga global vía quipu-tokens.css,
   aplica a TODAS las vistas (Index, Cliente, Chofer, Admin).
   ───────────────────────────────────────────────────────────────────────── */

/* Foco visible por teclado: anillo cochinilla en controles interactivos.
   Solo :focus-visible (no :focus) => no molesta al mouse/touch, solo teclado. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--qr-accent);
    outline-offset: 2px;
    border-radius: var(--qr-r-xs);
}

/* Targets tactiles comodos (Apple 44pt / Material 48dp): los botones redondos
   de chrome (toggle dia/noche, iconos de topbar) estan definidos a 36-40px en
   varias vistas. min-* clampea hacia arriba SIN tocar cada pagina ni romper el
   centrado flex del icono. Clave para operar con guantes en la Puna. */
.qr-theme-toggle,
.qr-iconbtn,
.qr-chip {
    min-width: 44px;
    min-height: 44px;
}