/* =========================================================
   PORTAL LOGISTICA - Diseño moderno tipo Boxfull
   ========================================================= */

:root {
    --pl-primary: #2563EB;
    --pl-primary-dark: #1D4ED8;
    --pl-primary-light: #EFF6FF;
    --pl-primary-soft: #DBEAFE;
    --pl-accent: #FACC15;
    --pl-accent-dark: #EAB308;
    --pl-accent-light: #FEF9C3;
    --pl-hero-highlight: #FB923C;
    --pl-teal: #06B6D4;
    --pl-teal-light: #CFFAFE;
    --pl-purple: #7C3AED;
    --pl-purple-light: #EDE9FE;
    --pl-dark: #1F2937;
    --pl-gray: #6B7280;
    --pl-border: #E5E7EB;
    --pl-bg: #EEF3FC;
    --pl-success: #16A34A;
    --pl-success-light: #DCFCE7;
    --pl-radius: 12px;
    --pl-shadow: 0 1px 3px rgba(30,58,138,0.06), 0 1px 2px rgba(30,58,138,0.04);
    --pl-shadow-lg: 0 10px 26px rgba(30,58,138,0.12);
    --pl-gradient-primary: linear-gradient(135deg, #2563EB 0%, #4F86F7 55%, #38BDF8 100%);
    --pl-gradient-accent: linear-gradient(135deg, #FDE047 0%, #FACC15 55%, #EAB308 100%);
    --pl-gradient-page: linear-gradient(160deg, #EFF6FF 0%, #F5F3FF 45%, #EEF3FC 100%);
    --pl-sidebar-start: #1E4FD6;
    --pl-sidebar-end: #163C9E;
    --pl-gradient-sidebar: linear-gradient(180deg, var(--pl-sidebar-start) 0%, var(--pl-sidebar-end) 100%);

    /* Degradado del panel lateral (MudDrawer, ver regla .mud-drawer mas abajo):
       azul navy intenso arriba, suavizandose hacia un azul claro abajo (sin
       morado). El AppBar usa su propio degradado corto que termina en el
       mismo tono con el que este arranca (#172554), para que ambas barras se
       vean como una sola pieza continua sin necesitar un fondo "fixed" (que
       se rompe con la animacion de apertura/cierre del Drawer). */
    --pl-gradient-unificado: linear-gradient(to bottom, #172554 0%, #1E3A8A 30%, #2563EB 65%, #7DD3FC 100%);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    background: var(--pl-gradient-page);
    background-attachment: fixed;
}

/* ---------- Sidebar (version simple, sin app-shell) ---------- */
.pl-sidebar {
    background: transparent;
    height: 100vh;
    padding: 20px 14px;
    position: sticky;
    top: 0;
}
.pl-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 20px;
    color: #fff;
    padding: 8px 10px 24px 10px;
}
.pl-logo span.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
}
.pl-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--pl-radius);
    color: rgba(255,255,255,0.82);
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 4px;
    transition: background .15s, color .15s, transform .15s;
}
.pl-nav-item:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    transform: translateX(2px);
}
.pl-nav-item.active {
    background: rgba(255,255,255,0.18);
    color: #fff;
    box-shadow: 0 6px 16px rgba(10,25,80,0.25);
}
.pl-nav-item .icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255,255,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.pl-nav-item.active .icon {
    background: rgba(255,255,255,0.28);
}
.pl-nav-item:hover .icon {
    background: rgba(255,255,255,0.22);
}
.pl-nav-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,0.55);
    margin: 18px 10px 6px 10px;
    font-weight: 800;
}
/* Boton "Gestiones" con submenu desplegable (Solicitar Contado/Credito/COD):
   un solo item en el menu lateral que se expande/colapsa en vez de agregar
   cada solicitud como boton aparte. */
.pl-nav-item-toggle {
    justify-content: space-between;
}
.pl-nav-chevron {
    font-size: 12px;
    opacity: .75;
}
.pl-nav-subitem {
    margin-left: 16px;
    padding-top: 9px;
    padding-bottom: 9px;
}
.pl-nav-subitem .icon {
    width: 22px;
    height: 22px;
    font-size: 13px;
}
.pl-logout-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    padding: 11px 14px;
    border-radius: var(--pl-radius);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pl-logout-btn .icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255,255,255,0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.pl-logout-btn:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

