/* Tercera pasada de identidad visual.
 * Recupera fotografía real, iconografía lineal y microdetalles del norte aprobado
 * sin convertir las pantallas operativas en piezas de marketing.
 */

/* --- Sidebar: fotografía real Acarmoto como ambiente de fondo --- */
.sidebar {
    isolation: isolate;
    overflow: hidden auto;
}

.sidebar::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 100%;
    height: 320px;
    opacity: 1;
    background:
        linear-gradient(180deg, #08141d 0%, rgba(8, 20, 29, 0.82) 20%, rgba(7, 17, 25, 0.42) 52%, rgba(7, 17, 25, 0.88) 100%),
        linear-gradient(115deg, rgba(9, 27, 38, 0.34), rgba(239, 51, 64, 0.08)),
        url("../brand_photos/IMG-20250416-WA0011.533200ee2549.jpg") center 58% / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%, #000 100%);
    filter: saturate(0.72) contrast(1.08) brightness(0.72);
    pointer-events: none;
}

.product-mark,
.nav-list {
    position: relative;
    z-index: 2;
}

.sidebar::after {
    z-index: 2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}

/* --- Navegación: iconografía lineal consistente --- */
.nav-item::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 11px;
    border: 0;
    border-radius: 0;
    background: currentColor;
    opacity: 0.76;
    transform: none;
    flex: 0 0 auto;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h5v5H5zM14 5h5v5h-5zM5 14h5v5H5zM14 14h5v5h-5z' fill='none' stroke='white' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 18px 18px;
}

.nav-list > .nav-item:first-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11.2 12 4l8 7.2V20h-5v-5H9v5H4z' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-item[href*='/servicios']::before,
.nav-item[href*='/traslados']::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7zM7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM18 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-item[href*='/flota']::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h12l3 4v5H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 1-2ZM8 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-item[href*='/cobros']::before,
.nav-item[href*='/facturacion']::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2' fill='none' stroke='white' stroke-width='1.7'/%3E%3Cpath d='M3.5 10h17M15 14h3' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nav-item[href*='/clientes']::before,
.nav-item[href*='/personal']::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='white' stroke-width='1.7'/%3E%3Cpath d='M3.5 19c.6-3.5 2.4-5.2 5.5-5.2s4.9 1.7 5.5 5.2M15.5 7.2a2.7 2.7 0 0 1 0 5.2M16 14c2.5.4 4 2 4.5 5' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nav-item[href*='/identidad']::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 19 6v5.4c0 4.3-2.7 7.6-7 9.1-4.3-1.5-7-4.8-7-9.1V6z' fill='none' stroke='white' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2' fill='none' stroke='white' stroke-width='1.7'/%3E%3Cpath d='M8.5 16c.5-2 1.7-3 3.5-3s3 1 3.5 3' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nav-item[href*='/ubicaciones']::before,
.nav-item[href*='/sucursales']::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s6-5.8 6-11a6 6 0 1 0-12 0c0 5.2 6 11 6 11Z' fill='none' stroke='white' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2' fill='none' stroke='white' stroke-width='1.7'/%3E%3C/svg%3E");
}

.nav-item[href$='/app/empresa/']::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16M6 20V7l6-3 6 3v13M9 9h1M14 9h1M9 13h1M14 13h1M10 20v-3h4v3' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-item--active::before {
    border: 0;
    background: #ff4b56;
    box-shadow: none;
    opacity: 1;
}

/* --- Topbar: contexto con icono real de organización --- */
.topbar__context::before {
    content: "";
    background-color: #dce6ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20h14M7 20V8l5-3 5 3v12M10 10h1M13 10h1M10 14h1M13 14h1' fill='none' stroke='%23dce6ec' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    color: transparent;
}

