/* =========================================================================
 * Dashroute - Estilos globales de la aplicación
 * Sistema visual: tema oscuro empresarial/industrial. Navy profundo con
 * degradado sutil + naranja de marca como único acento cálido. Tipografía
 * Space Grotesk para títulos, Inter para texto, JetBrains Mono para
 * códigos de pedido / tracking. Animación reducida al mínimo: solo hover.
 * Firma visual: la "línea de ruta" punteada que enhebra la navegación y
 * las listas de paradas, como una hoja de reparto.
 * ========================================================================= */

:root {
    --primario: #1B2C42;        /* azul marino de marca */
    --primario-claro: #2E4568;
    --primario-oscuro: #0B131F; /* base del degradado de fondo */
    --secundario: #EC7E29;      /* naranja de marca */
    --secundario-claro: #F4A054;
    --secundario-oscuro: #C9611C;

    --fondo-app: #0E1826;                 /* base sólida detrás del degradado */
    --fondo-degradado: linear-gradient(160deg, #0A121D 0%, #0E1826 45%, #16233A 100%);
    --superficie: #16233A;      /* tarjetas / paneles */
    --superficie-2: #1C2D4A;    /* superficie elevada / hover de filas */
    --superficie-3: #223756;    /* bordes internos, inputs */
    --borde: rgba(255,255,255,.09);
    --borde-fuerte: rgba(255,255,255,.16);

    --texto: #E7ECF3;
    --texto-suave: #9FADC2;
    --texto-tenue: #6C7A91;

    --verde: #23A876;
    --rojo: #E0604E;
    --ambar: #E0A030;

    --fuente-titulo: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fuente-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fuente-codigo: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
body {
    font-family: var(--fuente-texto);
    color: var(--texto);
    margin: 0;
    background: var(--fondo-degradado);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--texto); }
p { color: var(--texto-suave); }
a { color: var(--secundario-claro); text-decoration: none; }
a:hover { color: var(--secundario); }
code, .dr-mono { font-family: var(--fuente-codigo); letter-spacing: .01em; }

/* --- Movimiento reducido al mínimo: solo hover, nada de animación de
   entrada ni transformaciones al pasar el mouse por tarjetas --- */
button, .dr-btn, .dr-btn-chico, .dr-nav a, .dr-sidebar-nav a, input, select {
    transition: background-color .15s ease, border-color .15s ease, filter .15s ease, color .15s ease;
}
.dr-btn:hover, .dr-btn-chico:hover { filter: brightness(1.1); }
.dr-btn:active, .dr-btn-chico:active { filter: brightness(.95); }
table.dr-tabla tbody tr:hover { background: var(--superficie-2); }
.dr-lista-item:hover, .dr-parada:hover { border-color: var(--borde-fuerte); }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }
.contenedor-angosto { max-width: 480px; margin: 0 auto; padding: 24px 20px; }

/* --- Fondo de login / registro: mismo degradado oscuro que toda la app --- */
.dr-pagina-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--fondo-degradado);
    position: relative;
    overflow: hidden;
}
.dr-pagina-auth::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 18% 12%, rgba(236,126,41,.07) 0%, transparent 42%),
        radial-gradient(circle at 88% 85%, rgba(46,69,104,.35) 0%, transparent 50%),
        url('/static/images/patron-navegacion.svg');
    background-size: cover, cover, 700px 700px;
    background-repeat: no-repeat, no-repeat, repeat;
    opacity: .8;
}
.dr-pagina-auth .contenedor-angosto { padding-top: 0; position: relative; z-index: 1; }