/* ---------- Contenedor principal ---------- */
.pl-content {
    padding: 28px 32px;
    max-width: 1100px;
}
.pl-page-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pl-dark);
    margin-bottom: 4px;
}
.pl-page-subtitle {
    color: var(--pl-gray);
    margin-bottom: 24px;
    font-size: 15px;
}

/* ---------- Tarjeta ---------- */
.pl-card {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-top: 4px solid var(--pl-primary);
    border-radius: var(--pl-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--pl-shadow);
    transition: box-shadow .15s, transform .15s;
}
.pl-card:hover {
    box-shadow: var(--pl-shadow-lg);
}
.pl-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--pl-dark);
    margin-bottom: 14px;
}
.pl-card h4 i {
    color: var(--pl-primary);
    margin-right: 4px;
}

/* ---------- Pasos del wizard ---------- */
.pasos {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 13px;
    color: #7C8AA5;
    font-weight: 700;
    flex-wrap: wrap;
}
.pasos span {
    padding: 7px 14px;
    border-radius: 20px;
    background: var(--pl-primary-light);
    color: var(--pl-primary-dark);
}
.pasos span.activo {
    background: var(--pl-gradient-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

/* ---------- Formularios ---------- */
.pl-field {
    margin-bottom: 18px;
}
.pl-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-dark);
    margin-bottom: 6px;
}
.form-control, .pl-field input, .pl-field select {
    border: 1.5px solid var(--pl-border) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    width: 100%;
    font-size: 14px;
    margin-bottom: 2px;
    background: #FCFDFF !important;
}
.form-control:focus, .pl-field input:focus {
    border-color: var(--pl-primary) !important;
    box-shadow: 0 0 0 3px var(--pl-primary-soft) !important;
    outline: none;
    background: #fff !important;
}
.pl-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 18px;
    margin-bottom: 4px;
}
.pl-filtros-fecha {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    row-gap: 18px;
    margin-bottom: 18px;
}
.pl-radio-card {
    border: 2px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--pl-dark);
    flex: 1;
    transition: border-color .15s, background .15s, transform .15s;
}
.pl-radio-card:hover {
    border-color: var(--pl-primary);
    transform: translateY(-1px);
}
.pl-radio-card.seleccionado {
    border-color: var(--pl-primary);
    background: linear-gradient(135deg, var(--pl-primary-light) 0%, #fff 100%);
    box-shadow: var(--pl-shadow);
}

/* ---------- Botones ---------- */
.btn, button {
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.pl-btn-primary, .btn-primary {
    background: var(--pl-gradient-primary) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35) !important;
}
.pl-btn-primary:hover, .btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37,99,235,0.4) !important;
}
.pl-btn-secondary {
    background: #fff !important;
    border: 1.5px solid var(--pl-border) !important;
    color: var(--pl-dark) !important;
}
.pl-btn-secondary:hover {
    border-color: var(--pl-primary) !important;
    color: var(--pl-primary-dark) !important;
}
.pl-btn-accent {
    background: var(--pl-gradient-accent) !important;
    border: none !important;
    color: #78350F !important;
    box-shadow: 0 4px 14px rgba(234,179,8,0.35) !important;
}
.pl-btn-accent:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.botones {
    margin-top: 22px;
    display: flex;
    gap: 10px;
}

/* ---------- Mensajes ---------- */
.exito {
    margin-top: 20px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid #A7F3D0;
    border-left: 4px solid var(--pl-success);
    border-radius: var(--pl-radius);
    color: #065F46;
}
.exito a {
    font-weight: 700;
    color: var(--pl-success);
}
.exito i {
    color: var(--pl-success);
    margin-right: 4px;
}
.pl-aviso-rotulado {
    margin-top: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    border-left: 4px solid var(--pl-primary);
    border-radius: var(--pl-radius);
    color: #1E3A5F;
}
.pl-aviso-rotulado h4 {
    margin: 0 0 10px;
    font-size: 15.5px;
    color: var(--pl-primary-dark);
}
.pl-aviso-rotulado h4 i,
.pl-aviso-rotulado p i {
    color: var(--pl-primary);
    margin-right: 4px;
}
.pl-aviso-rotulado p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.55;
}
.pl-aviso-rotulado p:last-child {
    margin-bottom: 0;
    font-weight: 600;
}
.error {
    color: #B91C1C;
    font-weight: 600;
    font-size: 14px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 4px solid #DC2626;
    padding: 10px 14px;
    border-radius: 8px;
    display: inline-block;
}

