/* 
   Logística Quesada — Portal CSS Stylesheet (MVP Dashboard v1)
   Theme: Visual B2B, Clean White Dashboards, Shared Tokens
*/

:root {
    --color-brand: #3e8798;
    --color-brand-dark: #2c6370;
    --color-brand-light: #eff7f9;
    --color-accent: #bf9000;
    --color-accent-hover: #a37a00;
    --color-accent-light: #fffcf0;
    
    --color-bg-body: #f8fafc;
    --color-bg-card: #ffffff;
    --color-border: #e2e8f0;
    --color-text-dark: #112226;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    
    /* Status Colors */
    --status-programado-bg: #eff6ff;
    --status-programado-text: #2563eb;
    --status-carga-bg: #fef3c7;
    --status-carga-text: #d97706;
    --status-ruta-bg: #ecfdf5;
    --status-ruta-text: #059669;
    --status-entregado-bg: #d1fae5;
    --status-entregado-text: #10b981;
    --status-incidencia-bg: #fee2e2;
    --status-incidencia-text: #ef4444;
    
    --font-headings: 'Lexend', system-ui, sans-serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
    
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(62, 135, 152, 0.05), 0 2px 4px -1px rgba(62, 135, 152, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(62, 135, 152, 0.08), 0 4px 6px -2px rgba(62, 135, 152, 0.04);
    --shadow-premium: 0 20px 25px -5px rgba(44, 99, 112, 0.15);
    
    --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------
   1. RESET & BASE STYLES
   ---------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-body);
    color: var(--color-text-dark);
    overflow-x: hidden;
    height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-brand);
    font-weight: 600;
}

/* Watermark */
.demo-watermark {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent);
    color: white;
    padding: 0.25rem 1rem;
    font-size: 0.75rem;
    font-family: var(--font-headings);
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    z-index: 9999;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
}

/* Preloader */
.portal-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}
.loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.loader-truck-svg {
    width: 60px;
    height: 60px;
    color: var(--color-brand);
    animation: bounceTruck 1s infinite alternate;
}
.loader-road-line {
    width: 120px;
    height: 4px;
    background-color: var(--color-border);
    margin: 1rem 0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.loader-road-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background-color: var(--color-accent);
    animation: loaderMove 1.2s infinite linear;
}
.loader-box span {
    font-family: var(--font-headings);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

@keyframes bounceTruck {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}
@keyframes loaderMove {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* ----------------------------------------------------
   2. LOGIN CONTAINER
   ---------------------------------------------------- */
.login-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #f8fafc;
}
.login-card {
    background-color: var(--color-bg-card);
    width: 100%;
    max-width: 480px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    padding: 3rem;
}
.login-header {
    text-align: center;
    margin-bottom: 2rem;
}
.login-logo-wrapper {
    display: inline-block;
    position: relative;
    padding: 0.5rem;
    margin-bottom: 1rem;
}
.login-logo-animated {
    height: 58px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgba(62, 135, 152, 0.25));
    animation: logoEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center center;
}
@keyframes logoEntrance {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.92);
        filter: blur(4px) drop-shadow(0 0 0 rgba(62, 135, 152, 0));
    }
    60% {
        opacity: 1;
        transform: translateY(2px) scale(1.02);
        filter: blur(0) drop-shadow(0 6px 16px rgba(62, 135, 152, 0.3));
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 4px 12px rgba(62, 135, 152, 0.2));
    }
}
.login-header h2 {
    font-size: 1.8rem;
    color: var(--color-brand);
    margin-bottom: 0.35rem;
}
.login-header p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.login-error-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-align: center;
    animation: shakeError 0.4s ease;
}
@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}