/* --- Barra superior de navegación (documentos públicos con topbar) --- */
.dr-topbar {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
}
.dr-topbar .marca { font-family: var(--fuente-titulo); font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; color: var(--texto); }
.dr-topbar .marca img { max-height: 30px; }
.dr-nav { display: flex; gap: 4px; }
.dr-nav a {
    padding: 9px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
    color: var(--texto-suave); text-decoration: none;
}
.dr-nav a:hover { background: var(--superficie-2); color: var(--texto); }
.dr-nav a.activo { background: var(--secundario); color: #fff; }
.dr-logout button {
    background: none; border: 1px solid var(--borde-fuerte); padding: 7px 14px; border-radius: 6px;
    cursor: pointer; font-size: 13px; color: var(--texto-suave); font-family: var(--fuente-texto);
}
.dr-logout button:hover { background: var(--superficie-2); color: var(--texto); }

/* =========================================================================
 * Layout de aplicación con sidebar (panel de empresa y superadmin)
 * ========================================================================= */
.dr-app { display: flex; min-height: 100vh; }

.dr-sidebar {
    width: 246px; flex-shrink: 0;
    background: #0A121D;
    border-right: 1px solid var(--borde);
    display: flex; flex-direction: column;
    padding: 22px 16px;
    position: sticky; top: 0; height: 100vh;
}
.dr-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; padding-bottom: 18px; }
.dr-sidebar-logo img { height: 32px; }
.dr-sidebar-logo .nombre { color: #fff; font-family: var(--fuente-titulo); font-weight: 700; font-size: 15px; line-height: 1.2; }
.dr-sidebar-logo .nombre small { display: block; font-family: var(--fuente-texto); color: var(--texto-tenue); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

/* --- Firma visual: línea de ruta punteada que enhebra la navegación --- */
.dr-sidebar-nav {
    display: flex; flex-direction: column; gap: 2px; flex: 1;
    position: relative;
    padding-left: 4px;
}
.dr-sidebar-nav::before {
    content: "";
    position: absolute;
    left: 21px; top: 20px; bottom: 20px;
    width: 0;
    border-left: 2px dashed rgba(255,255,255,.14);
}
.dr-sidebar-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
    color: var(--texto-suave); text-decoration: none;
    position: relative;
}
.dr-sidebar-nav a .ico {
    font-size: 14px; width: 20px; height: 20px; text-align: center; line-height: 20px;
    background: rgba(255,255,255,.06); border: 1px solid var(--borde); border-radius: 50%; position: relative; z-index: 1;
    flex-shrink: 0;
}
.dr-sidebar-nav a:hover { background: var(--superficie); color: var(--texto); }
.dr-sidebar-nav a.activo { background: var(--secundario); color: #fff; }
.dr-sidebar-nav a.activo .ico { background: #fff; border-color: #fff; color: var(--secundario); }

.dr-sidebar-footer { border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 10px; }
.dr-sidebar-footer form { margin: 0; }
.dr-sidebar-footer button {
    width: 100%; background: transparent; border: 1px solid var(--borde-fuerte); color: var(--texto-suave);
    padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; text-align: left;
    font-family: var(--fuente-texto);
}
.dr-sidebar-footer button:hover { background: var(--superficie); color: var(--texto); }

.dr-app-main { flex: 1; min-width: 0; }
.dr-app-topbar {
    background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between;
}
.dr-app-topbar h1 { margin: 0; font-size: 19px; }
.dr-app-topbar .subtitulo { color: var(--texto-tenue); font-size: 12.5px; margin-top: 2px; }
.dr-app-content { padding: 26px 28px 60px; }
.dr-app-content h1 { font-size: 21px; margin-bottom: 4px; }
.dr-app-content > p { color: var(--texto-suave); font-size: 13.5px; margin-top: 0; }

@media (max-width: 860px) {
    .dr-app { flex-direction: column; }
    .dr-sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 12px 16px; overflow-x: auto; }
    .dr-sidebar-logo { padding: 0 16px 0 0; border-bottom: none; margin-bottom: 0; }
    .dr-sidebar-nav { flex-direction: row; }
    .dr-sidebar-nav::before { left: 0; right: 0; top: 21px; bottom: auto; height: 0; border-left: none; border-top: 2px dashed rgba(255,255,255,.14); }
    .dr-sidebar-footer { border-top: none; border-left: 1px solid var(--borde); margin: 0 0 0 10px; padding: 0 0 0 10px; }
}

/* --- Login / Registro: tarjeta oscura elevada sobre el fondo degradado --- */
.dr-auth-banner {
    position: relative;
    border-radius: 10px 10px 0 0;
    padding: 36px 20px 60px;
    text-align: center;
    overflow: hidden;
    background-color: #060A10;
    background-image: url('/static/images/patron-navegacion.svg');
    background-size: 480px 480px;
    background-position: center;
    border: 1px solid var(--borde);
    border-bottom: none;
}
.dr-auth-banner .marca-grande { position: relative; z-index: 1; color: #fff; font-family: var(--fuente-titulo); font-weight: 700; font-size: 22px; }
.dr-card-login {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 32px 28px 28px;
    box-shadow: 0 24px 50px rgba(0,0,0,.45);
    margin: -40px 0 0;
}
.dr-card-login h1 { font-size: 23px; margin: 0 0 20px; }
.dr-campo { margin-bottom: 16px; text-align: left; }
.dr-campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--texto-suave); }
.dr-campo input, .dr-campo select {
    width: 100%; padding: 11px 13px; background: var(--superficie-3); border: 1px solid var(--borde-fuerte);
    border-radius: 6px; font-size: 14px; color: var(--texto);
    font-family: var(--fuente-texto);
}
.dr-campo input::placeholder { color: var(--texto-tenue); }
.dr-campo input:focus, .dr-campo select:focus { outline: 2px solid var(--secundario); border-color: var(--secundario); }
.dr-btn {
    width: 100%; background: var(--secundario); color: #fff; border: none;
    padding: 13px; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: var(--fuente-texto);
}
.dr-btn:focus-visible, .dr-btn-chico:focus-visible, .dr-sidebar-nav a:focus-visible, .dr-nav a:focus-visible { outline: 2px solid var(--secundario); outline-offset: 2px; }
.dr-btn-secundario { background: var(--superficie-3); color: var(--texto); }
.dr-error { background: rgba(224,96,78,.12); border: 1px solid rgba(224,96,78,.3); color: #F19585; border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.dr-exito { background: rgba(35,168,118,.12); border: 1px solid rgba(35,168,118,.3); color: #6FD3AC; border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.dr-nota { text-align: center; font-size: 13px; color: var(--texto-suave); margin-top: 18px; }
.dr-nota a { font-weight: 600; }

/* --- Landing --- */
.dr-hero {
    position: relative;
    text-align: center; padding: 100px 20px 110px;
    background: var(--fondo-degradado);
    color: #fff; overflow: hidden;
    border-bottom: 1px solid var(--borde);
}
.dr-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url('/static/images/patron-navegacion.svg');
    background-size: 620px 620px; background-repeat: repeat; background-position: center;
    opacity: .08;
}
.dr-hero > * { position: relative; z-index: 1; }
.dr-hero h1 { font-size: 42px; margin: 0 0 14px; letter-spacing: -0.02em; }
.dr-hero p { font-family: var(--fuente-texto); font-size: 18px; color: var(--texto-suave); max-width: 560px; margin: 0 auto 30px; line-height: 1.5; }
.dr-hero .botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dr-hero .botones a {
    padding: 14px 28px; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 15px;
    font-family: var(--fuente-texto);
}
.dr-hero .botones a.primario { background: var(--secundario); color: #fff; }
.dr-hero .botones a.secundario { border: 1.5px solid var(--borde-fuerte); color: #fff; }
.dr-hero .botones a.secundario:hover { background: var(--superficie); }

.dr-icono-feature {
    width: 58px; height: 58px; border-radius: 10px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--superficie); border: 1px solid var(--borde);
    color: var(--secundario);
}

/* Sección de features de la landing: fondo oscuro, no blanco */
.dr-hero + .contenedor { background: var(--fondo-app); }
.dr-hero + .contenedor h3 { color: var(--texto); }
.dr-hero + .contenedor p { color: var(--texto-suave); }

/* --- Header del panel de superadmin --- */
.dr-superadmin-header {
    background: #0A121D;
    border-bottom: 1px solid var(--borde);
    padding: 20px 28px;
    display: flex; align-items: center; justify-content: space-between;
}
.dr-superadmin-header .marca { display: flex; align-items: center; gap: 14px; }
.dr-superadmin-header .marca img { height: 46px; }
.dr-superadmin-header .titulo { color: #fff; font-family: var(--fuente-titulo); font-weight: 700; font-size: 19px; }
.dr-superadmin-header .subtitulo { color: var(--texto-tenue); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.dr-superadmin-logout {
    background: transparent; border: 1px solid var(--borde-fuerte); color: var(--texto);
    padding: 9px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
    font-family: var(--fuente-texto);
}
.dr-superadmin-logout:hover { background: var(--superficie); }

/* --- Tarjetas / paneles --- */
.dr-panel {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 18px;
}
.dr-panel h3 { font-size: 15px; }

/* Tarjetas de estadísticas: acento de color como borde superior, plano y sobrio */
.dr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin-bottom: 22px; }
.dr-stat {
    background: var(--superficie); border-radius: 8px; padding: 16px 18px; color: var(--texto);
    border: 1px solid var(--borde); border-top: 3px solid var(--texto-tenue);
}
.dr-stat .n { font-family: var(--fuente-titulo); font-size: 30px; font-weight: 700; display: block; line-height: 1.1; color: var(--texto); }
.dr-stat .l { font-size: 11px; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dr-stat.total { border-top-color: var(--primario-claro); }
.dr-stat.pendiente { border-top-color: var(--secundario); }
.dr-stat.enruta { border-top-color: #4A6690; }
.dr-stat.entregado { border-top-color: var(--verde); }
.dr-stat.repartidores { border-top-color: var(--ambar); }

.dr-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
@media (max-width: 1000px) { .dr-grid { grid-template-columns: 1fr; } }
#dr-mapa { height: 560px; border-radius: 8px; border: 1px solid var(--borde); filter: saturate(.85) brightness(.95); }

.dr-lista-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--superficie-2); border-left: 3px solid var(--texto-tenue); border-radius: 6px; padding: 10px 12px;
    margin-bottom: 8px; font-size: 13px; border-top: 1px solid var(--borde); border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
    color: var(--texto);
}
.dr-lista-item.disponible { border-left-color: var(--verde); }
.dr-lista-item.en_ruta { border-left-color: var(--ambar); }
.dr-lista-item.offline { border-left-color: var(--texto-tenue); }

.dr-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; }
.dr-badge.disponible { background: var(--verde); }
.dr-badge.en_ruta { background: var(--ambar); color: #26200a; }
.dr-badge.offline { background: var(--texto-tenue); }
.dr-badge.pendiente { background: var(--rojo); }
.dr-badge.asignado { background: var(--primario-claro); }
.dr-badge.entregado { background: var(--verde); }
.dr-badge.cancelado { background: var(--texto-tenue); }

.dr-form-inline {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin-bottom: 20px;
    background: var(--superficie); padding: 18px; border: 1px solid var(--borde); border-radius: 8px;
}
.dr-form-inline .campo { display: flex; flex-direction: column; }
.dr-form-inline label { font-weight: 600; font-size: 12px; margin-bottom: 4px; color: var(--texto-suave); }
.dr-form-inline input, .dr-form-inline select {
    padding: 9px 11px; background: var(--superficie-3); border: 1px solid var(--borde-fuerte);
    border-radius: 5px; font-size: 13px; font-family: var(--fuente-texto); color: var(--texto);
}

table.dr-tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
table.dr-tabla th, table.dr-tabla td { padding: 10px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--borde); color: var(--texto); }
table.dr-tabla th { background: var(--superficie-2); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
table.dr-tabla td.dr-mono, table.dr-tabla .dr-mono { font-size: 12px; color: var(--secundario-claro); font-weight: 600; }

.dr-btn-chico {
    display: inline-block; background: var(--superficie-3); color: var(--texto); border: 1px solid var(--borde-fuerte); padding: 7px 14px;
    border-radius: 5px; cursor: pointer; font-size: 13px; text-decoration: none; font-family: var(--fuente-texto); font-weight: 600;
}
.dr-btn-chico:hover { background: var(--secundario); border-color: var(--secundario); color: #fff; }

/* --- Panel del repartidor / rastreo (documentos públicos) ---
   Las paradas quedan enhebradas por la misma línea de ruta punteada
   que en la navegación lateral, reforzando la identidad de "ruta". */
.dr-lista-paradas { position: relative; padding-left: 6px; }
.dr-lista-paradas::before {
    content: "";
    position: absolute; left: 17px; top: 24px; bottom: 24px; width: 0;
    border-left: 2px dashed var(--borde-fuerte);
}
.dr-parada {
    position: relative;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 16px 16px 16px 40px;
    margin-bottom: 12px; color: var(--texto);
}
.dr-parada p { color: var(--texto-suave); margin: 4px 0; }
.dr-parada .numero {
    position: absolute; left: 4px; top: 16px;
    display: inline-flex; width: 26px; height: 26px; background: var(--primario-claro); color: #fff;
    border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
    font-family: var(--fuente-codigo); box-shadow: 0 0 0 4px var(--fondo-app);
}
.dr-parada.entregada .numero { background: var(--verde); }