/* ---------- Tabla ---------- */
.pl-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--pl-radius);
    overflow: hidden;
    box-shadow: var(--pl-shadow);
}
.pl-table th {
    background: var(--pl-primary-light);
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--pl-primary-dark);
    letter-spacing: .03em;
    font-weight: 800;
}
.pl-table td {
    padding: 14px 16px;
    border-top: 1px solid var(--pl-border);
    font-size: 14px;
}
.pl-table tbody tr:hover {
    background: #F8FAFF;
}
.pl-dia-col {
    text-align: center !important;
    width: 44px;
}

/* ---------- Cotizador ---------- */
.pl-cotizar-resultado {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.pl-cotizar-precio {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 28px;
    font-weight: 800;
    color: var(--pl-dark);
}
.pl-cotizar-precio .moneda {
    font-size: 20px;
    font-weight: 800;
    color: var(--pl-primary);
}
.pl-badge {
    background: var(--pl-gradient-accent);
    color: #78350F;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
}

/* ---------- Login / Registro ---------- */
.pl-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #DCEAFF 0%, #EDE9FE 55%, #FEF3C7 100%);
}
.pl-auth-card {
    background: #fff;
    border-radius: 16px;
    border-top: 5px solid var(--pl-primary);
    padding: 36px 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 14px 34px rgba(30,58,138,0.14);
}
.pl-auth-card h3 {
    font-weight: 800;
    margin-bottom: 4px;
}
.pl-auth-card .subt {
    color: var(--pl-gray);
    font-size: 14px;
    margin-bottom: 24px;
}
.pl-auth-card a {
    color: var(--pl-primary);
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Panel promocional junto al formulario de Registro ---------- */
.pl-registro-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
}
.pl-registro-layout > .pl-card {
    flex: 1 1 380px;
}
.pl-registro-promo {
    position: relative;
    flex: 1 1 380px;
    max-width: 460px;
    /* Misma proporción que el póster (1350x1687) para que se muestre completo,
       sin que object-fit:cover la recorte/haga zoom. */
    aspect-ratio: 1350 / 1687;
    border-radius: var(--pl-radius);
    overflow: hidden;
    box-shadow: var(--pl-shadow-lg);
}
.pl-registro-promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 900px) {
    .pl-registro-promo { max-width: 100%; }
}

/* ---------- Caja de políticas / términos y condiciones ---------- */
.pl-politicas-caja {
    max-height: 320px;
    overflow-y: auto;
    border: 1.5px solid var(--pl-border);
    border-left: 4px solid var(--pl-primary);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 12.5px;
    color: var(--pl-dark);
    line-height: 1.6;
    background: linear-gradient(180deg, #FCFDFF 0%, var(--pl-bg) 100%);
}
.pl-politicas-caja p {
    margin: 0 0 10px;
}
.pl-politicas-lista {
    margin: 0 0 10px 18px;
    padding: 0;
}
.pl-politicas-lista li {
    margin-bottom: 4px;
}

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
    .pl-content { padding: 16px; }
    .pl-row { grid-template-columns: 1fr; }
    .pasos { font-size: 11px; }
}

/* =========================================================
   Layout general (app-shell / sidebar responsivo)
   ========================================================= */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 250px;
    background: var(--pl-gradient-sidebar);
    border-right: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 12px;
    transition: transform .2s ease;
    z-index: 1000;
    box-shadow: 2px 0 18px rgba(10,25,80,0.18);
}

.sidebar-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 8px;
    background: #fff;
    margin: -18px -12px 14px -12px;
    padding: 20px 16px;
    box-shadow: 0 2px 10px rgba(10,25,80,0.18);
}
.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: 19px;
    color: var(--pl-dark);
    padding: 0;
    flex: 1;
    min-width: 0;
}
.sidebar-logo img {
    max-width: 82%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.sidebar-logo .logo-icon {
    font-size: 20px;
}
.boton-cerrar-menu {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--pl-primary-light);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 15px;
    color: var(--pl-primary-dark);
    cursor: pointer;
    flex-shrink: 0;
}
.app-sidebar-fondo {
    display: none;
}

.app-contenido {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: none; /* solo se muestra en movil */
    align-items: center;
    padding: 10px 16px;
    background: var(--pl-gradient-sidebar);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 10px rgba(10,25,80,0.3);
}
.boton-menu-movil {
    background: rgba(255,255,255,0.18);
    border: none;
    border-radius: 8px;
    font-size: 20px;
    color: #fff;
    padding: 4px 10px;
}
.topbar-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.topbar-marca img {
    height: 22px;
    width: auto;
    background: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(10,25,80,0.18);
}
.topbar-espacio { width: 40px; }