.form-group {
    margin-bottom: 1.25rem;
}
.form-group label {
    display: block;
    font-family: var(--font-headings);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand);
    margin-bottom: 0.4rem;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-body);
    font-family: var(--font-body);
    transition: var(--transition);
    outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--color-brand);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(62, 135, 152, 0.1);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.15rem;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.75rem;
}
.btn-xs {
    padding: 0.25rem 0.55rem;
    font-size: 0.7rem;
}
.btn-accent {
    background-color: var(--color-brand);
    color: white;
}
.btn-accent:hover {
    background-color: var(--color-brand-dark);
}
.btn-primary {
    background-color: var(--color-accent);
    color: white;
}
.btn-primary:hover {
    background-color: var(--color-accent-hover);
}
.btn-outline {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text-dark);
}
.btn-outline:hover {
    background-color: var(--color-brand-light);
    border-color: var(--color-brand);
    color: var(--color-brand);
}
.btn-full {
    width: 100%;
}
.login-demo-helper {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.login-demo-helper h4 {
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.demo-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.btn-demo-quick {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-body);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.btn-demo-quick:hover {
    border-color: var(--color-brand);
    background-color: var(--color-brand-light);
}
.btn-demo-quick strong {
    font-family: var(--font-headings);
    font-size: 0.82rem;
    color: var(--color-brand);
}
.btn-demo-quick span {
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

/* ----------------------------------------------------
   3. PORTAL LAYOUT STRUCTURE
   ---------------------------------------------------- */
.portal-layout {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Sidebar */
.portal-sidebar {
    width: 280px;
    height: 100%;
    background-color: var(--color-brand-dark);
    color: white;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
    transition: var(--transition);
    z-index: 110;
}
.sidebar-header {
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-logo {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
}
.sidebar-brand-text h3 {
    font-size: 1.15rem;
    color: white;
    font-weight: 700;
}
.sidebar-brand-text span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
}
.sidebar-nav {
    flex-grow: 1;
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}
.nav-item-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.95rem;
    border-radius: var(--border-radius-sm);
    color: rgba(255,255,255,0.85);
    font-family: var(--font-headings);
    font-weight: 500;
    font-size: 0.85rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: var(--transition);
}
.nav-item-btn:hover {
    background-color: rgba(255,255,255,0.08);
    color: white;
}
.nav-item-btn.active {
    background-color: var(--color-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(191, 144, 0, 0.25);
}
.nav-item-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.sidebar-footer {
    padding: 1.15rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.btn-logout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.95rem;
    width: 100%;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}
.btn-logout:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #f87171;
}
.btn-logout svg {
    width: 17px;
    height: 17px;
}

/* Main Area */
.portal-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header */
.portal-header {
    height: 80px;
    background-color: white;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    flex-shrink: 0;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.header-left h2 {
    font-size: 1.6rem;
    color: var(--color-text-dark);
}
.mysql-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-dot.green {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}
.status-dot.yellow {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}
.sidebar-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}
.sidebar-toggle .bar {
    width: 22px;
    height: 2px;
    background-color: var(--color-brand);
    transition: var(--transition);
}
.header-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.notification-bell {
    position: relative;
    cursor: pointer;
    color: var(--color-text-muted);
}
.notification-bell svg {
    width: 24px;
    height: 24px;
}
.bell-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
    border: 2px solid white;
}

/* Alerts Dropdown Panel */
.alerts-dropdown-menu {
    position: absolute;
    top: 2.75rem;
    right: -10px;
    width: 320px;
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-premium);
    border: 1px solid var(--color-border);
    z-index: 180;
    animation: slideDownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    cursor: default;
}

@keyframes slideDownFade {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.alerts-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.alerts-dropdown-header h4 {
    font-size: 0.95rem;
    color: var(--color-brand);
}

.alerts-dropdown-header button {
    background: none;
    border: none;
    font-family: var(--font-headings);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    cursor: pointer;
    text-transform: uppercase;
}

.alerts-dropdown-header button:hover {
    color: var(--color-accent-hover);
}

.alerts-dropdown-body {
    max-height: 280px;
    overflow-y: auto;
}

.alert-item {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: var(--transition);
}

.alert-item:last-child {
    border-bottom: none;
}

.alert-item:hover {
    background-color: var(--color-brand-light);
}

.alert-item.nueva {
    background-color: rgba(62, 135, 152, 0.04);
    border-left: 3px solid var(--color-brand);
}

.alert-item p {
    font-size: 0.85rem;
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.alert-time {
    font-size: 0.75rem;
    color: var(--color-text-light);
    display: block;
}

.user-profile-badge {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-brand-light);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.1rem;
    border: 1px solid rgba(62, 135, 152, 0.15);
}
.user-info h4 {
    font-size: 0.95rem;
    color: var(--color-text-dark);
}
.user-info span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
}

/* Content Area */
.portal-content {
    flex-grow: 1;
    padding: 2.5rem;
    overflow-y: auto;
    background-color: var(--color-bg-body);
}

/* ----------------------------------------------------
   4. DASHBOARD COMPONENTS
   ---------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}
.stat-card {
    background-color: white;
    border-radius: var(--border-radius-md);
    padding: 1.75rem;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand);
}
.stat-info h5 {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.stat-value {
    font-size: 2.25rem;
    font-family: var(--font-headings);
    font-weight: 800;
    color: var(--color-brand);
    line-height: 1;
}
.stat-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-brand-light);
    color: var(--color-brand);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-icon svg {
    width: 24px;
    height: 24px;
}

/* Dashboard Panel Layout Grid */
.ops-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
}

