/* =========================================================================
 * Dashroute - Estilos globales de la aplicación
 * Rediseño 2026: navy profundo casi negro + naranja como único acento
 * cálido, tipografía plana (sin display font), iconografía Tabler Icons
 * en vez de emoji, badges "suaves" (texto de color sobre fondo tintado
 * oscuro) y tarjetas con borde fino en vez de sombras marcadas.
 * ========================================================================= */

:root {
    --primario: #16283F;        /* navy de las tarjetas/paneles */
    --primario-claro: #3A7BD5;  /* azul de acento secundario (badges "en camino") */
    --primario-oscuro: #060D18; /* base del degradado de fondo */
    --secundario: #EC7D31;      /* naranja de marca */
    --secundario-claro: #F4A164;
    --secundario-oscuro: #C8792F;

    --fondo-app: #0A121F;                 /* base sólida detrás del degradado */
    --fondo-degradado: linear-gradient(165deg, #060D18 0%, #0A121F 45%, #0D1B2F 100%);
    --superficie: #0F1A2C;      /* tarjetas / paneles */
    --superficie-2: #16233A;    /* superficie elevada / hover de filas */
    --superficie-3: #1B2C46;    /* bordes internos, inputs */
    --borde: #1C2A3D;
    --borde-fuerte: #2C4160;

    --texto: #EEF2F7;
    --texto-suave: #93A1B5;
    --texto-tenue: #5C6C82;

    --verde: #4A9E6E;
    --verde-tinte: #10261C;
    --rojo: #E2574A;
    --rojo-tinte: #2A1512;
    --ambar: #EC7D31;
    --ambar-tinte: #2B1C0E;
    --azul-tinte: #14233B;

    --fuente-titulo: '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: 500; letter-spacing: -0.01em; margin: 0 0 4px; 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; }

/* --- Iconos: Tabler Icons (webfont), acento naranja por defecto --- */
i.ti { line-height: 1; }
.dr-ico-titulo { font-size: 16px; vertical-align: -2px; margin-right: 8px; color: var(--secundario); }

/* --- Movimiento reducido al mínimo: solo hover --- */
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.08); }
.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: 1160px; margin: 0 auto; padding: 24px 20px; }
.contenedor-angosto { max-width: 460px; margin: 0 auto; padding: 24px 20px; }

/* --- Fondo de login / registro --- */
.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,125,49,.06) 0%, transparent 42%),
        radial-gradient(circle at 88% 85%, rgba(58,123,213,.10) 0%, transparent 50%);
}
.dr-pagina-auth .contenedor-angosto { padding-top: 0; position: relative; z-index: 1; }