.app-main {
    padding: 28px 32px;
    max-width: 1100px;
    width: 100%;
}

/* ---------- Responsivo: sidebar se vuelve panel deslizante en movil ---------- */
@media (max-width: 900px) {
    .app-topbar {
        display: flex;
        z-index: 1200; /* siempre por encima del sidebar, para que el boton hamburguesa nunca quede tapado */
    }
    .app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        box-shadow: 2px 0 12px rgba(0,0,0,0.08);
        z-index: 1100;
    }
    .app-sidebar.abierto {
        transform: translateX(0);
    }
    .boton-cerrar-menu {
        display: block;
    }
    .app-sidebar-fondo {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.45);
        z-index: 1050;
    }
    .app-main {
        padding: 18px;
    }
}

/* =========================================================
   Pagina principal (Home) - Banner, Dashboard, Agencias
   ========================================================= */

/* ---------- Banner / hero ----------
   2026-09-01: se reemplaza el banner (una sola foto grande y estática) por un
   hero con ilustracion propia (ruta punteada + agencias), seguido de una
   banda de anuncios en movimiento y una fila de cifras. Usa
   .pl-stat-box/.pl-stats-row que ya existian en este archivo pero no se
   estaban usando en ningun lado todavia.
   2026-09-01 (2): se probo con el camion real superpuesto y animado, pero se
   decidio quitarlo y dejar solo la ilustracion (mas limpio); tambien se
   redujo el alto a la mitad (280px -> 140px) y el texto quedo centrado
   verticalmente en vez de pegado arriba (ya no hay que dejarle espacio abajo
   al camion). */
.pl-hero-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--pl-shadow-lg);
    margin-bottom: 24px;
}
.pl-hero {
    position: relative;
    height: 140px;
    background: #1E3A8A;
}
.pl-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.pl-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    color: #fff;
    pointer-events: none;
}
.pl-hero-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--pl-hero-highlight);
    margin-bottom: 6px;
}
.pl-hero-content h2 {
    font-size: 21px;
    margin: 0 0 5px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.pl-hero-content h2 span {
    color: var(--pl-hero-highlight);
}
.pl-hero-content p {
    font-size: 12.5px;
    color: rgba(255,255,255,.9);
    margin: 0;
}

/* ---------- Banda de anuncios (ticker) debajo del hero ---------- */
.pl-ticker-band {
    background: linear-gradient(90deg, #1E3A8A, #2563EB);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
}
.pl-ticker-track {
    display: inline-block;
    padding: 10px 0;
    font-size: 12.5px;
    font-weight: 600;
    animation: pl-scroll-left 24s linear infinite;
}
.pl-ticker-track span {
    margin: 0 28px;
}
.pl-ticker-track span b {
    color: var(--pl-hero-highlight);
}
@keyframes pl-scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 720px) {
    .pl-hero { height: 160px; }
    .pl-hero-content h2 { font-size: 18px; }
}

/* ---------- Dashboard: recuadros de estadisticas ---------- */
.pl-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.pl-stat-box {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: 22px;
    box-shadow: var(--pl-shadow);
    display: flex;
    align-items: center;
    gap: 16px;
}
.pl-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pl-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    color: var(--pl-primary);
}
.pl-stat-icon.acento {
    background: var(--pl-accent-light);
}
.pl-stat-icon.morado {
    background: var(--pl-purple-light);
}
.pl-stat-icon.verde {
    background: #D1FAE5;
}
.pl-stat-number {
    font-size: 26px;
    font-weight: 800;
    color: var(--pl-dark);
    line-height: 1.1;
}
.pl-stat-label {
    color: var(--pl-gray);
    font-size: 13px;
    margin-top: 2px;
}
.pl-stat-box.accion {
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.pl-stat-box.accion:hover {
    transform: translateY(-2px);
    box-shadow: var(--pl-shadow-lg);
}

/* ---------- Info de la empresa ---------- */
.pl-info-empresa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}
.pl-info-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.pl-info-item .icono {
    font-size: 16px;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--pl-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pl-primary);
}
.pl-info-item .icono.whatsapp {
    background: #D1FAE5;
    color: #16A34A;
}
.pl-info-item .icono.whatsapp i {
    color: #16A34A !important;
}
.pl-info-item .icono.redes {
    background: #E0E7FF;
    color: #4338CA;
}
.pl-social-row {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.pl-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 15px;
    color: #fff !important;
    text-decoration: none;
    transition: transform .15s, opacity .15s;
}
.pl-social-link:hover {
    transform: translateY(-2px);
    opacity: .88;
}
.pl-social-link.facebook {
    background: #1877F2;
}
.pl-social-link.instagram {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.pl-social-link.tiktok {
    background: #000000;
}
.pl-info-item .valor a.pl-whatsapp-link {
    margin: 0;
}
.pl-info-item .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pl-gray);
    margin-bottom: 2px;
}
.pl-info-item .valor {
    font-size: 14px;
    font-weight: 600;
    color: var(--pl-dark);
}