/* --- Hero: fotografía real de una operación de Acarmoto --- */
.welcome-panel.dashboard-hero {
    background:
        radial-gradient(circle at 16% 8%, rgba(57, 88, 104, 0.13), transparent 22rem),
        linear-gradient(108deg, #11212c 0%, #0d1a24 55%, #09141c 100%);
}

.welcome-panel.dashboard-hero::before {
    top: 0;
    right: 0;
    width: 49%;
    height: 100%;
    opacity: 0.92;
    border-left: 0;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(90deg, #0d1a24 0%, rgba(13, 26, 36, 0.76) 13%, rgba(8, 18, 25, 0.16) 45%, rgba(8, 18, 25, 0.2) 100%),
        linear-gradient(0deg, rgba(5, 13, 18, 0.45), rgba(5, 13, 18, 0.06) 65%),
        url("../brand_photos/IMG-20250416-WA0004.8942be22a797.jpg") center 48% / cover no-repeat;
    filter: saturate(0.78) contrast(1.08) brightness(0.82);
}

.welcome-panel.dashboard-hero::after {
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.92);
}

/* --- Accesos rápidos: iconos de módulo como en la referencia --- */
.dashboard-action[href] {
    position: relative;
    padding-left: 68px;
}

.dashboard-action[href]::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 18px;
    width: 34px;
    height: 34px;
    border: 1px solid #304754;
    border-radius: 9px;
    background-color: #11232e;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.dashboard-action[href*='/clientes']::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='%23e4ebef' stroke-width='1.7'/%3E%3Cpath d='M3.5 19c.6-3.5 2.4-5.2 5.5-5.2s4.9 1.7 5.5 5.2M15.5 7.2a2.7 2.7 0 0 1 0 5.2M16 14c2.5.4 4 2 4.5 5' fill='none' stroke='%23e4ebef' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-action[href*='/servicios']::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7zM7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM18 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' fill='none' stroke='%23e4ebef' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-action[href*='/facturacion']::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h8l3 3v15H7zM15 3v4h4M10 11h5M10 15h5' fill='none' stroke='%23e4ebef' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-action[href$='/app/empresa/']::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20h14M7 20V8l5-3 5 3v12M10 10h1M13 10h1M10 14h1M13 14h1' fill='none' stroke='%23e4ebef' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-action[href*='/sucursales']::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s6-5.8 6-11a6 6 0 1 0-12 0c0 5.2 6 11 6 11Z' fill='none' stroke='%23e4ebef' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2' fill='none' stroke='%23e4ebef' stroke-width='1.7'/%3E%3C/svg%3E");
}

.dashboard-action[href*='/personal']::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='%23e4ebef' stroke-width='1.7'/%3E%3Cpath d='M3.5 19c.6-3.5 2.4-5.2 5.5-5.2s4.9 1.7 5.5 5.2M15.5 7.2a2.7 2.7 0 0 1 0 5.2M16 14c2.5.4 4 2 4.5 5' fill='none' stroke='%23e4ebef' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-action[href]:hover::before {
    border-color: rgba(239, 51, 64, 0.48);
    background-color: rgba(239, 51, 64, 0.09);
    box-shadow: 0 0 0 3px rgba(239, 51, 64, 0.04);
}

/* --- Microdetalles: contadores y CTA --- */
.payments-count {
    position: relative;
    min-width: 36px;
    min-height: 30px;
    border-color: #314855;
    background: #10212b;
    color: #c8d4dc;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.button--primary {
    position: relative;
    overflow: hidden;
}

.button--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.12) 48%, transparent 72%);
    transform: translateX(-125%);
    transition: transform 240ms ease;
    pointer-events: none;
}

.button--primary:hover::after {
    transform: translateX(125%);
}

@media (max-width: 900px) {
    .welcome-panel.dashboard-hero::before {
        width: 42%;
        opacity: 0.34;
        clip-path: none;
    }

    .dashboard-action[href] {
        padding-left: 64px;
    }
}

@media (max-width: 767px) {
    .sidebar::before,
    .sidebar::after {
        display: none;
    }

    .nav-item::before {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        -webkit-mask-size: 16px 16px;
        mask-size: 16px 16px;
    }

    .welcome-panel.dashboard-hero::before {
        width: 100%;
        opacity: 0.16;
        background-position: 65% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button--primary::after {
        display: none;
    }
}