/* --- Marca / logo: cuadrado redondeado naranja con ícono + wordmark --- */
.dr-marca-lockup { display: flex; align-items: center; gap: 10px; }
.dr-marca-icono {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
    background: var(--secundario); color: var(--fondo-app);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.dr-marca-lockup .texto { color: var(--texto); font-size: 14px; font-weight: 600; letter-spacing: .4px; }
.dr-marca-lockup.chico .dr-marca-icono { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
.dr-marca-lockup.chico .texto { font-size: 12px; }
.dr-marca-lockup.grande .dr-marca-icono { width: 40px; height: 40px; border-radius: 9px; font-size: 21px; }
.dr-marca-lockup.grande .texto { font-size: 18px; }

/* --- 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-nav { display: flex; gap: 4px; }
.dr-nav a {
    padding: 9px 16px; border-radius: 6px; font-size: 13px; font-weight: 500;
    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: var(--fondo-app); }
.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: 220px; flex-shrink: 0;
    background: #060D18;
    border-right: 1px solid var(--borde);
    display: flex; flex-direction: column;
    padding: 20px 14px;
    position: sticky; top: 0; height: 100vh;
}
.dr-sidebar-logo { padding: 0 8px 18px; border-bottom: 1px solid var(--borde); margin-bottom: 12px; padding-bottom: 18px; }
.dr-sidebar-logo .nombre { color: var(--texto); font-family: var(--fuente-titulo); font-weight: 600; font-size: 14px; line-height: 1.3; }
.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; margin-top: 2px; }
.dr-sidebar-logo img { max-height: 26px; margin-bottom: 8px; }

.dr-sidebar-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.dr-sidebar-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
    color: var(--texto-suave); text-decoration: none;
}
.dr-sidebar-nav a i.ti { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.dr-sidebar-nav a:hover { background: var(--superficie); color: var(--texto); }
.dr-sidebar-nav a.activo { background: var(--superficie-2); color: var(--texto); }
.dr-sidebar-nav a.activo i.ti { color: var(--secundario); }

.dr-sidebar-footer { border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 8px; }
.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: 9px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; text-align: left;
    font-family: var(--fuente-texto); display: flex; align-items: center; gap: 8px;
}
.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: 17px; }
.dr-app-topbar .subtitulo { color: var(--texto-tenue); font-size: 12px; margin-top: 2px; }
.dr-app-content { padding: 24px 28px 60px; }
.dr-app-content h1 { font-size: 17px; margin-bottom: 2px; font-weight: 500; }
.dr-app-content > p { color: var(--texto-tenue); font-size: 12.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: 10px 14px; overflow-x: auto; }
    .dr-sidebar-logo { padding: 0 14px 0 0; border-bottom: none; margin-bottom: 0; }
    .dr-sidebar-nav { flex-direction: row; }
    .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: 34px 20px 56px;
    text-align: center;
    overflow: hidden;
    background-color: #060A10;
    border: 1px solid var(--borde);
    border-bottom: none;
}
.dr-auth-banner .marca-grande { position: relative; z-index: 1; }
.dr-card-login {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 30px 26px 26px;
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
    margin: -38px 0 0;
}
.dr-card-login h1 { font-size: 20px; margin: 0 0 18px; font-weight: 500; }
.dr-campo { margin-bottom: 15px; text-align: left; }
.dr-campo label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; color: var(--texto-suave); }
.dr-campo input, .dr-campo select {
    width: 100%; padding: 10px 12px; background: var(--superficie-3); border: 1px solid var(--borde-fuerte);
    border-radius: 6px; font-size: 13.5px; 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: var(--fondo-app); border: none;
    padding: 12px; border-radius: 6px; font-size: 14px; font-weight: 600; 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(226,87,74,.12); border: 1px solid rgba(226,87,74,.3); color: #F1948B; border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.dr-exito { background: rgba(74,158,110,.12); border: 1px solid rgba(74,158,110,.3); color: #7FCB9F; 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;
    padding: 90px 20px 80px;
    background: var(--fondo-degradado);
    overflow: hidden;
    border-bottom: 1px solid var(--borde);
}
.dr-hero > * { position: relative; z-index: 1; }
.dr-hero-grid {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.dr-hero-texto { text-align: left; }
.dr-hero .dr-marca-lockup { justify-content: flex-start; margin-bottom: 40px; }
.dr-hero .eyebrow { color: var(--texto-tenue); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 18px; }
.dr-hero h1 {
    font-size: clamp(34px, 4.2vw, 54px); font-weight: 700; margin: 0 0 22px;
    letter-spacing: -0.03em; line-height: 1.1; color: var(--texto);
}
.dr-hero h1 .resalte {
    background: linear-gradient(100deg, var(--secundario) 20%, #FFB877 60%, var(--secundario) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dr-hero p { font-family: var(--fuente-texto); font-size: 17px; color: var(--texto-suave); max-width: 480px; margin: 0 0 32px; line-height: 1.7; }
.dr-hero .botones { display: flex; gap: 12px; flex-wrap: wrap; }
.dr-hero .botones a {
    padding: 14px 28px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 15px;
    font-family: var(--fuente-texto);
}
.dr-hero .botones a.primario { background: var(--secundario); color: var(--fondo-app); box-shadow: 0 12px 30px -10px rgba(236,125,49,.6); }
.dr-hero .botones a.secundario { border: 1px solid var(--borde-fuerte); color: var(--texto); }
.dr-hero .botones a.secundario:hover { background: var(--superficie); }
.dr-hero-confianza {
    display: flex; gap: 20px; flex-wrap: wrap; margin-top: 26px;
    font-size: 12.5px; color: var(--texto-tenue);
}
.dr-hero-confianza span { display: flex; align-items: center; gap: 6px; }
.dr-hero-confianza i { color: var(--verde); font-size: 15px; }

.dr-icono-feature {
    width: 46px; height: 46px; 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); font-size: 21px;
}

.dr-hero + .contenedor { background: var(--fondo-app); }
.dr-hero + .contenedor h3 { color: var(--texto); }
.dr-hero + .contenedor p { color: var(--texto-suave); }

@media (max-width: 880px) {
    .dr-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .dr-hero-texto { text-align: center; }
    .dr-hero .dr-marca-lockup { justify-content: center; }
    .dr-hero p { margin-left: auto; margin-right: auto; }
    .dr-hero .botones { justify-content: center; }
    .dr-hero-confianza { justify-content: center; }
    .dr-hero-visual { margin-top: 40px; }
}

/* --- Maqueta del producto en el hero (ilustrativa, no una captura real) --- */
.dr-mockup-frame {
    background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 14px;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02);
    overflow: hidden;
}
.dr-mockup-topbar {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    background: var(--superficie-2); border-bottom: 1px solid var(--borde);
}
.dr-mockup-dot { width: 9px; height: 9px; border-radius: 50%; }
.dr-mockup-dot.rojo { background: #E0604E; }
.dr-mockup-dot.amarillo { background: #E8B84B; }
.dr-mockup-dot.verde { background: #4CAF7D; }
.dr-mockup-url {
    margin-left: 10px; background: var(--superficie); border-radius: 5px; padding: 3px 12px;
    font-size: 11px; color: var(--texto-tenue); font-family: var(--fuente-codigo);
}
.dr-mockup-cuerpo { display: flex; height: 320px; }
.dr-mockup-sidebar {
    width: 42px; flex-shrink: 0; background: #0B1524; border-right: 1px solid var(--borde-fuerte);
    display: flex; flex-direction: column; align-items: center; padding-top: 16px; gap: 18px;
}
.dr-mockup-sidebar i { color: var(--texto-tenue); font-size: 17px; }
.dr-mockup-sidebar i.activo { color: var(--secundario); }
.dr-mockup-mapa {
    position: relative; flex: 1; overflow: hidden;
    background:
        radial-gradient(circle at 25% 30%, rgba(58,123,213,.16), transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(236,125,49,.12), transparent 55%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px);
}
.dr-mockup-mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dr-mockup-mapa .linea { fill: none; stroke: var(--borde-fuerte); stroke-width: 2.5; stroke-dasharray: 5 7; stroke-linecap: round; }
.dr-mockup-mapa .parada { fill: var(--superficie-2); stroke: var(--texto-tenue); stroke-width: 1.5; }
.dr-mockup-mapa .vehiculo-grupo { offset-rotate: 0deg; animation: dr-recorrer-ruta 6s linear infinite; }
.dr-mockup-mapa .vehiculo-halo { fill: var(--secundario); opacity: .25; }
.dr-mockup-mapa .vehiculo { fill: var(--secundario); }
.dr-mockup-stat {
    position: absolute; background: rgba(17,25,42,.9); backdrop-filter: blur(6px);
    border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 8px 12px;
    font-size: 11px; color: var(--texto-suave); box-shadow: 0 8px 18px -6px rgba(0,0,0,.5);
}
.dr-mockup-stat b { display: block; font-size: 17px; color: var(--texto); font-family: var(--fuente-texto); font-weight: 700; }
.dr-mockup-stat.stat-1 { top: 14px; left: 14px; }
.dr-mockup-stat.stat-2 { top: 14px; left: 108px; }
.dr-mockup-chip-repartidor {
    position: absolute; bottom: 14px; left: 14px; display: flex; align-items: center; gap: 8px;
    background: rgba(17,25,42,.9); backdrop-filter: blur(6px); border: 1px solid var(--borde-fuerte);
    border-radius: 20px; padding: 6px 14px 6px 8px; font-size: 11.5px; color: var(--texto);
}
.dr-mockup-chip-repartidor .avatar {
    width: 22px; height: 22px; border-radius: 50%; background: var(--secundario);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.dr-mockup-chip-repartidor .punto-vivo {
    width: 7px; height: 7px; border-radius: 50%; background: var(--verde);
    box-shadow: 0 0 0 0 rgba(52,196,137,.6); animation: dr-latido-vivo 1.8s infinite;
}
@keyframes dr-latido-vivo {
    0% { box-shadow: 0 0 0 0 rgba(52,196,137,.55); }
    70% { box-shadow: 0 0 0 7px rgba(52,196,137,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,196,137,0); }
}
.dr-mockup-frame { animation: dr-entra-arriba .7s cubic-bezier(.16,1,.3,1) .25s both; }

.dr-paso-label { color: var(--secundario); font-size: 10px; font-weight: 600; letter-spacing: .5px; margin-bottom: 6px; text-transform: uppercase; }

.dr-plan-card { text-align: center; padding: 22px 20px; position: relative; }
.dr-plan-card.destacado { border-color: var(--secundario) !important; border-width: 1.5px; }
.dr-plan-card .etiqueta-destacado {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--secundario); color: var(--fondo-app); font-size: 9.5px; font-weight: 700;
    padding: 3px 10px; border-radius: 4px; letter-spacing: .4px; white-space: nowrap;
}
.dr-plan-card .plan-nombre { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 8px; }
.dr-plan-card.destacado .plan-nombre { color: var(--secundario-claro); }
.dr-plan-card .plan-precio { font-family: var(--fuente-titulo); font-size: 26px; font-weight: 500; color: var(--texto); }
.dr-plan-card .plan-precio span { font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.dr-plan-card .plan-detalle { color: var(--texto-suave); font-size: 12.5px; margin: 8px 0 0; }

/* --- Header del panel de superadmin --- */
.dr-superadmin-header {
    background: #060D18;
    border-bottom: 1px solid var(--borde);
    padding: 18px 28px;
    display: flex; align-items: center; justify-content: space-between;
}
.dr-superadmin-header .marca { display: flex; align-items: center; gap: 12px; }
.dr-superadmin-header .titulo { color: var(--texto); font-family: var(--fuente-titulo); font-weight: 500; font-size: 16px; }
.dr-superadmin-header .subtitulo { color: var(--texto-tenue); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.dr-superadmin-logout {
    background: transparent; border: 1px solid var(--borde-fuerte); color: var(--texto);
    padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 500;
    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: 14px; font-weight: 500; }

/* Tarjetas de estadísticas: acento de color como borde izquierdo fino */
.dr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; margin-bottom: 20px; }
.dr-stat {
    background: var(--superficie); border-radius: 7px; padding: 13px 15px; color: var(--texto);
    border: 1px solid var(--borde); border-left: 2px solid var(--texto-tenue);
}
.dr-stat .n { font-family: var(--fuente-titulo); font-size: 22px; font-weight: 500; display: block; line-height: 1.1; color: var(--texto); }
.dr-stat .l { font-size: 11px; color: var(--texto-tenue); font-weight: 500; margin-top: 2px; }
.dr-stat.total { border-left-color: var(--primario-claro); }
.dr-stat.pendiente { border-left-color: var(--secundario); }
.dr-stat.enruta { border-left-color: var(--primario-claro); }
.dr-stat.entregado { border-left-color: var(--verde); }
.dr-stat.repartidores { border-left-color: var(--texto-suave); }

.dr-grid { display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
@media (max-width: 1000px) { .dr-grid { grid-template-columns: 1fr; } }
#dr-mapa { height: 520px; border-radius: 7px; border: 1px solid var(--borde); filter: saturate(.8) brightness(.92); }

.dr-lista-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--superficie-2); border-radius: 6px; padding: 9px 11px;
    margin-bottom: 6px; font-size: 12.5px;
    color: var(--texto);
}

.dr-badge { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 10.5px; font-weight: 600; }
.dr-badge.disponible { background: var(--verde-tinte); color: var(--verde); }
.dr-badge.en_ruta { background: var(--ambar-tinte); color: var(--secundario-claro); }
.dr-badge.offline { background: var(--superficie-3); color: var(--texto-tenue); }
.dr-badge.pendiente { background: var(--rojo-tinte); color: #F1948B; }
.dr-badge.asignado { background: var(--azul-tinte); color: var(--primario-claro); }
.dr-badge.entregado { background: var(--verde-tinte); color: var(--verde); }
.dr-badge.cancelado { background: var(--superficie-3); color: var(--texto-tenue); }

.dr-form-inline {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin-bottom: 20px;
    background: var(--superficie); padding: 16px; border: 1px solid var(--borde); border-radius: 8px;
}
.dr-form-inline .campo { display: flex; flex-direction: column; }
.dr-form-inline label { font-weight: 500; font-size: 11.5px; 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: 12.5px; border-bottom: 1px solid var(--borde); color: var(--texto); }
table.dr-tabla th { background: transparent; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue); }
table.dr-tabla td.dr-mono, table.dr-tabla .dr-mono { font-size: 11.5px; color: var(--secundario-claro); font-weight: 600; }
table.dr-tabla .dr-accion { color: var(--texto-tenue); margin-left: 12px; font-size: 15px; }
table.dr-tabla .dr-accion:hover { color: var(--secundario); }
table.dr-tabla tr:last-child td { border-bottom: none; }

.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: 12.5px; text-decoration: none; font-family: var(--fuente-texto); font-weight: 500;
}
.dr-btn-chico:hover { background: var(--secundario); border-color: var(--secundario); color: var(--fondo-app); }

/* --- Panel del repartidor / rastreo (documentos públicos) --- */
.dr-lista-paradas { position: relative; padding-left: 4px; }
.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: 10px; top: 16px;
    display: inline-flex; width: 24px; height: 24px; background: var(--secundario); color: var(--fondo-app);
    border-radius: 50%; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
    font-family: var(--fuente-codigo);
}
.dr-parada.entregada { opacity: .55; }
.dr-parada.entregada .numero { background: var(--verde); }

/* =========================================================================
 * Animaciones de la landing pública — todo scopeado a estas clases
 * puntuales (dr-hero, dr-icono-feature, dr-plan-card, [data-reveal]), no
 * toca dr-panel/dr-btn ni nada que se comparta con el panel logueado.
 * ========================================================================= */
@keyframes dr-entra-arriba { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dr-recorrer-ruta { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes dr-pulso-borde { 0%, 100% { box-shadow: 0 0 0 0 rgba(236,125,49,.35); } 50% { box-shadow: 0 0 0 7px rgba(236,125,49,0); } }
@keyframes dr-flotar-blob { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-16px) scale(1.06); } }

.dr-hero-fondo-blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .18;
    background: var(--secundario); width: 340px; height: 340px; top: -120px; left: 50%;
    margin-left: -420px; animation: dr-flotar-blob 16s ease-in-out infinite; pointer-events: none;
}
.dr-hero-ruta-fondo { position: absolute; inset: 0; pointer-events: none; opacity: .3; }
.dr-hero-ruta-fondo svg { width: 100%; height: 100%; }
.dr-hero-ruta-fondo .linea { fill: none; stroke: var(--borde-fuerte); stroke-width: 2; stroke-dasharray: 6 8; stroke-linecap: round; }
.dr-hero-ruta-fondo .parada { fill: var(--superficie-2); stroke: var(--texto-tenue); stroke-width: 1.5; }
.dr-hero-ruta-fondo .vehiculo-grupo { offset-rotate: 0deg; animation: dr-recorrer-ruta 9s linear infinite; }
.dr-hero-ruta-fondo .vehiculo { fill: var(--secundario); }

.dr-hero .dr-marca-lockup, .dr-hero .eyebrow, .dr-hero h1, .dr-hero p, .dr-hero .botones {
    animation: dr-entra-arriba .7s cubic-bezier(.16,1,.3,1) both;
}
.dr-hero .eyebrow { animation-delay: .05s; }
.dr-hero h1 { animation-delay: .12s; }
.dr-hero p { animation-delay: .2s; }
.dr-hero .botones { animation-delay: .28s; }
.dr-hero .botones a { transition: transform .18s ease, box-shadow .2s ease; }
.dr-hero .botones a.primario:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(236,125,49,.5); }
.dr-hero .botones a.secundario:hover { transform: translateY(-2px); }