/* ---------- Agencias ---------- */
.pl-agencias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.pl-agencia-card {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: 16px;
    box-shadow: var(--pl-shadow);
    transition: box-shadow .15s, transform .15s;
}
.pl-agencia-card:hover {
    box-shadow: var(--pl-shadow-lg);
    transform: translateY(-2px);
}
.pl-agencia-card .ciudad {
    font-weight: 700;
    font-size: 15px;
    color: var(--pl-dark);
    margin-bottom: 4px;
}
.pl-agencia-card .direccion {
    font-size: 12px;
    color: var(--pl-gray);
    line-height: 1.4;
}
.pl-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #16A34A;
    text-decoration: none;
    margin: 6px 0 2px;
}
.pl-whatsapp-link:hover {
    color: #15803D;
    text-decoration: underline;
}
.pl-whatsapp-link i {
    font-size: 14px;
    color: #16A34A !important;
}
.pl-mapa-wrap {
    border-radius: var(--pl-radius);
    overflow: hidden;
    box-shadow: var(--pl-shadow);
    border: 1px solid var(--pl-border);
}
.pl-mapa-wrap iframe {
    width: 100%;
    height: 320px;
    border: 0;
    display: block;
}

/* ---------- Agencia con fondo azul degradado claro ---------- */
.pl-agencia-azul {
    background: linear-gradient(135deg, var(--pl-primary-light) 0%, #fff 100%);
    border-color: #DBEAFE;
}
.pl-agencia-azul a {
    color: var(--pl-primary-dark);
}
.pl-agencia-card:not(.pl-agencia-azul) a {
    color: var(--pl-primary);
}

/* ---------- Nuestros Servicios ---------- */
.pl-servicios-titulo {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--pl-primary);
}
.pl-servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.pl-servicio-card {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: 22px;
    text-align: center;
    transition: box-shadow .15s, transform .15s;
}
.pl-servicio-card:hover {
    box-shadow: var(--pl-shadow-lg);
    transform: translateY(-3px);
}
.pl-servicio-icono {
    font-size: 22px;
    margin: 0 auto 12px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-primary-light);
    color: var(--pl-primary);
}
.pl-servicio-nombre {
    font-weight: 800;
    font-size: 15px;
    color: var(--pl-dark);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.pl-servicio-card p {
    font-size: 13px;
    color: var(--pl-gray);
    line-height: 1.5;
    margin: 0;
}

/* Onda azul decorativa al pie de "Nuestros servicios", inspirada en las
   franjas onduladas de la parte de abajo del cajon del camion. Los margenes
   negativos hacen que la onda llegue hasta los bordes del MudPaper (que
   tiene padding pa-6 = 24px), y el border-radius + overflow:hidden la
   recortan para que respete las esquinas redondeadas de abajo del panel. */
.pl-servicios-onda {
    margin: 28px -24px -24px -24px;
    overflow: hidden;
    border-radius: 0 0 var(--pl-radius) var(--pl-radius);
    line-height: 0;
}
.pl-servicios-onda svg {
    display: block;
    width: 100%;
    height: 70px;
}

/* =========================================================
   Rastreo de envíos (Tracking)
   ========================================================= */
.pl-tracking-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
}
.pl-tracking-search i {
    display: none;
}
.pl-tracking-search .form-control {
    margin-bottom: 0 !important;
}

.pl-tracking-card {
    border-top: 4px solid var(--pl-primary);
}
.pl-tracking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--pl-border);
}
.pl-tracking-guia-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pl-gray);
    font-weight: 700;
    margin-bottom: 2px;
}
.pl-tracking-guia {
    font-size: 26px;
    font-weight: 800;
    color: var(--pl-dark);
    letter-spacing: .01em;
}