/* Card */
.card {
    background-color: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 2.25rem;
    margin-bottom: 2.5rem;
}
.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}
.card-header-flex h3 {
    font-size: 1.25rem;
    color: var(--color-brand);
}

/* Modern Tables */
.table-container {
    width: 100%;
    overflow-x: auto;
}
.portal-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.portal-table th {
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--color-border);
    font-family: var(--font-headings);
    font-size: 0.85rem;
    color: var(--color-brand);
    font-weight: 600;
    background-color: var(--color-brand-light);
}
.portal-table td {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}
.portal-table tr:hover td {
    background-color: rgba(62, 135, 152, 0.03);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-family: var(--font-headings);
    font-size: 0.8rem;
    font-weight: 600;
}
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}
.status-badge.programado { background-color: var(--status-programado-bg); color: var(--status-programado-text); }
.status-badge.carga { background-color: var(--status-carga-bg); color: var(--status-carga-text); }
.status-badge.ruta { background-color: var(--status-ruta-bg); color: var(--status-ruta-text); }
.status-badge.entregado { background-color: var(--status-entregado-bg); color: var(--status-entregado-text); }
.status-badge.incidencia { background-color: var(--status-incidencia-bg); color: var(--status-incidencia-text); }

/* Interactive Status Selector for Admin & Carrier */
.status-select {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    font-family: var(--font-headings);
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 8px 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E");
    padding-right: 1.4rem;
}
.status-select:hover {
    filter: brightness(0.95);
    box-shadow: 0 0 0 2px rgba(62,135,152,0.2);
}
.status-select:focus {
    box-shadow: 0 0 0 3px rgba(62,135,152,0.3);
}
.status-select-sm {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem 0.2rem 0.55rem;
    padding-right: 1.2rem;
    background-position: right 0.35rem center;
}
.status-select.programado, .status-select.asignado { background-color: var(--status-programado-bg); color: var(--status-programado-text); border-color: rgba(37,99,235,0.25); }
.status-select.carga, .status-select.preparacion { background-color: var(--status-carga-bg); color: var(--status-carga-text); border-color: rgba(217,119,6,0.25); }
.status-select.ruta { background-color: var(--status-ruta-bg); color: var(--status-ruta-text); border-color: rgba(5,150,105,0.25); }
.status-select.destino { background-color: #e0f2fe; color: #0284c7; border-color: rgba(2,132,199,0.25); }
.status-select.entregado, .status-select.cerrado { background-color: var(--status-entregado-bg); color: var(--status-entregado-text); border-color: rgba(16,185,129,0.25); }
.status-select.incidencia { background-color: var(--status-incidencia-bg); color: var(--status-incidencia-text); border-color: rgba(239,68,68,0.25); }
.status-select.cancelado { background-color: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.status-select option {
    background: #ffffff;
    color: var(--color-text-dark);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Table action buttons */
.btn-table-actions {
    display: flex;
    gap: 0.35rem;
}
.btn-action-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    background: #ffffff;
    cursor: pointer;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 0.8rem;
    padding: 0;
}
.btn-action-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.8px;
    display: block;
}
.btn-action-icon:hover {
    color: var(--color-brand);
    border-color: var(--color-brand);
    background-color: var(--color-brand-light);
}
.btn-action-icon[title*="Eliminar"],
.btn-action-icon[title*="eliminar"],
.btn-action-icon[onclick*="delete"],
.btn-action-icon.btn-danger-icon {
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
}
.btn-action-icon[title*="Eliminar"]:hover,
.btn-action-icon[title*="eliminar"]:hover,
.btn-action-icon[onclick*="delete"]:hover,
.btn-action-icon.btn-danger-icon:hover {
    color: #991b1b !important;
    background: #fee2e2 !important;
    border-color: #dc2626 !important;
    transform: scale(1.08);
}

/* Ultra-Discreet Icon Buttons for Calling and Messaging */
.btn-icon-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.72rem;
    line-height: 1;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid transparent;
    opacity: 0.85;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
}
.btn-icon-mini:hover {
    opacity: 1;
    transform: scale(1.15);
}
.btn-icon-mini.call {
    background: #eff6ff;
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.25);
}
.btn-icon-mini.call:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
.btn-icon-mini.whatsapp {
    background: #ecfdf5;
    color: #059669;
    border-color: rgba(5, 150, 105, 0.25);
}
.btn-icon-mini.whatsapp:hover {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

/* ----------------------------------------------------
   5. VIEW SPECIFIC COMPONENTS
   ---------------------------------------------------- */

/* Filters bar */
.filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.filters-left {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.btn-filter {
    padding: 0.32rem 0.85rem;
    border-radius: 50px;
    border: 1px solid var(--color-border);
    background-color: white;
    cursor: pointer;
    font-family: var(--font-headings);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: var(--transition);
}
.btn-filter:hover, .btn-filter.active {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: white;
}
.search-input-wrapper {
    position: relative;
}
.search-input-wrapper input {
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    width: 250px;
    font-size: 0.9rem;
    outline: none;
}
.search-input-wrapper input:focus {
    border-color: var(--color-brand);
}
.search-icon-svg {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-light);
}

/* Carrier View Specifics */
.active-trip-card {
    background-color: white;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--color-brand);
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-md);
}
.active-trip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.trip-route-line {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem 0;
}
.route-node {
    text-align: center;
    flex-grow: 1;
}
.route-node h4 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
.route-node p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.route-arrow {
    font-size: 2rem;
    color: var(--color-accent);
    animation: slideArrow 1.5s infinite;
}
@keyframes slideArrow {
    0% { transform: translateX(-4px); opacity: 0.5; }
    50% { transform: translateX(4px); opacity: 1; }
    100% { transform: translateX(-4px); opacity: 0.5; }
}