[data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
[data-reveal].dr-visible { opacity: 1; transform: translateY(0); }

.dr-icono-feature { transition: transform .25s ease; }
.dr-icono-feature:hover { transform: translateY(-3px) scale(1.07); }

.dr-plan-card { transition: transform .25s ease, border-color .25s ease; }
.dr-plan-card:hover { transform: translateY(-4px); }
.dr-plan-card.destacado { animation: dr-pulso-borde 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .dr-hero *, [data-reveal], .dr-plan-card.destacado, .dr-hero-fondo-blob, .dr-hero-ruta-fondo .vehiculo-grupo {
        animation: none !important; transition: none !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
 * Animaciones de las pantallas de acceso (login, registro, elegir plan,
 * confirmación) — todo scopeado bajo .dr-pagina-auth para no tocar ni un
 * pixel del panel logueado ni del resto del sitio, aunque compartan
 * clases como .dr-campo o .dr-btn.
 * ========================================================================= */
@keyframes dr-auth-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dr-auth-logo-entra { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes dr-auth-recorrer { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.dr-pagina-auth-ruta-fondo { position: absolute; inset: 0; overflow: hidden; opacity: .16; pointer-events: none; z-index: 0; }
.dr-pagina-auth-ruta-fondo svg { width: 100%; height: 100%; }
.dr-pagina-auth-ruta-fondo .linea { fill: none; stroke: var(--secundario); stroke-width: 2; stroke-dasharray: 6 8; stroke-linecap: round; }
.dr-pagina-auth-ruta-fondo .parada { fill: var(--secundario); }
.dr-pagina-auth-ruta-fondo .vehiculo-grupo { offset-rotate: 0deg; animation: dr-auth-recorrer 10s linear infinite; }
.dr-pagina-auth-ruta-fondo .vehiculo { fill: var(--texto); }

.dr-pagina-auth .contenedor-angosto { position: relative; z-index: 1; }
.dr-pagina-auth .dr-auth-banner .marca-grande { animation: dr-auth-logo-entra .55s cubic-bezier(.16,1,.3,1) both; }
.dr-pagina-auth .dr-card-login { animation: dr-auth-entra .6s cubic-bezier(.16,1,.3,1) .1s both; }
.dr-pagina-auth .dr-card-login h1,
.dr-pagina-auth .dr-card-login > p,
.dr-pagina-auth .dr-card-login form,
.dr-pagina-auth .dr-card-login .dr-nota {
    animation: dr-auth-entra .5s cubic-bezier(.16,1,.3,1) both;
}
.dr-pagina-auth .dr-card-login > p { animation-delay: .16s; }
.dr-pagina-auth .dr-card-login form { animation-delay: .22s; }
.dr-pagina-auth .dr-card-login .dr-nota { animation-delay: .3s; }

.dr-pagina-auth .dr-campo input,
.dr-pagina-auth .dr-campo select {
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dr-pagina-auth .dr-campo input:focus,
.dr-pagina-auth .dr-campo select:focus {
    box-shadow: 0 0 0 4px rgba(236,125,49,.15);
}
.dr-pagina-auth .dr-btn { transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.dr-pagina-auth .dr-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(236,125,49,.45); }
.dr-pagina-auth .dr-btn:active { transform: scale(.98); }

.dr-pagina-auth .dr-tarjeta-plan { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.dr-pagina-auth .dr-tarjeta-plan:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
    .dr-pagina-auth .dr-auth-banner .marca-grande,
    .dr-pagina-auth .dr-card-login,
    .dr-pagina-auth .dr-card-login h1,
    .dr-pagina-auth .dr-card-login > p,
    .dr-pagina-auth .dr-card-login form,
    .dr-pagina-auth .dr-card-login .dr-nota,
    .dr-pagina-auth-ruta-fondo .vehiculo-grupo {
        animation: none !important;
    }
}