.pl-estado-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
.pl-estado-pill.creada {
    background: var(--pl-accent-light);
    color: #92620A;
}
.pl-estado-pill.recolectado {
    background: var(--pl-purple-light);
    color: #5B21B6;
}
.pl-estado-pill.transito {
    background: var(--pl-teal-light);
    color: #0E7490;
}
.pl-estado-pill.entregado {
    background: #D1FAE5;
    color: #065F46;
}
.pl-estado-pill.cancelado {
    background: #FEE2E2;
    color: #B91C1C;
}

.pl-tracking-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.pl-tracking-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--pl-bg);
    border-radius: 10px;
}
.pl-tracking-info-item .label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: var(--pl-gray);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pl-tracking-info-item .label i {
    color: var(--pl-primary);
}
.pl-tracking-info-item .value {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pl-dark);
}

.pl-tracking-pdf-btn {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

/* ---------- Timeline del historial ---------- */
.pl-timeline {
    position: relative;
    margin-top: 14px;
    padding-left: 6px;
}
.pl-timeline-item {
    position: relative;
    padding: 0 0 22px 26px;
    border-left: 2px solid var(--pl-border);
}
.pl-timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}
.pl-timeline-dot {
    position: absolute;
    left: -7px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--pl-primary);
}
.pl-timeline-item.actual .pl-timeline-dot {
    background: var(--pl-primary);
    box-shadow: 0 0 0 4px var(--pl-primary-soft);
}
.pl-timeline-fecha {
    font-size: 12px;
    font-weight: 700;
    color: var(--pl-gray);
    margin-bottom: 2px;
}
.pl-timeline-comentario {
    font-size: 14px;
    color: var(--pl-dark);
    font-weight: 600;
}
.pl-timeline-item.actual .pl-timeline-comentario {
    color: var(--pl-primary-dark);
}
.pl-timeline-ubicacion {
    font-size: 12.5px;
    color: var(--pl-gray);
    margin-top: 3px;
}
.pl-timeline-ubicacion i {
    color: var(--pl-primary);
    margin-right: 3px;
}

/* ---------- Estado vacío ---------- */
.pl-tracking-vacio {
    text-align: center;
    padding: 40px 20px;
    color: var(--pl-gray);
}
.pl-tracking-vacio i {
    font-size: 40px;
    color: var(--pl-primary-soft);
    display: block;
    margin-bottom: 12px;
}
.pl-tracking-vacio p {
    margin: 0;
    font-size: 14.5px;
}