/* Timeline progress bar */
.trip-timeline-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 3.5rem 0;
    padding: 0 1.5rem;
}
.trip-timeline-progress::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 1.5rem;
    right: 1.5rem;
    height: 4px;
    background-color: var(--color-border);
    z-index: 1;
}
.timeline-fill-bar {
    position: absolute;
    top: 10px;
    left: 1.5rem;
    height: 4px;
    background-color: var(--color-brand);
    z-index: 2;
    transition: width 0.5s ease-in-out;
}
.timeline-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: white;
    border: 3px solid var(--color-border);
    transition: var(--transition);
}
.timeline-step.active .step-dot {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
}
.timeline-step.completed .step-dot {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
}
.step-label {
    margin-top: 0.75rem;
    font-family: var(--font-headings);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.timeline-step.active .step-label {
    color: var(--color-brand);
}

/* Active Carrier controls */
.carrier-controls {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
}

/* Client Tracking View */
.tracking-details-card {
    background-color: white;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    padding: 2.5rem;
}
.tracking-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.meta-item h5 {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.meta-item p {
    font-weight: 600;
    font-size: 1.05rem;
}

/* ----------------------------------------------------
   6. FLOATING DEMO SWITCHER WIDGET
   ---------------------------------------------------- */
.demo-switcher-widget {
    position: fixed;
    bottom: 2.5rem;
    left: 2.5rem;
    z-index: 200;
}
.switcher-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    background-color: var(--color-text-dark);
    color: white;
    border: none;
    border-radius: 50px;
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}
.switcher-trigger:hover {
    background-color: var(--color-brand);
    transform: scale(1.03);
}
.switcher-trigger svg {
    width: 20px;
    height: 20px;
    animation: rotateIcon 4s infinite linear;
}
@keyframes rotateIcon {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.switcher-menu {
    position: absolute;
    bottom: 4rem;
    left: 0;
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-premium);
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    width: 280px;
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}
.switcher-menu.open {
    display: flex;
}
.switcher-menu h4 {
    font-size: 0.95rem;
    color: var(--color-brand);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
.switch-role-btn {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-body);
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}
.switch-role-btn:hover {
    background-color: var(--color-brand-light);
    border-color: var(--color-brand);
    color: var(--color-brand);
}
.switch-info {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 0.5rem;
}

/* ----------------------------------------------------
   7. TOAST NOTIFICATIONS
   ---------------------------------------------------- */
.toast-container {
    position: fixed;
    top: 2.5rem;
    right: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 9999;
}
.toast {
    background-color: white;
    color: var(--color-text-dark);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--color-brand);
    font-family: var(--font-headings);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast.success {
    border-left-color: #10b981;
}
.toast.info {
    border-left-color: var(--color-brand);
}
@keyframes slideIn {
    0% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* ----------------------------------------------------
   8. MODAL FORMS
   ---------------------------------------------------- */
.portal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 33, 38, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.portal-modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.portal-modal-overlay .modal-card {
    background-color: white;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 25px 60px -15px rgba(15, 33, 38, 0.35);
    padding: 2.75rem 3rem;
    position: relative;
    transform: scale(0.92) translateY(24px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1),
                opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.portal-modal-overlay.open .modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.modal-close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2.25rem;
    font-weight: 300;
    color: var(--color-text-light);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: var(--transition);
}
.modal-close-btn:hover {
    color: var(--color-accent);
}
.portal-modal-overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
}
.modal-buttons-flex {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.btn-cancel {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.btn-cancel:hover {
    background-color: var(--color-bg-body);
}


/* Sidebar Badge Count */
.sidebar-badge-count {
    background-color: var(--color-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 20px;
    margin-left: auto;
}

/* Incidents Chat Split Layout */
.incidents-split-container {
    background-color: transparent;
}

.incident-list-card {
    border-left: 3px solid transparent !important;
}

.incident-list-card:hover {
    background-color: #fafbfc;
    border-color: var(--color-brand);
}

.incident-list-card.active {
    border-left-color: var(--color-brand) !important;
    background-color: var(--color-brand-light) !important;
}

.chat-thread-container::-webkit-scrollbar,
.incident-cards-scroll::-webkit-scrollbar {
    width: 6px;
}

.chat-thread-container::-webkit-scrollbar-thumb,
.incident-cards-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(62, 135, 152, 0.2);
    border-radius: 4px;
}

.chat-thread-container::-webkit-scrollbar-track,
.incident-cards-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Alerts Inbox */
.inbox-alert-card {
    transition: var(--transition);
}

.inbox-alert-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ----------------------------------------------------
   9. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------- */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .ops-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .portal-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
    }
    .portal-sidebar.open {
        left: 0;
    }
    .sidebar-toggle {
        display: flex;
    }
    .portal-header {
        padding: 0 1.5rem;
    }
    .portal-content {
        padding: 1.5rem;
    }
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-input-wrapper input {
        width: 100%;
    }
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .route-arrow {
        transform: rotate(90deg);
        margin: 1rem 0;
    }
    .trip-route-line {
        flex-direction: column;
    }
    .trip-timeline-progress {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        margin: 2rem 0;
        padding-left: 2rem;
    }
    .trip-timeline-progress::before {
        top: 0;
        bottom: 0;
        left: 2rem;
        width: 4px;
        height: 100%;
    }
    .timeline-fill-bar {
        top: 0;
        left: 2rem;
        width: 4px !important;
        height: 0%;
        transition: height 0.5s ease-in-out;
    }
    .timeline-step {
        flex-direction: row;
        gap: 1.5rem;
    }
    .step-dot {
        transform: translateX(-10px);
    }
    .step-label {
        margin-top: 0;
    }
    .tracking-meta-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .floating-social-buttons, .demo-switcher-widget {
        bottom: 1.5rem;
    }
    .demo-switcher-widget {
        left: 1.5rem;
    }
}

/* ----------------------------------------------------
   10. ADVANCED ADMIN PORTAL COMPONENTS & WIDGETS
   ---------------------------------------------------- */
/* Action Center / Top Dashboard Alerts Banner */
.action-center-banner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}
.action-center-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.action-center-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-brand);
}
.action-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.9rem;
}
.action-chip-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.15rem;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.action-chip-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand);
}
.action-chip-card.alert-urgent {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
}
.action-chip-card.alert-warning {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}
.action-chip-card.alert-info {
    border-left: 4px solid #3b82f6;
    background: #eff6ff;
}
.action-chip-card.alert-success {
    border-left: 4px solid #10b981;
    background: #ecfdf5;
}
.action-chip-info h6 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}
.action-chip-info span {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-dark);
}
.action-chip-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(62, 135, 152, 0.1);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Quick 3-Click Dispatch Modal & Unit Selector */
.dispatch-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}
.dispatch-step-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-muted);
}
.dispatch-step-item.active {
    color: var(--color-brand);
}
.dispatch-step-item.completed {
    color: #10b981;
}
.step-number-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.dispatch-step-item.active .step-number-badge {
    background: var(--color-brand);
    color: white;
}
.dispatch-step-item.completed .step-number-badge {
    background: #10b981;
    color: white;
}
.unit-selection-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-height: 380px;
    overflow-y: auto;
    padding: 0.5rem;
}
.unit-select-card {
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 1.15rem;
    background: white;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.unit-select-card:hover {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
}
.unit-select-card.selected {
    border-color: var(--color-brand);
    background: var(--color-brand-light);
}
.unit-select-card .badge-propiedad {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
}
.badge-propiedad.propia {
    background: #dbeafe;
    color: #1e40af;
}
.badge-propiedad.tercero {
    background: #fef3c7;
    color: #92400e;
}

/* Permissions Matrix */
.permissions-matrix-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.permissions-matrix-table th, .permissions-matrix-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.permissions-matrix-table th {
    background: #f8fafc;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.permissions-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
}

/* Financial & Status Summary Badges */
.badge-facturacion {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-facturacion.sin_facturar { background: #fee2e2; color: #b91c1c; }
.badge-facturacion.facturado { background: #e0f2fe; color: #0369a1; }
.badge-facturacion.pendiente_pago { background: #fef3c7; color: #b45309; }
.badge-facturacion.pagado { background: #dcfce7; color: #15803d; }
.badge-facturacion.cancelado { background: #f1f5f9; color: #64748b; }

/* Stars Rating Visual */
.stars-display {
    color: #f59e0b;
    display: inline-flex;
    gap: 2px;
}

/* Carrier Portal Responsive Hub Styles */
.carrier-hero-action-card {
    background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand) 100%);
    color: white;
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.carrier-hero-action-card h3 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}
.carrier-hero-action-card p {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
}
.carrier-quick-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.btn-carrier-action {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.45rem 0.85rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
}
.btn-carrier-action:hover {
    background: white;
    color: var(--color-brand);
    border-color: white;
}
.btn-carrier-action.primary-pulse {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    animation: gentlePulse 2s infinite;
}
@keyframes gentlePulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Cold Chain Thermometer Display */
.cold-chain-banner {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: var(--border-radius-sm);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.75rem 0;
}
.cold-chain-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cold-chain-temp {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0891b2;
}

/* Quick Contact Chips */
.quick-contact-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}
.btn-contact-chip {
    padding: 0.32rem 0.65rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    background: #f1f5f9;
    color: var(--color-brand);
    border: 1px solid var(--color-border);
    transition: var(--transition);
}
.btn-contact-chip:hover {
    background: var(--color-brand-light);
    border-color: var(--color-brand);
}
.btn-contact-chip.call {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.btn-contact-chip.call:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}
.btn-contact-chip.whatsapp {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}
.btn-contact-chip.whatsapp:hover {
    background: #bbf7d0;
    border-color: #4ade80;
}

/* Availability Toggle Switch */
.availability-pill-select {
    display: flex;
    gap: 0.25rem;
    background: #f8fafc;
    padding: 0.25rem;
    border-radius: 50px;
    border: 1px solid var(--color-border);
}
.availability-pill-btn {
    border: none;
    background: transparent;
    padding: 0.28rem 0.65rem;
    border-radius: 50px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    color: var(--color-text-muted);
}
.availability-pill-btn.active.disp {
    background: #10b981;
    color: white;
}
.availability-pill-btn.active.ruta {
    background: #3b82f6;
    color: white;
}
.availability-pill-btn.active.mant {
    background: #f59e0b;
    color: white;
}
.availability-pill-btn.active.nodisp {
    background: #ef4444;
    color: white;
}

/* Document & Evidence Upload Card */
.evidence-dropzone {
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 1.5rem;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: var(--transition);
}
.evidence-dropzone:hover {
    border-color: var(--color-brand);
    background: var(--color-brand-light);
}

/* DEMO Mode Watermark & Top Banner */
.demo-mode-top-banner {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: white;
    padding: 0.65rem 1.25rem;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.demo-badge-tag {
    background: rgba(0,0,0,0.25);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Live Cargo Map Simulator */
.cargo-map-container {
    background: #0f172a;
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid #334155;
}
.cargo-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.cargo-map-canvas {
    background: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
    border-radius: var(--border-radius-sm);
    height: 240px;
    position: relative;
    border: 1px solid #334155;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 2rem;
}
.map-route-line-bg {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 4px;
    background: #334155;
    transform: translateY(-50%);
    z-index: 1;
}
.map-route-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #06b6d4);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.7);
}
.map-city-node {
    position: relative;
    z-index: 2;
    background: #0f172a;
    border: 2px solid #06b6d4;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    text-align: center;
}
.map-truck-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: #06b6d4;
    color: #0f172a;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.8), 0 0 0 6px rgba(6, 182, 212, 0.2);
    animation: pulseMarker 2s infinite;
}
@keyframes pulseMarker {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Rating Stars Clickable Widget */
.rating-stars-input {
    display: flex;
    gap: 0.5rem;
    font-size: 1.8rem;
    cursor: pointer;
    color: #cbd5e1;
    margin: 0.5rem 0 1rem;
}
.rating-star-btn {
    transition: transform 0.15s ease, color 0.15s ease;
}
.rating-star-btn.active, .rating-star-btn:hover {
    color: #f59e0b;
    transform: scale(1.15);
}

/* ----------------------------------------------------
   MODAL POPUPS & DIALOGS
   ---------------------------------------------------- */
.portal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(17, 34, 38, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.portal-modal-overlay.open {
    display: flex !important;
    opacity: 1 !important;
}
.modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 540px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-premium);
    border: 1px solid var(--color-border);
    position: relative;
    padding: 2.25rem;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes modalPopIn {
    0% { transform: scale(0.93) translateY(16px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-close-btn {
    position: absolute;
    top: 1.15rem;
    right: 1.25rem;
    background: #f1f5f9;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 5;
}
.modal-close-btn:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fecaca;
    transform: rotate(90deg);
}
#modalFormTitle {
    font-size: 1.3rem;
    color: var(--color-brand);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-headings);
    font-weight: 700;
}