@media (max-width: 560px) {
    .pl-tracking-search { flex-direction: column; align-items: stretch; }
    .pl-tracking-header { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   MudBlazor - Barra superior (MudAppBar) + panel lateral (MudDrawer)
   como un solo elemento visual: azul navy intenso arriba, suavizandose
   a azul claro abajo.
   NOTA: antes esto se pintaba con un solo degradado "fijo" al tamano
   del viewport (background-attachment:fixed) para que ambas barras
   parecieran recortes de un mismo lienzo. Se quito ese truco porque
   el MudDrawer anima su apertura/cierre con un transform (translateX),
   y un fondo "fixed" dentro de un elemento con transform se rompe (el
   fondo se ve blanco/lavado mientras se abre o cierra el menu). Ahora
   cada barra pinta su PROPIO degradado (sin fixed), eligiendo colores
   que coinciden exactamente en la costura (el azul mas oscuro de abajo
   del AppBar es el mismo con el que arranca el Drawer) para que se
   sigan viendo como una sola pieza continua, sin el bug de la animacion.
   .pl-sidebar / .pl-nav-item (definidos arriba) ya traen sus propios
   colores en blanco pensados para este fondo oscuro.
   ========================================================= */
.mud-appbar {
    background: linear-gradient(180deg, #0B1638 0%, #172554 100%) !important;
}
.mud-drawer {
    background: var(--pl-gradient-unificado) !important;
}

/* Forzar iconos del menu (bootstrap-icons, <i class="bi ...">) en blanco:
   sobre el fondo azul oscuro se veian con un tono ambar/opaco en vez de
   blanco, asi que se fija el color explicitamente con !important tanto
   en el <i> como en su pseudo-elemento (donde bootstrap-icons dibuja el
   glifo) para cubrir cualquier color que estuviera heredando antes. */
.pl-nav-item .icon,
.pl-nav-item .icon i,
.pl-nav-item .icon i::before,
.pl-logout-btn .icon,
.pl-logout-btn .icon i,
.pl-logout-btn .icon i::before,
.pl-nav-chevron,
.pl-nav-chevron::before {
    color: #fff !important;
}

/* =========================================================
   MudBlazor - Mas separacion entre modulos/tarjetas y fondo
   ========================================================= */
.mud-main-content {
    background: var(--pl-gradient-page);
}
.mud-main-content .mud-paper {
    border: 1px solid var(--pl-border);
    box-shadow: var(--pl-shadow-lg) !important;
}
.mud-main-content .mud-paper + .mud-paper {
    margin-top: 22px;
}

/* =========================================================
   Acciones de tabla (Mis envios, Reclamos, etc.): cada accion
   con su propio color para diferenciarlas de un vistazo
   (rastreo = azul, PDF = morado, foto = verde).
   ========================================================= */
.pl-accion-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.pl-accion-link:hover {
    text-decoration: none;
}
.pl-accion-rastreo {
    color: var(--pl-primary-dark);
    background: var(--pl-primary-light);
}
.pl-accion-rastreo:hover {
    background: var(--pl-primary-soft);
}
.pl-accion-pdf {
    color: var(--pl-purple);
    background: var(--pl-purple-light);
}
.pl-accion-pdf:hover {
    background: #DDD6FE;
}
.pl-accion-foto {
    color: var(--pl-success);
    background: var(--pl-success-light);
}
.pl-accion-foto:hover {
    background: #BBF7D0;
}


/* ===== Dashboard del cliente (mismos colores azul/naranja que Recolecciones HCC) ===== */
.dash-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.dash-top h2 { margin: 0; font-size: 26px; font-weight: 800; color: #0B2A5B; letter-spacing: -.01em; }
.dash-top-sub { color: #64748B; font-size: 13px; margin-top: 2px; }
.dash-top-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dash-mes-nav { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #DCE4F5; border-radius: 999px; padding: 3px 6px; box-shadow: 0 2px 8px rgba(11,42,91,.06); }
.dash-mes-nav span { min-width: 130px; text-align: center; font-weight: 700; font-size: 14px; color: #0B2A5B; }
.dash-mes-nav button { background: transparent; border: 0; color: #1D4ED8; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.dash-mes-nav button:hover:not(:disabled) { background: #E8EFFD; }
.dash-mes-nav button:disabled { opacity: .3; cursor: default; }
.dash-btn { border: 0; border-radius: 10px; padding: 9px 15px; font-weight: 700; font-size: 13px; cursor: pointer; background: #F97316; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(249,115,22,.3); }
.dash-btn.sec { background: #0B2A5B; box-shadow: 0 4px 12px rgba(11,42,91,.25); }
.dash-btn:hover { filter: brightness(1.08); color: #fff; }

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.dash-kpi { background: #fff; border-radius: 16px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 4px 16px rgba(11,42,91,.07); border: 1px solid #E6ECF8; text-decoration: none; color: inherit; }
.dash-kpi-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.dash-kpi-num { font-size: 30px; font-weight: 800; line-height: 1.1; color: #0B2A5B; margin-top: 4px; }
.dash-kpi-sub { font-size: 12px; font-weight: 700; margin-top: 3px; color: #EA580C; }
.dash-ring { --p: 0; --c: #1D4ED8; width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto; position: relative; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), #E6ECF8 0); }
.dash-ring::before { content: ""; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.dash-ring span { position: relative; font-size: 12px; font-weight: 800; color: #0B2A5B; }
.dash-ring-icon { position: relative; font-size: 22px; color: var(--c); }

.dash-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-grid-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 960px) { .dash-grid-2, .dash-grid-eq { grid-template-columns: 1fr; } }

.dash-panel { background: #fff; border: 1px solid #E6ECF8; border-radius: 16px; box-shadow: 0 4px 16px rgba(11,42,91,.07); margin-bottom: 16px; overflow: hidden; }
.dash-grid-2 > .dash-panel, .dash-grid-eq > .dash-panel { margin-bottom: 0; }
.dash-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 6px; }
.dash-panel-head h4 { margin: 0; font-size: 16px; font-weight: 800; color: #0B2A5B; display: flex; align-items: center; gap: 8px; }
.dash-panel-head h4 i { color: #F97316; }
.dash-panel-desc { font-size: 12px; color: #64748B; margin-top: 3px; }
.dash-panel-body { padding: 10px 20px 20px; }
.dash-print-btn { border: 1px solid #DCE4F5; background: #F5F8FF; color: #1D4ED8; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.dash-print-btn:hover { background: #F97316; border-color: #F97316; color: #fff; }

.dash-bar-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-bar-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; font-weight: 600; }
.dash-bar-track { background: #EEF2FA; border-radius: 999px; height: 14px; overflow: hidden; }
.dash-bar-fill { background: linear-gradient(90deg, #F97316, #FDBA74); height: 100%; border-radius: 999px; min-width: 4px; }
.dash-bar-val { text-align: right; font-weight: 800; font-size: 13px; color: #0B2A5B; }

.dash-combo { position: relative; }
.dash-cols { display: flex; align-items: flex-end; gap: 0; height: 190px; padding-top: 6px; border-bottom: 2px solid #CBD5E1; background: repeating-linear-gradient(to top, transparent 0, transparent 37px, #EEF2FA 37px, #EEF2FA 38px); }
.dash-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.dash-col-bar { width: 62%; max-width: 22px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #3B82F6, #1E3A8A); min-height: 0; }
.dash-col.hoy .dash-col-bar { background: linear-gradient(180deg, #FB923C, #EA580C); }
.dash-col-val { font-size: 10px; color: #334155; font-weight: 700; margin-bottom: 2px; height: 13px; }
.dash-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; pointer-events: none; overflow: visible; }
.dash-col-labels { display: flex; gap: 0; margin-top: 4px; }
.dash-col-labels span { flex: 1 1 0; text-align: center; font-size: 10px; color: #64748B; min-width: 0; }
.dash-chart-legend { display: flex; gap: 16px; font-size: 12px; color: #475569; margin-top: 10px; }
.dash-chart-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.dash-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.dash-donut { width: 170px; height: 170px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 6px 16px rgba(11,42,91,.15); }
.dash-donut-hole { width: 100px; height: 100px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.dash-donut.pie .dash-donut-hole { display: none; }
.dash-donut-hole strong { font-size: 26px; color: #0B2A5B; }
.dash-donut-hole span { font-size: 11px; color: #64748B; }
.dash-legend { flex: 1 1 150px; min-width: 150px; }
.dash-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.dash-legend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.dash-legend-pct { color: #64748B; font-size: 12px; width: 40px; text-align: right; }
.dash-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }

.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th { background: #0B2A5B; color: #fff; font-weight: 700; text-align: left; padding: 9px 10px; position: sticky; top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.dash-table th.num, .dash-table td.num { text-align: right; }
.dash-table td { padding: 8px 10px; border-bottom: 1px solid #EEF2FA; vertical-align: middle; }
.dash-table tbody tr:nth-child(even) { background: #F7F9FE; }
.dash-table tfoot td { font-weight: 800; background: #FFF1E6; color: #9A3412; border-top: 2px solid #F97316; }
.dash-table .cod { color: #94A3B8; font-size: 11px; }
.dash-tabla-scroll { max-height: 440px; overflow: auto; border-radius: 10px; border: 1px solid #EEF2FA; }
.dash-mini { display: flex; height: 8px; width: 110px; border-radius: 999px; overflow: hidden; background: #EEF2FA; }
.dash-mini i { display: block; height: 100%; }
.dash-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.dash-pill.azul { background: #DBEAFE; color: #1E40AF; }
.dash-pill.naranja { background: #FFEDD5; color: #C2410C; }
.dash-vacio { color: #94A3B8; font-size: 13px; margin: 0; }

.pl-estado-rec { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #E2E8F0; color: #334155; white-space: nowrap; }
.pl-estado-rec.e1 { background: #FFEDD5; color: #C2410C; }
.pl-estado-rec.e2 { background: #DBEAFE; color: #1E40AF; }
.pl-estado-rec.e3 { background: #E0F2FE; color: #0369A1; }
.pl-estado-rec.e4 { background: #DCFCE7; color: #166534; }
.pl-estado-rec.e5 { background: #FEE2E2; color: #B91C1C; }
.pl-timeline { border-left: 3px solid #F97316; margin: 6px 0 6px 10px; padding-left: 16px; }
.pl-timeline-item { position: relative; padding: 6px 0 10px; }
.pl-timeline-item::before { content: ""; position: absolute; left: -24px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: #0B2A5B; border: 2px solid #fff; }
.pl-timeline-fecha { color: #64748B; font-size: 12px; margin-left: 8px; }
.pl-timeline-coment { margin-top: 4px; color: #334155; font-size: 13px; }
.pl-dash-wrap { margin: 22px 0; }