.product-panel-column select,
.product-panel-column input[type="text"] {
    width: 80%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Zoom 80% solo en pantallas grandes (desktop) */
@media (min-width: 1025px) {
    html:not(.login-document) { zoom: 0.8; }
}

:root {
    --primary-color: #7f00b2;
    --primary-color-dark: #4a0071;
    --primary-color-light: #c466ff;
    --secondary-color: #32144a;
    --success-color: #2ecc71;
    --danger-color: #ff4d6d;
    --warning-color: #f39c12;
    --info-color: #7f00b2;
    --dark-bg: #1b0f2d;
    --light-bg: #f7f2ff;
    --border-color: #eadbff;
    --sidebar-width: 250px;
    --top-nav-height: 50px;
    --import-color-ocean: #0e9fb1;
    --import-color-coral: #ff7c63;
    --import-color-sunrise: #ffb347;
    --import-color-mint: #36d2a6;
    --import-soft-bg: #f0fbff;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f9f5ff;
    color: #1f1231;
}

html.login-document,
body.login-body {
    background: #140925;
}

/* Login Page */
.login-body {
    background: radial-gradient(circle at 82% 8%, #6f3ab8 0%, #25124a 42%, #140925 100%);
    display: flex;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
}

.login-scene {
    position: relative;
    width: 100vw;
    min-height: 100dvh;
    border-radius: 0;
    border: none;
    background:
        linear-gradient(145deg, rgba(16, 8, 35, 0.94) 0%, rgba(38, 16, 79, 0.88) 55%, rgba(96, 47, 176, 0.82) 100%),
        radial-gradient(circle at 80% 12%, rgba(176, 112, 255, 0.42), rgba(176, 112, 255, 0) 45%);
    padding: clamp(18px, 2.4vw, 40px) clamp(18px, 3vw, 54px) 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-scene::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(10, 5, 23, 0.86) 0%, rgba(10, 5, 23, 0) 70%),
        repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, 0.08) 0 8px,
            rgba(255, 255, 255, 0) 8px 42px
        );
    opacity: 0.28;
    z-index: 0;
}

.login-scene::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to top, rgba(17, 8, 35, 0.72) 0%, rgba(17, 8, 35, 0) 56%);
    mix-blend-mode: normal;
    z-index: 0;
}

.login-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
    display: grid;
    /* Keep the form centered between the showcase and purpose panel on desktop. */
    grid-template-columns: minmax(500px, 1.15fr) minmax(460px, 0.9fr) minmax(380px, 0.8fr);
    gap: clamp(20px, 2.5vw, 42px);
    color: #f5efff;
    align-items: center;
    flex: 1;
}

.login-showcase {
    padding: clamp(10px, 1.8vw, 24px) 8px 10px 6px;
}

.brand-mark {
    width: 130px;
    height: 84px;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -10px;
    margin-bottom: 20px;
    line-height: 1;
}

.brand-mark span:first-child {
    color: #7f30ff;
}

.brand-mark span:last-child {
    color: #f4ebff;
    margin-left: -6px;
    opacity: 0.95;
}

.login-showcase h1 {
    color: #fff;
    font-size: clamp(36px, 3.6vw, 58px);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.showcase-subtitle {
    color: rgba(233, 221, 255, 0.74);
    font-size: clamp(16px, 1.2vw, 24px);
    margin-bottom: clamp(18px, 3vw, 40px);
}

.showcase-title {
    font-size: clamp(46px, 5vw, 80px);
    line-height: 1.08;
    font-weight: 800;
    margin-bottom: 12px;
}

.showcase-title span {
    color: #c675ff;
}

.showcase-description {
    max-width: 680px;
    color: rgba(233, 221, 255, 0.86);
    font-size: clamp(18px, 2vw, 32px);
    line-height: 1.35;
    margin-bottom: clamp(16px, 2.6vw, 34px);
}

.showcase-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 180px));
    gap: 14px;
    max-width: 620px;
}

.feature-item {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 12px 10px 10px;
    text-align: center;
}

.feature-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(198, 137, 255, 0.7);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    background: rgba(52, 23, 94, 0.65);
}

.feature-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: clamp(18px, 1.25vw, 24px);
}

.feature-item small {
    color: rgba(232, 222, 255, 0.8);
    font-size: clamp(12px, 0.86vw, 14px);
}

.login-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.login-card {
    width: 100%;
    background: rgba(255,255,255,0.985);
    color: #2e1d4e;
    border-radius: 22px;
    padding: clamp(22px, 2vw, 34px);
    border: 1px solid rgba(230, 217, 255, 0.95);
    box-shadow: 0 30px 70px rgba(20, 8, 43, 0.52);
    position: relative;
}

.login-purpose {
    width: 100%;
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 10px;
}

.login-purpose__item {
    padding: 12px 14px;
    border: 1px solid rgba(235, 219, 255, 0.3);
    border-radius: 12px;
    background: rgba(20, 9, 47, 0.42);
    color: rgba(250, 247, 255, 0.92);
}

.login-purpose__item h2 {
    margin: 0 0 5px;
    color: #dbb9ff;
    font-size: clamp(16px, 1.1vw, 20px);
}

.login-purpose__item p {
    margin: 0;
    font-size: clamp(11px, 0.76vw, 13px);
    line-height: 1.42;
}

.login-purpose__item strong {
    color: #fff;
}

.login-badge {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e0cffd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 10px 24px rgba(104, 61, 171, 0.28);
}

.login-header {
    text-align: center;
    margin: 16px 0 18px;
}

.login-header h2 {
    color: #24123f;
    font-size: clamp(34px, 2.4vw, 44px);
    margin-bottom: 8px;
}

.login-header p {
    color: #74678c;
    font-size: clamp(15px, 1.08vw, 18px);
}

.login-form .form-group {
    margin-bottom: 14px;
}

.login-form label {
    display: block;
    margin-bottom: 6px;
    color: #3f2c5b;
    font-weight: 500;
    font-size: clamp(14px, 0.95vw, 16px);
}

.input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #dbc8ff;
    border-radius: 11px;
    background: #fff;
    padding: 0 10px;
}

.input-icon {
    font-size: 15px;
    opacity: 0.7;
    margin-right: 8px;
}

.login-form input {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 0;
    font-size: clamp(15px, 1vw, 17px);
    background: #fff;
    transition: border 0.3s, box-shadow 0.3s;
    color: #2b1e46;
}

.login-form input:focus {
    outline: none;
}

.input-wrap:focus-within {
    border-color: #9554f2;
    box-shadow: 0 0 0 4px rgba(127, 0, 178, 0.12);
}

.password-toggle {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
}

.login-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px;
    font-size: clamp(12px, 0.88vw, 14px);
    color: #5a4c74;
}

.remember-me {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.remember-me input {
    width: auto;
}

.login-help {
    color: #7645c8;
}

.login-submit {
    width: 100%;
    border: none;
    border-radius: 11px;
    padding: 14px;
    font-size: clamp(18px, 1.15vw, 22px);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #6a1fdd, #a046ff);
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(117, 56, 201, 0.3);
    margin-bottom: 10px;
}

.login-submit:hover {
    transform: translateY(-1px);
}

.login-admin-btn {
    width: 100%;
    border: 1px solid #d8c5ff;
    background: #fff;
    color: #7a54bf;
    border-radius: 11px;
    padding: 12px;
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 600;
}

.login-divider {
    text-align: center;
    color: #8f7ea8;
    margin-bottom: 8px;
    font-size: 13px;
}

.login-body .alert {
    margin-bottom: 16px;
    font-size: 14px;
}

.login-bottom-bar {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    color: rgba(237, 228, 255, 0.8);
    font-size: clamp(12px, 0.84vw, 14px);
    margin-top: 8px;
}

.security-chip,
.lang-chip {
    justify-self: start;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
}

.lang-chip {
    justify-self: end;
}

.copyright-chip {
    text-align: center;
    justify-self: center;
}

@media (max-width: 980px) {
    .login-body {
        overflow-y: auto;
    }

    .login-scene {
        min-height: auto;
        padding: 14px 12px;
    }

    .login-shell {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .login-showcase {
        padding: 12px 6px;
    }

    .login-purpose {
        max-width: 560px;
    }

    .showcase-title {
        font-size: 34px;
    }

    .showcase-description {
        font-size: 18px;
    }

    .login-bottom-bar {
        grid-template-columns: 1fr;
        gap: 8px;
        justify-items: start;
    }

    .lang-chip,
    .copyright-chip {
        justify-self: start;
    }
}

@media (min-width: 981px) and (max-height: 850px) {
    .login-body {
        overflow: hidden;
    }

    .login-scene {
        width: calc(100vw / 0.82);
        min-height: calc(100dvh / 0.82);
        flex-shrink: 0;
        transform: scale(0.82);
        transform-origin: top left;
    }
}

@media (max-width: 600px) {
    .login-shell {
        gap: 12px;
    }

    .showcase-features {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .login-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.login-footer {
    text-align: center;
    margin-top: 20px;
    color: #7a6e8c;
    font-size: 12px;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    padding: 4px;
}

.pagination-bar .btn {
    min-width: 40px;
    text-align: center;
}

.pagination-ellipsis {
    color: var(--secondary-color);
    padding: 8px 4px;
}

/* Top Navigation */
.top-nav {
    background: linear-gradient(120deg, #2d0d4f, var(--primary-color));
    color: white;
    height: var(--top-nav-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.top-nav-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background 0.3s;
}

.nav-link:hover {
    background: rgba(255,255,255,0.1);
}

.top-nav-right {
    display: flex;
    gap: 15px;
}

.nav-icon {
    font-size: 18px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}

.nav-icon.tipo-cambio {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    gap: 2px;
}

.nav-icon-calendar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon-calendar.has-alert::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger-color);
    box-shadow: 0 0 0 2px rgba(20,7,34,0.75);
    animation: pulse-alert 1.5s infinite;
}

@keyframes pulse-alert {
    0% { transform: scale(0.9); opacity: 0.8; }
    70% { transform: scale(1.2); opacity: 0.4; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.nav-icon.tipo-cambio small {
    font-size: 11px;
    color: #fbdcff;
    letter-spacing: 0.5px;
}

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: var(--top-nav-height);
    bottom: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--top-nav-height));
    height: calc(100dvh - var(--top-nav-height));
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    background: #140722;
    color: white;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s;
    z-index: 999;
}

/* El panel debe ocupar siempre el espacio completo bajo la barra superior. */
@media (min-width: 769px) {
    .sidebar {
        top: var(--top-nav-height) !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

.sidebar.collapsed {
    transform: translateX(-100%);
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

.user-details {
    flex: 1;
}

.user-id {
    font-size: 12px;
    color: #bbb;
}

.user-name {
    font-size: 16px;
    font-weight: 500;
    margin-top: 5px;
}

.sidebar-menu {
    padding: 12px 0;
}

.menu-search {
    padding: 0 20px 10px;
}

.menu-search-input {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: rgba(255,255,255,0.1);
    color: white;
}

.menu-search-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.menu-list {
    list-style: none;
}

.menu-item {
    margin-bottom: 2px;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: white;
    text-decoration: none;
    transition: background 0.3s;
    cursor: pointer;
}

.menu-link:hover {
    background: rgba(255,255,255,0.15);
}

.menu-link.active {
    background: var(--primary-color);
    box-shadow: 0 10px 20px rgba(127,0,178,0.25);
}

.submenu-arrow {
    margin-left: auto;
    font-size: 12px;
}

.submenu {
    list-style: none;
    padding-left: 0;
    background: rgba(255,255,255,0.05);
}

.submenu li {
    margin: 0;
}

.submenu a {
    display: block;
    padding: 8px 20px 8px 40px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: background 0.3s;
}

.submenu a:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.logout-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: var(--danger-color);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.logout-btn:hover {
    background: #c0392b;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    margin-top: var(--top-nav-height);
    padding: 20px;
    min-height: calc(100vh - var(--top-nav-height));
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(247,242,255,0.9));
    transition: margin-left 0.3s ease;
}

.main-content.importacion-theme {
    background: radial-gradient(circle at 85% 0, rgba(14,159,177,0.25), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,251,255,0.95));
}

.importacion-theme .filters-section {
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(244,249,255,0.92));
    border: 1px solid rgba(14,159,177,0.12);
}

.importacion-theme--calc .filters-section {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

body.sidebar-collapsed .main-content {
    margin-left: 0;
    width: 100%;
}

.page-header {
    margin-bottom: 20px;
}

.page-header h1 {
    color: var(--secondary-color);
    font-size: 28px;
}

/* Filters */
.filters-section {
    background: white;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 20px;
    box-shadow: 0 20px 40px rgba(17,7,36,0.08);
}

.filter-form {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-form button,
.filter-form .btn {
    width: 100%;
}

.producto-intel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.producto-intel-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 15px 35px rgba(20,7,36,0.05);
    display: flex;
    flex-direction: column;
}

.producto-intel-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 10px;
}

.producto-intel-card__header h4 {
    font-size: 16px;
    color: var(--secondary-color);
}

.producto-intel-card__header small {
    color: #7a6e8c;
    font-size: 12px;
}

.producto-intel-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
}

.producto-intel-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--light-bg);
    border: 1px dashed rgba(127,0,178,0.15);
}

.producto-intel-item strong {
    display: block;
    color: var(--secondary-color);
    font-size: 14px;
}

.producto-intel-item p {
    margin: 2px 0;
    font-size: 13px;
    color: #555;
}

.producto-intel-item small {
    color: #999;
}

.producto-intel-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 13px;
    color: #444;
}

.intel-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(127,0,178,0.12);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
}

.intel-pill--neutral {
    background: rgba(50,20,74,0.08);
    color: var(--secondary-color);
}

.intel-empty,
.intel-loading {
    text-align: center;
    font-size: 13px;
    color: #7a6e8c;
    padding: 20px 10px;
    border: 1px dashed rgba(127,0,178,0.15);
    border-radius: 10px;
}

.filter-form--compact button,
.filter-form--compact .btn {
    align-self: flex-end;
}

.filter-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-form label {
    font-size: 14px;
    color: #666;
}

.filter-form input,
.filter-form select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.filter-form .date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-form .date-range .date-input {
    width: 130px;
}

.filter-form .date-range__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-form .date-range__label {
    display: none;
}

.filter-form .date-range__sep {
    font-weight: 600;
    color: #666;
}

.filter-form .periodo-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-form .periodo-inline select {
    min-width: 140px;
}

.filter-form .periodo-inline .periodo-ano {
    width: 90px;
}

.filter-form button[type="submit"],
.filter-form .btn-buscar {
    width: 100%;
}

.filter-form--compact button[type="submit"],
.filter-form--compact .btn-buscar {
    margin-top: 0;
}

.date-input {
    width: 150px;
}

/* Alerts */
.alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.alert-warning {
    background: #fff3cd;
    color: #856404;
    border-left: 4px solid var(--warning-color);
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid var(--danger-color);
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border-left: 4px solid var(--success-color);
}

/* Cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(20,7,36,0.08);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-icon {
    font-size: 40px;
}

.card-content h3 {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.card-number {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.card-helper {
    display: block;
    font-size: 12px;
    color: #7b6f8a;
}

.card-danger { border-left: 4px solid var(--danger-color); }
.card-warning { border-left: 4px solid var(--warning-color); }
.card-info { border-left: 4px solid var(--info-color); }
.card-success { border-left: 4px solid var(--success-color); }
.card-accent { border-left: 4px solid var(--import-color-ocean); }
.card-accent--ocean { border-left-color: var(--import-color-coral); }

/* Charts */
.charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.chart-container {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(20,7,36,0.08);
    border: 1px solid var(--border-color);
}

.chart-container h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.chart {
    height: 300px;
    position: relative;
}

/* Summary Section */
.summary-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.document-list {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(20,7,36,0.08);
    border: 1px solid var(--border-color);
}

.document-list h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.document-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

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

/* Tables */
.table-section {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(20,7,36,0.08);
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.table-header h3 {
    color: var(--secondary-color);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.data-table th {
    background: var(--light-bg);
    font-weight: 600;
    color: var(--secondary-color);
}

.data-table tr:hover {
    background: #f3e8ff;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.badge-danger {
    background: var(--danger-color);
    color: white;
}

.badge-success {
    background: var(--success-color);
    color: white;
}

.badge-warning {
    background: var(--warning-color);
    color: white;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-color-dark);
}

.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-success:hover {
    background: #27ae60;
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
}

.btn-block {
    width: 100%;
}

.btn-ghost {
    background: rgba(14,159,177,0.1);
    color: #0e4f5d;
    border: 1px solid rgba(14,159,177,0.3);
}

.btn-ghost:hover {
    background: rgba(14,159,177,0.2);
}

.btn-hero {
    padding: 14px 28px;
    font-size: 15px;
    border-radius: 999px;
    box-shadow: 0 20px 45px rgba(14, 159, 177, 0.25);
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
    justify-content: center;
}

/* Forms */
.form-group {
    margin-bottom: 15px;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border 0.3s, box-shadow 0.3s;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group.double-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.form-group.double-group .input-inline {
    flex: 1 1 calc(50% - 15px);
    display: flex;
    flex-direction: column;
}

.form-group.double-group label {
    margin-bottom: 5px;
}

.form-inline-options {
    display: flex;
    gap: 15px;
    align-items: center;
}

.form-inline-options label {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-size: 14px;
    color: #333;
    margin: 0;
    line-height: 1;
}

.form-inline-options input[type="radio"] {
    margin: 0;
    vertical-align: middle;
}

/* Producto: secciones y tablas */
.section-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 20px 45px rgba(20,7,36,0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.section-header--with-actions {
    align-items: center;
}

.section-header h3,
.section-header h4 {
    margin: 0;
    color: var(--secondary-color);
}

.section-header p {
    margin: 4px 0 0;
    color: #777;
    font-size: 13px;
}

.section-body {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.form-grid .form-group-full {
    grid-column: 1 / -1;
}
.producto-busqueda-grid {
    grid-template-columns: minmax(220px, 0.35fr) minmax(260px, 0.85fr);
    align-items: end;
}

.producto-busqueda-grid .form-group.cliente-frecuente,
.producto-busqueda-grid .form-group.producto-detalle {
    width: 100%;
}

@media (max-width: 768px) {
    .producto-busqueda-grid {
        grid-template-columns: 1fr;
    }
}

    .landed-history__meta {
        align-items: flex-start;
    }

.inventario-only {
    transition: opacity 0.2s ease;
}

.toggle-switch {
    position: relative;
    width: 46px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #d7d7d7;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.toggle-switch span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.toggle-switch input:checked + span {
    background: var(--primary-color);
}

.toggle-switch input:checked + span::after {
    transform: translateX(22px);
}

.presentaciones-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.presentaciones-table th,
.presentaciones-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.presentaciones-table th {
    background: var(--light-bg);
    font-weight: 600;
    color: var(--secondary-color);
}

.presentaciones-table tbody tr:hover {
    background: #f8f5ff;
}

.presentaciones-table input,
.presentaciones-table select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
}

.presentaciones-table td:last-child {
    width: 120px;
}

.presentaciones-table button {
    padding: 6px 12px;
    font-size: 13px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Botones auxiliares */
.btn-secondary {
    background: #ecedf3;
    color: #333;
}

.btn-secondary:hover {
    background: #dcddea;
}

.btn-warning {
    background: var(--warning-color);
    color: #fff;
}

.btn-warning:hover {
    background: #e08600;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--secondary-color);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Venta: layout y paneles */
.venta-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: flex-start;
    margin-top: 20px;
}

.venta-left,
.venta-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-with-action {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.input-with-action input {
    flex: 1;
    min-width: 0;
}
.btn-quick-add {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 8px 12px;
}
.full-width {
    grid-column: 1 / -1;
}
.quick-add-modal[hidden] {
    display: none;
}
.quick-add-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
}
.quick-add-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 30, .65);
}
.quick-add-modal__dialog {
    position: relative;
    width: min(900px, 94vw);
    height: min(760px, 92vh);
    margin: 4vh auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}
.quick-add-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
}
.quick-add-modal__header h2 {
    margin: 0;
    font-size: 1.1rem;
}
.quick-add-modal__close {
    border: 0;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
}
.quick-add-modal iframe {
    width: 100%;
    height: calc(100% - 58px);
    border: 0;
}
body.modal-open {
    overflow: hidden;
}

.venta-right {
    max-width: 15vw; /* Constrain to approximately 15% of viewport width */
}

.venta-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 20px 45px rgba(20,7,36,0.05);
}

.venta-card-compact {
    padding: 8px 18px;
}
    .venta-right {
        max-width: none; /* Relax on smaller screens */
    }

.venta-card-compact .venta-grid {
    gap: 4px 12px;
}

.venta-card-compact .form-group {
    margin-bottom: 6px;
}

.venta-card-compact .form-group label {
    font-size: 12px;
    margin-bottom: 2px;
}

.venta-card-compact .form-group input,
.venta-card-compact .form-group select {
    padding: 6px 9px;
    min-height: 32px;
}

.venta-card .section-header {
    margin-bottom: 15px;
}

.venta-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.45fr) minmax(280px, 1fr);
    gap: 15px;
}

.venta-grid .venta-local,
.venta-grid .venta-almacen {
    min-width: 220px;
}

.venta-grid .venta-cliente,
.venta-grid .venta-producto {
    min-width: 320px;
}

.field-hint {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
    min-height: 16px;
}

.stock-presentaciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.stock-chip {
    background: #f4f1ff;
    border: 1px solid #e5deff;
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.stock-chip strong {
    color: var(--secondary-color);
    font-size: 13px;
}

.presentaciones-dinamicas {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: flex-start;
    margin-top: 15px;
}

.presentaciones-table-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow-x: auto;
}

.presentaciones-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.presentaciones-table-wrapper th,
.presentaciones-table-wrapper td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}
.presentaciones-table-wrapper tr.presentacion-row--principal td {
    border-bottom: none;
}
    .presentaciones-group-header th {
        background: #f0edff;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center;
    }
    .presentacion-empty {
        background: #fcfcff;
    }

.presentacion-resumen {
    background: #faf8ff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 14px;
    align-content: flex-start;
}

.variante-chip {
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    background: #f2f0ff;
    border-radius: 999px;
}

.precio-bloque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-size: 14px;
    gap: 4px;
    appearance: none;
    outline: none;
    color: var(--secondary-color);
    position: relative;
}

.precio-bloque strong {
    font-weight: 600;
    color: var(--secondary-color);
    opacity: 1;
}

.precio-bloque::after {
    content: '';
}

.precio-bloque:hover strong,
.precio-bloque:focus-visible strong,
.precio-bloque--activo strong {
    opacity: 1;
}

.precio-bloque:hover::after,
.precio-bloque:focus-visible::after,
.precio-bloque--activo::after {
    content: '';
}

.precio-bloque--activo {
    border-color: var(--primary-color);
    background: #f4ecff;
    box-shadow: 0 0 0 2px rgba(127, 0, 178, 0.1);
}

.precio-actual {
    font-weight: 700;
    color: var(--secondary-color);
}

.precio-editar {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 8px;
    font-weight: 600;
    text-align: right;
}

.precio-editar::-webkit-outer-spin-button,
.precio-editar::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.precio-editar[type="number"] {
    -moz-appearance: textfield;
}

.variante-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.variante-field input {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 8px;
}

.cantidad-unica {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cantidad-unica small {
    font-size: 11px;
    color: #6c6785;
}

.cantidad-unica input {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 10px;
    font-weight: 600;
}

.variante-selector {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-bottom: 6px;
}

.variante-selector input[type="radio"] {
    margin: 0;
}

.presentacion-resumen .descuentos-row {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.descuentos-row__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.descuentos-row__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 600;
}

.descuentos-row__label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    display: block;
    margin-bottom: 4px;
}

.descuentos-row__inputs input,
.descuentos-row__inputs input:focus {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
}

.descuentos-row__inputs input {
    width: 100%;
}

/* Oculta spinners para el control de descuento y mantiene apariencia consistente */
.descuentos-row__inputs input[type="number"]::-webkit-inner-spin-button,
.descuentos-row__inputs input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.descuentos-row__inputs input[type="number"] {
    -moz-appearance: textfield;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media (max-width: 600px) {
    .descuentos-row__inputs {
        grid-template-columns: 1fr;
    }
}

.presentacion-resumen .form-group {
    margin-bottom: 0;
}

.presentacion-resumen input[readonly] {
    background: #f6f6fb;
    font-weight: 600;
}

.detalle-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.detalle-acciones--inline {
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.intel-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.intel-tooltip-bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1f1231;
    color: #fff;
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(12, 2, 26, 0.35);
    min-width: 210px;
    max-width: 260px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
    line-height: 1.4;
}

.intel-tooltip-bubble::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: inherit;
    transform: rotate(45deg);
    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.15);
}

.intel-tooltip-wrapper.intel-tooltip-open .intel-tooltip-bubble {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
}

.intel-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: 13px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.intel-tooltip-row:last-child {
    border-bottom: none;
}

.intel-tooltip-row span {
    color: #d5cbe4;
    font-weight: 600;
}

.intel-tooltip-row strong {
    color: #fbdcff;
    font-weight: 700;
    font-size: 13px;
}

.intel-tooltip-empty {
    font-size: 13px;
    color: #d5cbe4;
    margin: 0;
}

.intel-tooltip-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 4, 32, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
}

.intel-tooltip-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

.intel-tooltip-wrapper.intel-tooltip-pinned .intel-tooltip-bubble {
    transform: translateY(0) scale(1.01);
    box-shadow: 0 22px 55px rgba(12, 2, 26, 0.45);
}

.calc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: flex-start;
}

.calc-layout__left,
.calc-layout__right {
    min-width: 0;
}

.calc-layout__left {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(14,159,177,0.14);
    padding: 26px;
    box-shadow: 0 25px 55px rgba(10, 4, 24, 0.08);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.calc-layout__left-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #4a6072;
}

.calc-field-groups {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.calc-field-group {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 16px;
    padding: 18px 20px;
    background: linear-gradient(120deg, rgba(244,249,255,0.7), #fff);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.calc-field-group__header h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #0b2130;
}

.calc-field-group__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.calc-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,0.08);
    background: #fff;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.calc-field-row label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b7a88;
    font-weight: 600;
}

.calc-field-input {
    width: 100%;
    border: 1px solid rgba(15,23,42,0.15);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fdfefe;
}

.calc-field-input:focus {
    border-color: var(--import-color-ocean);
    box-shadow: 0 0 0 3px rgba(14,159,177,0.25);
    outline: none;
}

.calc-field-row:focus-within {
    border-color: var(--import-color-ocean);
    box-shadow: 0 8px 24px rgba(14,159,177,0.15);
}

.calc-field-row .field-hint {
    font-size: 11px;
    color: #7a8a99;
}

.calc-derived-group {
    border: 1px solid rgba(14,159,177,0.25);
    border-radius: 16px;
    padding: 18px 22px;
    background: rgba(14,159,177,0.06);
}

.calc-derived-group h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #0b2130;
    font-size: 15px;
}

.calc-derived-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calc-derived-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #1f2a37;
}

.calc-derived-row strong {
    font-size: 16px;
    color: #0b5366;
}

.calc-layout__right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 6px;
}

.calc-results-panel {
    margin-bottom: 0;
}

.importacion-flow {
    background: radial-gradient(circle at 5% 0, rgba(255,124,99,0.12), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(240,251,255,0.95));
}

.flow-hero {
    background: linear-gradient(125deg, rgba(250,251,255,0.98), rgba(14,159,177,0.08));
    border: 1px solid rgba(14,159,177,0.15);
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 25px 55px rgba(11,33,48,0.12);
    margin-bottom: 24px;
}

.flow-hero__eyebrow {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: #0e9fb1;
    margin-bottom: 6px;
}

.flow-hero h1 {
    margin: 0;
    font-size: 28px;
    color: #0b2130;
}

.flow-hero p {
    margin: 8px 0 18px;
    color: #4a6072;
}

.flow-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.flow-hero__date {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px dashed rgba(14,159,177,0.4);
    color: #0b5366;
    font-weight: 600;
}

.flow-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.flow-hero__actions .btn-secondary {
    order: 3;
    margin-left: 0;
    align-self: flex-start;
}

.flow-hero__actions .flow-reset-form {
    margin-right: auto;
}

.flow-inline-alert {
    margin-top: 18px;
}

.flow-table__note {
    font-size: 12px;
    color: #5a6b7b;
    margin-top: 4px;
}

.checklist-row__note {
    font-size: 12px;
    color: #5a6b7b;
    margin-top: 4px;
}

.flow-update-btn {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
}

.flow-progress-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-progress-control input[type="range"] {
    width: 100%;
}

.flow-progress-value {
    display: inline-block;
    font-weight: 600;
    color: #0b5366;
}

.flow-form-help {
    font-size: 12px;
    color: #4a6072;
    margin-bottom: 8px;
    font-weight: 600;
}

.flow-reset-form {
    display: inline-flex;
    margin: 0;
}

.flow-reset-alert {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(54,210,166,0.15);
    color: #0f6c55;
    font-size: 12px;
    font-weight: 600;
}

.flow-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.flow-kpi-card {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 16px;
    padding: 16px 18px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(11,33,48,0.08);
}

.flow-kpi-card__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7a88;
}

.flow-kpi-card__value {
    display: block;
    font-size: 26px;
    color: #0b2130;
    margin: 6px 0;
}

.flow-kpi-card__meta {
    color: #7a8a99;
}

.flow-highlight {
    border: 1px solid rgba(255,124,99,0.25);
    background: rgba(255,124,99,0.08);
    border-radius: 18px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.flow-highlight h4 {
    margin: 0;
    color: #a14a33;
}

.flow-highlight__items {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.flow-highlight__item {
    padding: 10px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    min-width: 160px;
}

.flow-highlight__item strong {
    display: block;
    color: #0b2130;
}

.flow-highlight__item small {
    display: block;
    margin-top: 4px;
    color: #6b7a88;
    font-size: 12px;
}

.flow-highlight__empty {
    color: #a14a33;
    font-weight: 600;
}

.flow-indicators {
    margin-bottom: 26px;
}

.flow-section-eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: #6b7a88;
    margin-bottom: 4px;
}

.flow-indicators__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.flow-indicator-card {
    display: flex;
    gap: 12px;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    align-items: center;
}

.flow-indicator-card__icon {
    font-size: 28px;
}

.flow-indicator-card h4 {
    margin: 0;
    color: #0b2130;
}

.flow-indicator-card__detail {
    font-size: 18px;
    color: #0b5366;
    margin: 2px 0;
}

.flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 26px;
}

.flow-panel {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 18px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(11,33,48,0.08);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.flow-panel--wide {
    grid-column: span 1;
}

.flow-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.flow-panel__header h3 {
    margin: 0;
    color: #0b2130;
}

.flow-table-wrapper {
    overflow-x: auto;
}

.flow-table {
    width: 100%;
    border-collapse: collapse;
}

.flow-table th,
.flow-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15,23,42,0.06);
    vertical-align: top;
}

.flow-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b7a88;
}

.flow-table__subtext {
    margin: 4px 0 0;
    font-size: 12px;
    color: #7a8a99;
}

.flow-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(14,159,177,0.12);
    color: #0b5366;
    font-weight: 600;
}

.flow-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(15,23,42,0.06);
    overflow: hidden;
    margin-bottom: 6px;
}

.flow-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, #0e9fb1, #36d2a6);
}

.status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    color: #0b2130;
}

.status-tag--intransit {
    background: rgba(14,159,177,0.12);
    border-color: rgba(14,159,177,0.4);
    color: #0b5366;
}

.status-tag--scheduled {
    background: rgba(255,179,71,0.15);
    border-color: rgba(255,179,71,0.4);
    color: #a35508;
}

.status-tag--released,
.status-tag--completed {
    background: rgba(54,210,166,0.15);
    border-color: rgba(54,210,166,0.4);
    color: #0f6c55;
}

.status-tag--delayed,
.status-tag--pending {
    background: rgba(255,124,99,0.18);
    border-color: rgba(255,124,99,0.45);
    color: #a14a33;
}

.status-tag--review {
    background: rgba(127,0,178,0.12);
    border-color: rgba(127,0,178,0.35);
    color: #4a0071;
}

.flow-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checklist-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(15,23,42,0.06);
}

.checklist-row:last-child {
    border-bottom: none;
}

.checklist-row p {
    margin: 4px 0 0;
    color: #7a8a99;
}

.checklist-row__meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #6b7a88;
}

.flow-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.timeline-item {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(15,23,42,0.06);
}

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

.timeline-item__date {
    min-width: 110px;
    font-weight: 600;
    color: #0b5366;
}

.flow-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.action-card {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 16px;
    padding: 16px;
}

.action-card header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.action-card__badge {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.action-card--alta {
    border-color: rgba(255,124,99,0.25);
    background: rgba(255,124,99,0.08);
}

.action-card--alta .action-card__badge {
    background: rgba(255,124,99,0.2);
    color: #a14a33;
}

.action-card--media {
    border-color: rgba(255,179,71,0.25);
    background: rgba(255,179,71,0.08);
}

.action-card--media .action-card__badge {
    background: rgba(255,179,71,0.2);
    color: #a35508;
}

.flow-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.flow-modal--open {
    display: flex;
}

.flow-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 4, 24, 0.65);
}

.flow-modal__content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    width: min(520px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(10, 4, 24, 0.35);
}

#landedHistoryModal .flow-modal__content {
    width: min(840px, 96vw);
}

.flow-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    color: #7a8a99;
}

.flow-modal__intro {
    color: #6b7a88;
    margin-top: 4px;
    margin-bottom: 16px;
}

.flow-modal__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.flow-modal__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #0b2130;
}

.flow-modal__form input,
.flow-modal__form select,
.flow-modal__form textarea {
    border: 1px solid rgba(15,23,42,0.15);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
}

.flow-modal__form textarea {
    resize: vertical;
}

.flow-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.flow-modal__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flow-modal__list article {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,0.08);
    background: rgba(244,249,255,0.6);
}

body.flow-modal-open {
    overflow: hidden;
}

/* ── Importación: componentes adicionales ── */
.imp-actions-cell {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.imp-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.imp-status-form select {
    padding: 4px 8px;
    border: 1px solid rgba(15,23,42,0.15);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
}

.btn-danger-text {
    color: #c0392b;
    border-color: rgba(192,57,43,0.25);
}

.btn-danger-text:hover {
    background: rgba(192,57,43,0.08);
    border-color: rgba(192,57,43,0.4);
}

.imp-doc-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    background: rgba(15,23,42,0.06);
    color: #7a8a99;
}

.imp-doc-count--has {
    background: rgba(14,159,177,0.14);
    color: #0b5366;
}

.imp-file-link {
    color: #0e9fb1;
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
}

.imp-file-link:hover {
    text-decoration: underline;
}

.landed-cost {
    background: linear-gradient(140deg, rgba(14,159,177,0.05), rgba(255,255,255,0.9));
}

.landed-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid rgba(14,159,177,0.14);
    background: linear-gradient(120deg, #fff, rgba(14,159,177,0.08));
    box-shadow: 0 25px 55px rgba(11,33,48,0.08);
    margin-bottom: 28px;
}

.landed-hero__heading {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.landed-hero__insights {
    flex: 1 1 540px;
    max-width: 100%;
    width: 100%;
    align-self: stretch;
    display: flex;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
}

@media (max-width: 1024px) {
    .landed-hero__insights {
        flex: 1 1 100%;
        max-width: none;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .landed-calculator--hero {
        flex-direction: column;
        align-items: stretch;
    }

    .landed-calculator__hero-main {
        flex-direction: column;
    }

    .landed-calculator--hero .landed-calculator__display {
        flex: 1 1 auto;
    }

    .landed-calculator__hero-actions {
        flex: 1 1 auto;
        width: 100%;
    }

    .landed-calculator--hero .landed-calculator__keys {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .landed-calculator--hero .landed-calculator__key {
        flex: 1 1 45%;
    }
}

.landed-hero__eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: #0e9fb1;
    margin-bottom: 6px;
}

.landed-hero h1 {
    margin: 0;
    font-size: 30px;
    color: #0b2130;
}

.landed-hero p {
    margin: 8px 0 0;
    color: #4a6072;
}

.landed-hero__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    color: #0b5366;
    min-width: 200px;
}

.landed-hero__meta strong {
    font-size: 22px;
}

.landed-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(423px, 556px)) minmax(360px, 520px);
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.landed-panel {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 20px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 25px 55px rgba(11,33,48,0.08);
    width: 100%;
}

.landed-panel--primary {
    justify-self: flex-start;
}

.landed-panel--secondary {
    justify-self: flex-start;
    margin-left: -12px;
}


.landed-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.landed-actions__group {
    display: flex;
    gap: 12px;
}

.landed-section-eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: #7a8a99;
    margin: 0;
}

.landed-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}


.landed-field {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 0;
    background: rgba(244,249,255,0.7);
}

.landed-field--triple {
    align-items: flex-start;
}

.landed-field--double {
    align-items: flex-start;
}

.landed-field:first-child {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.landed-field:last-child {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.landed-field + .landed-field {
    border-top: none;
}

.landed-field span {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #0b2130;
}

.landed-field--disabled {
    opacity: 0.55;
}

.landed-field--disabled input,
.landed-field--disabled select {
    background: #f1f5f9;
}

.landed-field input,
.landed-field select {
    flex: 0 0 70%;
    max-width: 70%;
    border: 1px solid rgba(15,23,42,0.15);
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.landed-field__triple-inputs {
    flex: 0 0 70%;
    max-width: 70%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.landed-field__triple-inputs input {
    flex: initial;
    max-width: 100%;
}

.landed-field__double-inputs {
    flex: 0 0 70%;
    max-width: 70%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.landed-field__double-inputs input {
    flex: initial;
    max-width: 100%;
}

.landed-origin__double {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: 0 0 70%;
    max-width: 70%;
}

.landed-origin__column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.landed-origin__select {
    width: 100%;
    border: 1px solid rgba(15,23,42,0.15);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}

.landed-origin__select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.landed-history {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.landed-history__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landed-history__item {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(280px, 1fr);
    gap: 10px;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 12px;
    padding: 12px 16px;
    background: rgba(244,249,255,0.7);
    align-items: flex-start;
}

.landed-history__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.landed-history__btn {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.landed-history__btn--edit {
    border-color: rgba(14,159,177,0.4);
    color: #0b5366;
}

.landed-history__btn--pdf {
    border-color: rgba(11,33,48,0.12);
    color: #253647;
    background: rgba(11,33,48,0.04);
}

.landed-history__btn--export {
    border-color: rgba(255,124,99,0.4);
    color: #a5371b;
    background: rgba(255,124,99,0.1);
}

.landed-history__btn:hover:not(:disabled) {
    box-shadow: 0 3px 8px rgba(15,23,42,0.15);
}

.landed-history__btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.landed-history__primary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.landed-history__primary strong {
    font-size: 14px;
    color: #0b2130;
}

.landed-history__primary span {
    font-size: 13px;
    color: #51616f;
}

.landed-history__location {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #4a6072;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    word-break: break-word;
}

.landed-history__date {
    font-size: 13px;
    font-weight: 600;
    color: #0b5366;
    text-align: right;
}

.landed-history__item {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(280px, 1fr);
    padding: 14px;
    font-size: 13px;
    color: #4a6072;
    text-align: left;
    gap: 10px;
}

@media (max-width: 640px) {

.landed-history__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
    .landed-history__item {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .landed-history__date {
        text-align: left;
    }

    .landed-history__actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


.landed-field__input-group {
    flex: 0 0 70%;
    max-width: 70%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.landed-field__input-group--picker {
    grid-template-columns: 90px calc(100% - 90px - 10px);
}

.landed-history__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
}

.landed-history__btn {
    border-radius: 14px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(15,23,42,0.08);
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(247,245,255,0.85));
    color: #0b2130;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(15,23,42,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.landed-history__btn--edit {
    border-color: rgba(14,159,177,0.5);
    background: linear-gradient(135deg, rgba(14,159,177,0.18), rgba(14,159,177,0.05));
    color: #035061;
}

.landed-history__btn--pdf {
    border-color: rgba(127,0,178,0.35);
    background: linear-gradient(135deg, rgba(127,0,178,0.18), rgba(127,0,178,0.06));
    color: #3f0a63;
}

.landed-history__btn--export {
    border-color: rgba(255,179,71,0.65);
    background: linear-gradient(135deg, rgba(255,179,71,0.3), rgba(255,179,71,0.08));
    color: #8a3f00;
}

.landed-history__btn--delete {
    border-color: rgba(255,77,109,0.65);
    background: linear-gradient(135deg, rgba(255,77,109,0.25), rgba(255,77,109,0.08));
    color: #7a1123;
}

.landed-history__btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15,23,42,0.18);
    border-color: rgba(15,23,42,0.18);
}

.landed-history__btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}
    border-radius: 18px;
    padding: 18px 20px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(11,33,48,0.08);
}

.landed-side__card ul {
    margin: 12px 0 0;
    padding-left: 18px;
    color: #4a6072;
    line-height: 1.4;
}

.landed-side__card--accent {
    background: linear-gradient(135deg, rgba(14,159,177,0.15), #fff);
}

.landed-calculator {
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-self: stretch;
}

.landed-calculator--basic {
    background: linear-gradient(160deg, #111827, #1f2937);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}

.landed-calculator--insights {
    overflow: hidden;
    border: 1px solid rgba(14,159,177,0.25);
    background: radial-gradient(circle at 20% 20%, rgba(14,159,177,0.25), rgba(255,255,255,0.92));
    box-shadow: 0 25px 55px rgba(11,33,48,0.15);
}

.landed-calculator--hero {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    padding: 18px;
    gap: 12px;
}

.landed-calculator__hero-main {
    flex: 1;
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.landed-calculator--hero .landed-calculator__display {
    flex: 0 0 240px;
    min-width: 220px;
}

.landed-calculator__hero-actions {
    flex: 0 0 160px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.landed-calculator--hero .landed-calculator__metrics {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    max-width: none;
    margin-left: auto;
}

.landed-calculator__metric--stacked {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.landed-calculator--hero .landed-calculator__key--metric {
    border: 1px solid rgba(14,159,177,0.25);
    background: #fff;
    color: #0b2130;
    box-shadow: 0 12px 25px rgba(11,33,48,0.1);
    min-width: auto;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-weight: 600;
    cursor: default;
    user-select: none;
}

.landed-calculator--hero .landed-calculator__key--metric span {
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #4a6072;
}

.landed-calculator--hero .landed-calculator__key--metric strong {
    font-size: 18px;
    color: #0b2130;
}

.landed-calculator--hero .landed-calculator__keys {
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.landed-calculator--hero .landed-calculator__key {
    min-width: auto;
}

.landed-calculator__unit {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.landed-calculator__label--sub {
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(11,33,48,0.65);
}

.landed-calculator__value--sub {
    font-size: 20px;
    color: #ffffff;
    word-break: break-word;
}

.landed-calculator--insights .landed-calculator__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.landed-calculator--insights .landed-calculator__status {
    font-size: 12px;
    font-weight: 600;
    color: #0b5366;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(11,83,102,0.12);
}

.landed-calculator--insights .landed-calculator__display {
    background: #0b2130;
    color: #e8f9ff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: inset 0 0 25px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.landed-calculator--insights .landed-calculator__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(232,249,255,0.65);
}

.landed-calculator--insights .landed-calculator__value {
    font-size: clamp(20px, 2.2vw, 42px);
    letter-spacing: 1px;
    font-weight: 700;
    white-space: nowrap;
}

.landed-calculator--insights .landed-calculator__subvalue {
    font-size: 14px;
    color: rgba(232,249,255,0.75);
}

.landed-calculator--insights .landed-calculator__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.landed-calculator--insights .landed-calculator__metric {
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(14,159,177,0.2);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.landed-calculator--insights .landed-calculator__metric span {
    font-size: 12px;
    text-transform: uppercase;
    color: #4a6072;
}

.landed-calculator--insights .landed-calculator__metric strong {
    font-size: 16px;
    color: #0b2130;
}

.landed-calculator--insights .landed-calculator__keys {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landed-calculator--insights .landed-calculator__key {
    flex: 1;
    min-width: 100px;
    border: 1px solid rgba(14,159,177,0.25);
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    font-family: inherit;
    background: #fff;
    color: #0b5366;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(14,159,177,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landed-calculator--insights .landed-calculator__key--accent {
    border: none;
    background: linear-gradient(120deg, #0e9fb1, #7f00b2);
    color: #fff;
    box-shadow: 0 12px 25px rgba(14,159,177,0.35);
}

.landed-calculator--insights .landed-calculator__key--ghost {
    background: transparent;
    color: #0b5366;
    border: 1px dashed rgba(14,159,177,0.35);
    box-shadow: none;
}

.landed-calculator--insights .landed-calculator__key:hover,
.landed-calculator--insights .landed-calculator__key:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(14,159,177,0.38);
    outline: none;
}

.landed-calculator__screen input {
    width: 100%;
    background: #000;
    border: none;
    border-radius: 16px;
    padding: 18px;
    font-size: 32px;
    text-align: right;
    color: #a7f3d0;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.55);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.landed-calculator__pads {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.landed-calculator__btn {
    border: none;
    border-radius: 14px;
    padding: 14px;
    font-size: 18px;
    font-weight: 600;
    color: #e5e7eb;
    background: rgba(55,65,81,0.8);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    box-shadow: 0 12px 25px rgba(0,0,0,0.35);
}

.landed-calculator__btn--accent {
    background: linear-gradient(160deg, #f97316, #fb923c);
    color: #1f1306;
}

.landed-calculator__btn--wide {
    grid-column: span 2;
}

.landed-calculator__btn:active {
    transform: translateY(2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.35);
}

@media (max-width: 1400px) {
    .landed-layout {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
    }

    .landed-side {
        grid-column: span 2;
        margin-left: 0;
        width: 100%;
    }

    .landed-calculator {
        width: 100%;
        align-self: stretch;
    }
}

@media (max-width: 1100px) {
    .landed-layout {
        grid-template-columns: 1fr;
    }

    .landed-side {
        position: static;
        margin-left: 0;
        width: 100%;
    }

    .landed-calculator {
        width: 100%;
        align-self: stretch;
    }

    .landed-panel {
        max-width: 100%;
    }

    .landed-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .landed-field span {
        flex: initial;
    }

    .landed-field input,
    .landed-field select {
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
    }

    .landed-field__triple-inputs,
    .landed-field__double-inputs {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr;
    }

    .landed-field__input-group {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .calc-layout {
        grid-template-columns: 1fr;
    }

    .calc-layout__right {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .flow-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .calc-field-group__body {
        grid-template-columns: 1fr;
    }

    .calc-field-row {
        padding: 10px 12px;
    }

    .landed-calculator__pads {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .landed-calculator--insights .landed-calculator__metrics {
        grid-template-columns: 1fr;
    }

    .landed-calculator--insights .landed-calculator__key {
        min-width: 48%;
    }
}

    .rastreo-main {
        background: radial-gradient(circle at 85% 0, rgba(14,159,177,0.18), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,0.95), rgba(239,246,255,0.95));
    }

    .tracker-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 28px;
        padding: 28px;
        border-radius: 24px;
        border: 1px solid rgba(14,159,177,0.16);
        background: linear-gradient(120deg, rgba(14,159,177,0.12), rgba(255,255,255,0.95));
        box-shadow: 0 25px 60px rgba(11,33,48,0.08);
        margin-bottom: 28px;
    }

    .tracker-eyebrow {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #0e9fb1;
        margin-bottom: 6px;
    }

    .tracker-hero__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(120px, 1fr));
        gap: 16px;
    }

    .tracker-hero__stat {
        background: #fff;
        border: 1px solid rgba(14,159,177,0.16);
        border-radius: 16px;
        padding: 14px 18px;
        text-align: right;
    }

    .tracker-hero__stat span {
        display: block;
        font-size: 12px;
        color: #4a6072;
    }

    .tracker-hero__stat strong {
        font-size: 22px;
        color: #0b2130;
    }

    .rastreo-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
        gap: 22px;
        align-items: flex-start;
    }

    .tracker-panel {
        border: 1px solid rgba(15,23,42,0.08);
        border-radius: 22px;
        background: #fff;
        padding: 22px;
        box-shadow: 0 18px 45px rgba(11,33,48,0.08);
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .tracker-panel--map {
        grid-column: span 2;
        padding-bottom: 0;
    }

    .tracker-panel__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }

    .tracker-panel__header h3 {
        margin: 0;
        color: #0b2130;
    }

    .tracker-map {
        width: 100%;
        height: 430px;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(15,23,42,0.08);
    }

    /* ── GPS Status Bar ── */
    .gps-status-bar {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .5rem 1rem;
        border-radius: 10px;
        font-size: .83rem;
        font-weight: 500;
        margin-bottom: .5rem;
        transition: background .3s, color .3s;
    }
    .gps-status--off      { background: #f1f5f9; color: #64748b; }
    .gps-status--buscando { background: #fef9c3; color: #92400e; }
    .gps-status--activo   { background: #dcfce7; color: #166534; }
    .gps-status--error    { background: #fee2e2; color: #991b1b; }

    /* ── Mi posición (punto azul pulsante) ── */
    .gps-mi-posicion { position: relative; width: 24px; height: 24px; }
    .gps-mi-posicion__punto {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        width: 14px; height: 14px;
        background: #4285f4;
        border: 2px solid #fff;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(66,133,244,.5);
        z-index: 2;
    }
    .gps-mi-posicion__onda {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        width: 24px; height: 24px;
        background: rgba(66,133,244,.25);
        border-radius: 50%;
        animation: gps-onda 1.8s ease-out infinite;
    }
    @keyframes gps-onda {
        0%   { width:14px; height:14px; opacity:.8; }
        100% { width:36px; height:36px; opacity:0; }
    }

    /* ── Estadísticas del recorrido ── */
    .recorrido-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .75rem;
        margin: .75rem 0 0;
    }
    .recorrido-stat {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: .6rem .75rem;
        display: flex;
        flex-direction: column;
        gap: .2rem;
    }
    .recorrido-stat span { font-size: .75rem; color: #64748b; }
    .recorrido-stat strong { font-size: 1rem; color: #0f172a; }

    /* ── Tabs ── */
    .tracker-tabs {
        display: flex;
        border-bottom: 2px solid #e2e8f0;
        margin-bottom: 1rem;
    }
    .tracker-tab {
        flex: 1;
        padding: .55rem .4rem;
        font-size: .8rem;
        font-weight: 600;
        color: #64748b;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        cursor: pointer;
        transition: color .2s, border-color .2s;
    }
    .tracker-tab:hover { color: #0e9fb1; }
    .tracker-tab--active { color: #0e9fb1; border-bottom-color: #0e9fb1; }
    .tracker-tab-content { display: none; }
    .tracker-tab-content--active { display: block; }

    /* ── Panel paradas ── */
    .paradas-list { display: flex; flex-direction: column; gap: .6rem; max-height: 520px; overflow-y: auto; }
    .parada-card {
        display: flex;
        gap: .75rem;
        align-items: flex-start;
        padding: .75rem;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #fff;
        transition: box-shadow .2s;
    }
    .parada-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
    .parada-card--completada { border-left: 3px solid #34a853; }
    .parada-card--en_ruta    { border-left: 3px solid #0e9fb1; }
    .parada-card--pendiente  { border-left: 3px solid #f4b400; }
    .parada-card--no_atendida,
    .parada-card--cancelada  { border-left: 3px solid #ff7c63; opacity: .8; }
    .parada-num {
        width: 26px; height: 26px; min-width: 26px;
        background: #0e9fb1;
        color: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: .8rem; font-weight: 700;
    }
    .parada-info { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
    .parada-cliente { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .parada-cliente strong { font-size: .9rem; }
    .parada-tiempo {
        display: flex; gap: .75rem; flex-wrap: wrap;
        font-size: .8rem; color: #555;
    }
    .parada-duracion { font-weight: 600; color: #0e9fb1; }
    .parada-duracion--activa { color: #ea4335; animation: parpadeo 1.5s step-start infinite; }
    @keyframes parpadeo { 50% { opacity: .4; } }
    .parada-bar {
        height: 4px;
        background: #e2e8f0;
        border-radius: 4px;
        overflow: hidden;
        margin-top: .25rem;
    }
    .parada-bar__fill {
        height: 100%;
        background: linear-gradient(90deg, #0e9fb1, #34a853);
        border-radius: 4px;
        transition: width .5s;
    }
    .parada-checkin-btn { align-self: center; white-space: nowrap; min-width: 90px; text-align: center; }

    .tracker-map__legend {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
        padding: 18px 0;
    }

    .tracker-map__legend div {
        background: rgba(14,159,177,0.08);
        border-radius: 16px;
        padding: 12px 14px;
    }

    .tracker-map__legend strong {
        display: block;
        font-size: 13px;
        color: #0b2130;
    }

    .tracker-map__legend p {
        margin: 6px 0 0;
        color: #4a6072;
        font-size: 13px;
    }

    .tracker-chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .tracker-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 999px;
        font-weight: 600;
        border: 1px solid transparent;
    }

    .tracker-chip--online {
        background: rgba(14,159,177,0.15);
        color: #0e5c6b;
        border-color: rgba(14,159,177,0.4);
    }

    .tracker-chip--planned {
        background: rgba(127,0,178,0.15);
        color: #4a0f5c;
        border-color: rgba(127,0,178,0.35);
    }

    .tracker-chip--visited {
        background: rgba(46,204,113,0.15);
        color: #1b7d48;
        border-color: rgba(46,204,113,0.3);
    }

    .tracker-chip--idle {
        background: rgba(244,180,0,0.2);
        color: #8a5c00;
        border-color: rgba(244,180,0,0.45);
    }

    .tracker-session-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .tracker-session-card {
        border: 1px solid rgba(15,23,42,0.08);
        border-radius: 18px;
        padding: 16px;
        background: rgba(244,249,255,0.8);
    }

    .tracker-session-card header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .tracker-session-card strong {
        display: block;
        color: #0b2130;
    }

    .tracker-session-card span {
        font-size: 12px;
        color: #4a6072;
    }

    .tracker-progress {
        width: 100%;
        height: 6px;
        background: rgba(14,159,177,0.2);
        border-radius: 999px;
        overflow: hidden;
        margin: 12px 0 6px;
    }

    .tracker-progress span {
        display: block;
        height: 100%;
        background: linear-gradient(120deg, #0e9fb1, #7f00b2);
    }

    .tracker-timeline {
        border-top: 1px dashed rgba(15,23,42,0.1);
        padding-top: 14px;
        display: grid;
        gap: 10px;
    }

    .tracker-timeline__item {
        display: flex;
        gap: 10px;
        font-size: 13px;
        color: #4a6072;
    }

    .tracker-timeline__item span {
        font-weight: 600;
        color: #0e9fb1;
    }

    .tracker-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .tracker-form label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
        color: #4a6072;
    }

    .tracker-form input {
        border: 1px solid rgba(15,23,42,0.12);
        border-radius: 12px;
        padding: 10px 12px;
        font-size: 14px;
        font-family: inherit;
    }

    .tracker-form__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .tracker-save,
    .tracker-refresh,
    .tracker-clear {
        border: none;
        border-radius: 12px;
        padding: 10px 16px;
        font-weight: 600;
        cursor: pointer;
    }

    .tracker-save {
        background: linear-gradient(120deg, #0e9fb1, #7f00b2);
        color: #fff;
    }

    .tracker-refresh {
        background: rgba(14,159,177,0.12);
        color: #0b5366;
        border: 1px solid rgba(14,159,177,0.25);
    }

    .tracker-clear {
        background: transparent;
        color: #bf1650;
    }

    .tracker-clients {
        border-top: 1px solid rgba(15,23,42,0.08);
        padding-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .tracker-clients__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tracker-client-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .tracker-client-list li {
        border: 1px solid rgba(15,23,42,0.08);
        border-radius: 14px;
        padding: 12px 14px;
        background: rgba(247,242,255,0.6);
        display: flex;
        justify-content: space-between;
        gap: 16px;
    }

    .tracker-client-list strong {
        display: block;
        color: #0b2130;
    }

    .tracker-client-list span {
        font-size: 12px;
        color: #4a6072;
    }

    .tracker-client-list small {
        font-size: 12px;
        color: #0b5366;
        font-weight: 600;
    }

    .tracker-client-empty {
        text-align: center;
        color: #7a8a99;
        font-size: 13px;
    }

    /* ── Rastreo: New components ── */
    .tracker-autocomplete {
        display: none;
        position: absolute;
        z-index: 100;
        background: #fff;
        border: 1px solid #d0d5dd;
        border-radius: 6px;
        max-height: 200px;
        overflow-y: auto;
        width: 100%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .tracker-ac-item {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 13px;
        border-bottom: 1px solid #f0f0f0;
    }

    .tracker-ac-item:hover {
        background: rgba(14,159,177,0.08);
    }

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

    .tracker-form label {
        position: relative;
    }

    .tracker-visita-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f0f0f0;
        transition: background .15s;
    }

    .tracker-visita-item:hover {
        background: rgba(14,159,177,0.04);
    }

    .tracker-visita--completada {
        border-left: 3px solid #34a853;
    }

    .tracker-visita--en_ruta {
        border-left: 3px solid #0e9fb1;
    }

    .tracker-visita--pendiente {
        border-left: 3px solid #f4b400;
    }

    .tracker-visita--no_atendida {
        border-left: 3px solid #ff7c63;
    }

    .tracker-visita--cancelada {
        border-left: 3px solid #999;
        opacity: 0.6;
    }

    .tracker-visita-info {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        flex: 1;
        min-width: 0;
    }

    .tracker-visita-info > div {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .tracker-hora {
        font-size: 12px;
        color: #0e9fb1;
        font-weight: 600;
        background: rgba(14,159,177,0.1);
        padding: 1px 6px;
        border-radius: 4px;
    }

    .tracker-vendedor-name {
        font-size: 12px;
        color: #666;
    }

    .tracker-visita-actions {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-shrink: 0;
        flex-wrap: wrap;
    }

    .tracker-estado-select,
    .tracker-resultado-select {
        font-size: 12px;
        padding: 3px 6px;
        border: 1px solid #d0d5dd;
        border-radius: 4px;
        background: #fff;
    }

    .tracker-nota-input {
        font-size: 12px;
        padding: 3px 6px;
        border: 1px solid #d0d5dd;
        border-radius: 4px;
        width: 100px;
    }

    .tracker-filters {
        background: rgba(255,255,255,0.8);
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }

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

        .tracker-panel--map {
            grid-column: span 1;
        }
    }

    @media (max-width: 768px) {
        .tracker-hero,
        .tracker-panel__header {
            flex-direction: column;
            align-items: flex-start;
        }

        .tracker-hero__stats {
            grid-template-columns: 1fr;
            width: 100%;
        }

        .tracker-form__grid {
            grid-template-columns: 1fr;
        }

        .tracker-map {
            height: 320px;
        }
    }

.scenario-panel {
    background: linear-gradient(145deg, rgba(14,159,177,0.12), rgba(255,255,255,0.95));
    border: 1px solid rgba(14,159,177,0.2);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 28px;
    box-shadow: 0 20px 60px rgba(10, 4, 24, 0.08);
}

.scenario-panel__header h3 {
    margin: 0;
    color: #0b2130;
}

.scenario-panel__header p {
    margin: 4px 0 0;
    color: #4a6072;
    font-size: 13px;
}

.scenario-panel__eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #0e9fb1;
    margin-bottom: 6px;
    font-weight: 600;
}

.scenario-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.scenario-panel__grid--outputs {
    margin-top: 24px;
}

.scenario-pill {
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 16px;
    padding: 14px 16px;
    min-height: 120px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.scenario-pill__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7a88;
    margin-bottom: 6px;
}

.scenario-pill__value {
    font-size: 18px;
    color: #0b2130;
    font-weight: 600;
    line-height: 1.3;
}

.scenario-pill__edit {
    align-self: flex-start;
    margin-top: 10px;
    border: 1px solid rgba(14,159,177,0.35);
    background: rgba(14,159,177,0.12);
    color: #0b5366;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.scenario-pill__edit:hover,
.scenario-pill__edit:focus-visible {
    background: rgba(14,159,177,0.25);
    border-color: rgba(14,159,177,0.6);
    outline: none;
}

.scenario-pill--output {
    border-color: rgba(255,124,99,0.25);
    background: rgba(255,124,99,0.08);
}

.excel-sheet {
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,251,255,0.92));
    border: 1px solid rgba(14,159,177,0.12);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 25px 55px rgba(15,4,32,0.08);
    margin-bottom: 28px;
}

.excel-sheet__header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.excel-sheet__eyebrow {
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #0e9fb1;
    margin-bottom: 4px;
    font-weight: 600;
}

.excel-sheet__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5b7185;
    font-size: 13px;
}

.excel-sheet__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14,159,177,0.12);
    color: var(--import-color-ocean);
    border: 1px solid rgba(14,159,177,0.35);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
}

.excel-sheet__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.excel-sheet__group {
    border: 1px solid rgba(8,32,64,0.08);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.excel-sheet__group-header {
    padding: 16px 18px 10px;
    border-bottom: 1px solid rgba(8,32,64,0.06);
}

.excel-sheet__group-header h4 {
    margin: 0;
    font-size: 15px;
    color: #1f2a37;
}

.excel-sheet__group-header small {
    color: #6c7c91;
    font-size: 12px;
}

.excel-table-wrapper {
    overflow-x: auto;
}

.excel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.excel-table thead {
    background: #f3f7fb;
}

.excel-table th,
.excel-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(15,23,42,0.06);
}

.excel-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c7c91;
    font-weight: 700;
}

.excel-table tbody tr:nth-child(even) {
    background: rgba(244,249,255,0.65);
}

.excel-table tbody tr:hover {
    background: rgba(14,159,177,0.08);
}

.excel-table__formula {
    font-family: 'Segoe UI', Consolas, 'Courier New', monospace;
    color: #5f6b7b;
    font-size: 12px;
}

.excel-sheet__group-footer {
    padding: 12px 18px;
    background: rgba(14,159,177,0.06);
    border-top: 1px solid rgba(14,159,177,0.15);
    font-size: 12px;
    color: #536273;
}

.scenario-field-focus {
    outline: 2px solid var(--import-color-coral);
    box-shadow: 0 0 0 3px rgba(255, 124, 99, 0.35);
    border-color: var(--import-color-coral) !important;
    transition: outline 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 768px) {
    .intel-tooltip-bubble {
        left: 0;
        right: auto;
        max-width: min(260px, 70vw);
    }
}

.ticket-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 4, 24, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
}

.ticket-modal--open {
    display: flex;
}

.ticket-modal__content {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 25px 60px rgba(15, 4, 32, 0.35);
    position: relative;
}

.ticket-modal {
    border: none;
    padding: 0;
    background: transparent;
}

.ticket-modal::backdrop {
    background: rgba(10, 4, 24, 0.78);
}

.ticket-modal:not([open]) {
    display: none;
}

.ticket-modal.ticket-modal--open {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(10, 4, 24, 0.78);
    z-index: 2000;
}

.ticket-modal__content {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    width: 90vw;
    max-width: 460px;
    box-shadow: 0 25px 60px rgba(15, 4, 32, 0.35);
    position: relative;
}

.ticket-preview {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    border: 1px dashed var(--border-color);
    border-radius: 22px;
    padding: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ticket-preview__section {
    background: #fdfbff;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(127, 0, 178, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ticket-preview__section--header {
    text-align: center;
    background: linear-gradient(135deg, rgba(127, 0, 178, 0.12), #ffffff);
    border: 1px solid rgba(127, 0, 178, 0.2);
}

.ticket-preview__section--body {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticket-preview__section--footer {
    text-align: center;
    background: #f9f4ff;
}

.ticket-preview__header {
    margin-bottom: 12px;
}

.ticket-preview__header h4 {
    margin-bottom: 4px;
    font-size: 18px;
}

.ticket-preview__ruc,
.ticket-preview__text {
    font-size: 13px;
    margin: 0;
    white-space: pre-line;
}

.ticket-preview__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    font-size: 13px;
    text-align: center;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #faf5ff;
}

.ticket-preview__meta span {
    display: block;
    color: #7b6f8a;
    font-size: 12px;
}

.ticket-preview__items {
    border: 1px solid rgba(127, 0, 178, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fefcff;
}

.ticket-preview__items table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ticket-preview__items th,
.ticket-preview__items td {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    text-align: left;
}

.ticket-preview__items th:nth-child(2),
.ticket-preview__items td:nth-child(2) {
    text-align: center;
    width: 60px;
}

.ticket-preview__items th:nth-child(3),
.ticket-preview__items td:nth-child(3) {
    text-align: right;
    width: 80px;
}

.ticket-preview__items small {
    color: #7b6f8a;
}

.ticket-preview__totals {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    border-top: 1px dashed var(--border-color);
    padding-top: 10px;
}

.ticket-preview__totals div {
    display: flex;
    justify-content: space-between;
}

.ticket-preview__total {
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
    font-weight: 700;
}

.ticket-preview__footer {
    margin-top: 14px;
    font-size: 12px;
    text-align: center;
    color: #5f4d73;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-preview__footer span {
    display: block;
}

.ticket-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

@media (max-width: 600px) {
    .ticket-modal__content {
        padding: 18px;
    }
    .ticket-preview {
        max-height: 55vh;
    }
}

.tabla-imagen {
    font-size: 28px;
    text-align: center;
}

.totals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.total-general input {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

.totals-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.totals-actions .btn {
    flex: 1 1 160px;
    text-align: center;
}

/* Importación Module */
.importacion-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid rgba(14,159,177,0.2);
    background: linear-gradient(115deg, rgba(14,159,177,0.15), rgba(255,124,99,0.12));
    box-shadow: 0 35px 65px rgba(14,159,177,0.25);
    margin-bottom: 20px;
}

.importacion-hero__copy h2 {
    margin: 6px 0 12px;
    color: #143857;
}

.importacion-hero__eyebrow {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(20, 56, 87, 0.75);
}

.importacion-hero__stats {
    list-style: none;
    display: flex;
    gap: 24px;
    padding: 0;
    margin: 20px 0 0;
}

.importacion-hero__stats li {
    padding: 10px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(20,56,87,0.08);
    min-width: 150px;
}

.importacion-hero__stats strong {
    display: block;
    font-size: 20px;
    color: #0f4e63;
}

.importacion-hero__stats span {
    font-size: 12px;
    color: rgba(20,56,87,0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.importacion-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 220px;
}

.importacion-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
}

.importacion-grid--secondary {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.importacion-panel {
    background: linear-gradient(160deg, #ffffff, rgba(238, 251, 255, 0.85));
    border-radius: 20px;
    border: 1px solid rgba(14,159,177,0.12);
    box-shadow: 0 25px 55px rgba(19, 37, 79, 0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.importacion-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.importacion-panel__header h3 {
    margin-bottom: 4px;
}

.importacion-panel__header p {
    margin: 0;
    color: #7b6f8a;
    font-size: 13px;
}

.import-meta {
    font-size: 12px;
    color: #776c8f;
}

.importacion-table td {
    vertical-align: top;
}

.import-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.import-status--info { background: rgba(64, 115, 255, 0.12); color: #3057ff; }
.import-status--success { background: rgba(46, 204, 113, 0.15); color: #1e8c4d; }
.import-status--warning { background: rgba(243, 156, 18, 0.15); color: #c87a0d; }
.import-status--danger { background: rgba(255, 77, 109, 0.18); color: #c0392b; }
.import-status--accent { background: rgba(14, 159, 177, 0.15); color: #0e5968; }
.import-status--neutral { background: rgba(121, 124, 140, 0.18); color: #3f3d56; }

.import-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.import-progress__bar {
    width: 100%;
    height: 6px;
    background: #efe9ff;
    border-radius: 999px;
    overflow: hidden;
}

.import-progress__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light));
    border-radius: 999px;
}

.importacion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.importacion-list__item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(122, 110, 140, 0.15);
}

.importacion-list__item:last-child {
    border-bottom: none;
}

.importacion-list__status {
    text-align: right;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.importacion-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 18px;
    position: relative;
}

.importacion-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(127, 0, 178, 0.25);
}

.timeline-item {
    position: relative;
    margin-bottom: 18px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color);
}

.timeline-item--alerta::before { background: var(--danger-color); }
.timeline-item--control::before { background: var(--warning-color); }

.timeline-date {
    font-size: 12px;
    color: #7b6f8a;
    margin-bottom: 4px;
}

.timeline-content {
    background: #faf8ff;
    border-radius: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(127, 0, 178, 0.12);
}

.timeline-content p {
    margin: 4px 0 0;
    color: #5f4d73;
    font-size: 13px;
}

.importacion-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-card {
    border: 1px dashed rgba(127, 0, 178, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fefbff;
}

.action-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.action-card--alta {
    background: linear-gradient(135deg, rgba(255,124,99,0.2), rgba(255,239,235,0.85));
    border-color: rgba(255,124,99,0.45);
    box-shadow: 0 25px 45px rgba(255,124,99,0.25);
}

.action-card--media {
    background: linear-gradient(135deg, rgba(255,179,71,0.15), rgba(255,248,235,0.9));
    border-color: rgba(255,179,71,0.35);
}

.action-card--baja {
    background: linear-gradient(135deg, rgba(54,210,166,0.18), rgba(237,252,247,0.92));
    border-color: rgba(54,210,166,0.35);
}

.action-pill--alta {
    background: rgba(255,124,99,0.18);
    color: #c43e33;
}

.action-pill--media {
    background: rgba(255,179,71,0.2);
    color: #c56a07;
}

.action-pill--baja {
    background: rgba(54,210,166,0.2);
    color: #1c7b63;
}

.action-card h4 {
    margin-bottom: 4px;
    font-size: 15px;
}

.action-card p {
    margin: 0 0 6px;
    color: #4a3e64;
    font-size: 13px;
}

.calc-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 20px 0 10px;
}

.calc-summary-card {
    border-radius: 18px;
    border: 1px solid rgba(14,159,177,0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,251,255,0.9));
    padding: 18px;
    box-shadow: 0 18px 45px rgba(20,7,36,0.07);
}

.calc-overline {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 11px;
    color: #0e4f62;
    margin-bottom: 12px;
}

.calc-meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calc-meta-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #4a3e64;
}

.calc-meta-list span {
    color: #7a6e8c;
}

.calc-meta-list strong {
    color: #1f1231;
    font-weight: 600;
    text-align: right;
}

.result-actions {
    margin-top: 15px;
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed rgba(14,159,177,0.35);
    background: rgba(14,159,177,0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.result-actions__text h4 {
    margin: 0 0 4px;
    color: #0e4f62;
}

.result-actions__text p {
    margin: 0;
    color: #4a3e64;
    font-size: 13px;
}

.result-actions__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.result-download-form {
    margin: 0;
}

.download-icon {
    font-size: 16px;
}

.import-toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3000;
}

.import-toast {
    background: rgba(14,159,177,0.95);
    color: #fff;
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: 0 15px 35px rgba(14,159,177,0.35);
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.import-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .importacion-hero {
        flex-direction: column;
    }

    .importacion-hero__stats {
        flex-direction: column;
        width: 100%;
    }

    .result-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .calc-summary-grid {
        grid-template-columns: 1fr;
    }

    .calc-meta-list li {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

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

/* Modal genérico */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(13, 0, 38, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}

.modal-content {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 420px;
    padding: 24px;
    box-shadow: 0 30px 60px rgba(15,10,40,0.25);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

@media (max-width: 1100px) {
    .venta-layout {
        grid-template-columns: 1fr;
    }

    .totals-actions .btn {
        flex: 1 1 calc(50% - 10px);
    }

    .venta-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .presentaciones-dinamicas {
        grid-template-columns: 1fr;
    }

    .totals-actions .btn {
        flex: 1 1 100%;
    }

    .section-card,
    .venta-card {
        padding: 18px;
    }
}

.product-panel {
    padding: 20px;
}

.product-panel-grid {
    display: grid;
    grid-template-columns: 0.2fr 0.8fr;
    gap: 20px;
    align-items: flex-start;
}

.product-panel-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-panel-details {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

@media (max-width: 900px) {
    .product-panel-grid {
        grid-template-columns: 1fr;
    }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(127,0,178,0.12);
}

/* Autocomplete */
.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 20;
    display: none;
}

.autocomplete-item {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.autocomplete-item:hover {
    background: #f5f5f5;
}

.autocomplete-item strong {
    font-weight: 600;
    color: #333;
}

.autocomplete-item span {
    font-size: 12px;
    color: #666;
}

.autocomplete-empty {
    color: #999;
    cursor: default;
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar:not(.collapsed) {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .charts-section {
        grid-template-columns: 1fr;
    }

}

/* Página web module */
.pagina-web-module {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    background: linear-gradient(180deg, rgba(239,246,255,0.55), rgba(249,252,255,0.95));
    min-height: 100vh;
}

.pagina-web-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 30px;
    border-radius: 28px;
    border: 1px solid rgba(14,159,177,0.24);
    background: linear-gradient(120deg, rgba(14,159,177,0.16), rgba(13,0,38,0.04));
    box-shadow: 0 30px 65px rgba(10,39,68,0.12);
}

.pagina-web-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 11px;
    color: rgba(13,0,38,0.65);
    margin-bottom: 8px;
}

.pagina-web-hero__lead {
    max-width: 640px;
    color: rgba(11,33,48,0.8);
    margin: 12px 0 0;
}

.pagina-web-hero__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 18px;
    background: rgba(11,33,48,0.85);
    color: #fff;
    padding: 18px 22px;
    border-radius: 22px;
    min-width: 240px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.15);
}

.pagina-web-hero__label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.7);
}

.pagina-web-hero__value {
    font-size: 26px;
    font-weight: 700;
}

.pagina-web-alert {
    border-radius: 16px;
    padding: 14px 18px;
    font-weight: 600;
}

.pagina-web-alert--success {
    background: rgba(46,204,113,0.15);
    border: 1px solid rgba(46,204,113,0.35);
    color: #1b7d48;
}

.pagina-web-alert--error {
    background: rgba(255,77,109,0.15);
    border: 1px solid rgba(255,77,109,0.35);
    color: #8c1f34;
}

.pagina-web-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.pagina-web-stat {
    border-radius: 18px;
    border: 1px solid rgba(13,0,38,0.06);
    background: #fff;
    padding: 16px 18px;
    box-shadow: 0 22px 45px rgba(10,4,38,0.08);
}

.pagina-web-stat__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(11,33,48,0.6);
}

.pagina-web-stat__value {
    font-size: 28px;
    font-weight: 700;
    color: #0b2130;
    margin: 6px 0;
}

.pagina-web-stat__hint {
    font-size: 12px;
    color: rgba(11,33,48,0.6);
}

.pagina-web-endpoint {
    border-radius: 26px;
    border: 1px solid rgba(14,159,177,0.22);
    background: linear-gradient(120deg, rgba(255,255,255,0.95), rgba(230,249,255,0.95));
    padding: 24px 28px;
    box-shadow: 0 35px 60px rgba(11,33,48,0.12);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pagina-web-endpoint header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.pagina-web-endpoint__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 12px;
    color: rgba(11,33,48,0.7);
}

.pagina-web-endpoint__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.pagina-web-endpoint__value {
    font-family: 'Segoe UI', Consolas, 'Courier New', monospace;
    font-size: 14px;
    background: rgba(11,33,48,0.05);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(11,33,48,0.15);
    word-break: break-all;
}

.pagina-web-endpoint__warning {
    color: #b5373f;
}

/* ---- Sección Conexión Tienda ---- */
.pagina-web-conexion {
    border-radius: 26px;
    border: 1px solid rgba(14,159,177,0.22);
    background: linear-gradient(120deg, rgba(255,255,255,0.95), rgba(230,249,255,0.95));
    padding: 24px 28px;
    box-shadow: 0 35px 60px rgba(11,33,48,0.12);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pagina-web-conexion header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pagina-web-conexion__grid {
    display: grid;
    gap: 18px;
}

.pagina-web-conexion__card {
    border: 2px solid rgba(11,33,48,0.12);
    border-radius: 18px;
    padding: 20px 24px;
    background: #fff;
    transition: border-color 0.3s ease;
}

.pagina-web-conexion__status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(11,33,48,0.08);
}

.pagina-web-conexion__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.pagina-web-conexion__status--checking .pagina-web-conexion__dot {
    background: #f59e0b;
    animation: pulseDot 1s ease-in-out infinite;
}

.pagina-web-conexion__status--connected .pagina-web-conexion__dot {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.5);
}

.pagina-web-conexion__status--disconnected .pagina-web-conexion__dot {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239,68,68,0.4);
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.pagina-web-conexion__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.pagina-web-conexion__details span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(11,33,48,0.6);
}

.pagina-web-pedidos {
    border-radius: 24px;
    border: 1px solid rgba(13,0,38,0.08);
    background: #fff;
    padding: 22px 26px;
    box-shadow: 0 32px 55px rgba(9,16,40,0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pagina-web-monitor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.pagina-web-bars {
    display: grid;
    gap: 10px;
}

.pagina-web-bar-row {
    display: grid;
    grid-template-columns: 48px 1fr 38px;
    gap: 10px;
    align-items: center;
    font-size: 0.85rem;
}

.pagina-web-bar-row > div {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--light-bg, #eef2f7);
}

.pagina-web-bar-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color, #6c5ce7);
}

.pagina-web-bar-row strong {
    text-align: right;
}

@media (max-width: 800px) {
    .pagina-web-monitor-grid {
        grid-template-columns: 1fr;
    }
}

.pagina-web-pedidos__header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}

.pagina-web-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.pagina-web-filter-form select {
    border: 1px solid rgba(11,33,48,0.2);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 13px;
    min-width: 160px;
}

.pagina-web-empty {
    text-align: center;
    border: 1px dashed rgba(11,33,48,0.15);
    border-radius: 18px;
    padding: 24px;
    color: rgba(11,33,48,0.6);
}

.pagina-web-empty__hint {
    font-size: 13px;
    color: rgba(11,33,48,0.5);
}

.pagina-web-table-wrapper {
    overflow-x: auto;
}

.pagina-web-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 960px;
}

.pagina-web-table th,
.pagina-web-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(11,33,48,0.08);
    vertical-align: top;
}

.pagina-web-table th {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(11,33,48,0.65);
    background: rgba(239,246,255,0.65);
}

.pagina-web-meta {
    font-size: 12px;
    color: rgba(11,33,48,0.6);
    margin: 4px 0 0;
}

.pagina-web-detalle summary {
    cursor: pointer;
    font-weight: 600;
    color: #0b5366;
}

.pagina-web-detalle ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pagina-web-detalle li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #0b2130;
}

.pagina-web-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pagina-web-status.estado-pendiente { background: rgba(255,179,71,0.2); color: #a86705; }
.pagina-web-status.estado-en-proceso { background: rgba(14,159,177,0.2); color: #0e5666; }
.pagina-web-status.estado-atendido { background: rgba(46,204,113,0.2); color: #1f7a4c; }
.pagina-web-status.estado-cancelado { background: rgba(255,77,109,0.2); color: #8c1f34; }

.pagina-web-status-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pagina-web-status-form select {
    border: 1px solid rgba(11,33,48,0.25);
    border-radius: 12px;
    padding: 6px 10px;
    font-size: 13px;
}

.pagina-web-status-form button {
    border: none;
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 600;
    background: linear-gradient(120deg, #0e9fb1, #7f00b2);
    color: #fff;
    cursor: pointer;
}

.pagina-web-notas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.pagina-web-notas article {
    border-radius: 20px;
    border: 1px solid rgba(11,33,48,0.08);
    background: #fff;
    padding: 18px 22px;
    box-shadow: 0 22px 40px rgba(9,16,40,0.08);
}

.pagina-web-notas ul,
.pagina-web-notas ol {
    margin: 12px 0 0 18px;
    color: rgba(11,33,48,0.7);
}

@media (max-width: 1024px) {
    .pagina-web-table {
        min-width: 100%;
    }
}

@media (max-width: 720px) {
    .pagina-web-module {
        padding: 18px;
    }

    .pagina-web-hero__summary {
        grid-template-columns: 1fr;
    }

    .pagina-web-pedidos__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pagina-web-detail-actions {
        flex-direction: column;
    }

    .pagina-web-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Botones Página Web ---- */
.pagina-web-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.pagina-web-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.pagina-web-btn--ver {
    background: rgba(14,159,177,0.12);
    color: #0e5666;
}

.pagina-web-btn--venta {
    background: linear-gradient(120deg, #0e9fb1, #7f00b2);
    color: #fff;
}

.pagina-web-btn--vinculada {
    background: rgba(46,204,113,0.15);
    color: #1f7a4c;
}

.pagina-web-btn--back {
    background: rgba(11,33,48,0.06);
    color: #0b2130;
}

.pagina-web-btn--lg {
    padding: 10px 20px;
    font-size: 14px;
}

.pagina-web-btn--xl {
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 16px;
}

.pagina-web-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

/* ---- Detalle del pedido ---- */
.pagina-web-detail-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pagina-web-detail-actions__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pagina-web-status-form--inline {
    flex-direction: row;
    align-items: center;
}

.pagina-web-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
}

.pagina-web-detail-card {
    border-radius: 22px;
    border: 1px solid rgba(13,0,38,0.08);
    background: #fff;
    padding: 22px 26px;
    box-shadow: 0 22px 45px rgba(9,16,40,0.07);
}

.pagina-web-detail-card h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: #0b2130;
}

.pagina-web-detail-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.pagina-web-detail-card__grid span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(11,33,48,0.6);
    display: block;
}

.pagina-web-detail-card__grid p {
    margin: 4px 0 0;
    font-weight: 600;
    color: #0b2130;
}

.pagina-web-table--productos tfoot td {
    border-top: 2px solid rgba(11,33,48,0.12);
    padding-top: 12px;
}

/* ---- Venta vinculada ---- */
.pagina-web-venta-vinculada {
    border-radius: 18px;
    border: 2px solid rgba(46,204,113,0.35);
    background: rgba(46,204,113,0.06);
    padding: 18px 22px;
}

.pagina-web-venta-vinculada h3 {
    margin: 0 0 14px;
    font-size: 15px;
}

.pagina-web-venta-vinculada__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.pagina-web-venta-vinculada__grid span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(11,33,48,0.6);
    display: block;
}

.pagina-web-venta-vinculada__grid p {
    margin: 4px 0 0;
    font-weight: 600;
}

.pagina-web-venta-vinculada__grid a {
    color: #0e9fb1;
    text-decoration: none;
    font-weight: 700;
}

.pagina-web-venta-vinculada__grid a:hover {
    text-decoration: underline;
}

/* ---- CTA ---- */
.pagina-web-detail-cta {
    text-align: center;
    padding: 24px;
    border-radius: 22px;
    border: 2px dashed rgba(14,159,177,0.3);
    background: rgba(14,159,177,0.04);
}

/* ---- Code block ---- */
.pagina-web-code-block {
    background: rgba(11,33,48,0.04);
    border: 1px solid rgba(11,33,48,0.1);
    border-radius: 14px;
    padding: 16px 20px;
    font-family: 'Segoe UI', Consolas, 'Courier New', monospace;
    font-size: 13px;
    overflow-x: auto;
    white-space: pre;
    color: #0b2130;
    line-height: 1.6;
}

/* Notificaciones */
.nav-icon-bell {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff4d6d;
    color: #fff;
    font-size: 11px;
    border-radius: 999px;
    padding: 2px 6px;
    font-weight: 700;
}

.notifications-panel {
    position: absolute;
    top: 42px;
    right: 0;
    width: 320px;
    background: #fff;
    border: 1px solid rgba(11,33,48,0.12);
    border-radius: 18px;
    box-shadow: 0 25px 50px rgba(9,16,40,0.18);
    padding: 14px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1200;
}

.notifications-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.notifications-header button {
    border: none;
    background: transparent;
    color: #0e5c6b;
    font-weight: 600;
    cursor: pointer;
}

.notifications-header button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.notification-item {
    border: 1px solid rgba(11,33,48,0.08);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.notification-item.is-unread {
    background: rgba(14,159,177,0.12);
    border-color: rgba(14,159,177,0.35);
}

.notification-title {
    font-weight: 700;
    margin: 0;
    color: #0b2130;
}

.notification-message {
    margin: 4px 0;
    font-size: 13px;
    color: rgba(11,33,48,0.7);
}

.notification-date {
    font-size: 12px;
    color: rgba(11,33,48,0.6);
}

.notification-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.notification-link {
    font-size: 12px;
    color: #0e5c6b;
    text-decoration: none;
}

.notification-read {
    border: none;
    background: rgba(11,33,48,0.08);
    border-radius: 999px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.notification-read:disabled {
    opacity: 0.5;
    cursor: default;
}

.notification-empty {
    text-align: center;
    font-size: 13px;
    color: rgba(11,33,48,0.6);
}

.notifications-footer {
    margin-top: 12px;
    text-align: right;
}

.notifications-footer a {
    font-size: 12px;
    color: #0e5c6b;
    text-decoration: none;
}


/* ----------------------------------------------------------------
   NUEVAS FUNCIONALIDADES anadidas automaticamente
   ---------------------------------------------------------------- */

/* -- Dark Mode --------------------------------------------------- */
body.dark-mode {
    --primary-color: #a855f7;
    --primary-color-dark: #7c3aed;
    --secondary-color: #1e1b4b;
    --dark-bg: #0f172a;
    --light-bg: #1e293b;
    --border-color: #334155;
    background-color: #0f172a;
    color: #e2e8f0;
}
body.dark-mode .top-nav         { background: #1e293b; border-bottom-color: #334155; }
body.dark-mode .sidebar         { background: #1e293b; border-right-color: #334155; }
body.dark-mode .main-content    { background: #0f172a; }
body.dark-mode .table-section,
body.dark-mode .filters-section,
body.dark-mode .card,
body.dark-mode .chart-container,
body.dark-mode .summary-section,
body.dark-mode .form-container  { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .data-table th   { background: #334155; color: #e2e8f0; }
body.dark-mode .data-table td   { border-color: #334155; color: #cbd5e1; }
body.dark-mode .data-table tr:hover td { background: #273549; }
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea         { background: #273549; border-color: #475569; color: #e2e8f0; }
body.dark-mode .nav-link        { color: #cbd5e1; }
body.dark-mode .nav-link:hover  { color: #fff; background: rgba(168,85,247,.2); }
body.dark-mode .menu-link       { color: #cbd5e1; }
body.dark-mode .menu-link:hover { color: #fff; }
body.dark-mode .submenu         { background: #0f172a; }
body.dark-mode .submenu a       { color: #94a3b8; }
body.dark-mode .submenu a:hover { color: #fff; }
body.dark-mode .page-header     { border-bottom-color: #334155; }
body.dark-mode .page-header h1  { color: #e2e8f0; }
body.dark-mode .btn-secondary   { background: #334155; color: #e2e8f0; }
body.dark-mode label            { color: #cbd5e1; }
body.dark-mode .alert-warning   { background: #451a03; border-color: #92400e; color: #fcd34d; }
body.dark-mode .kpi-bar         { background: #1e293b; border-color: #334155; }
body.dark-mode .kpi-item        { background: #273549; }
body.dark-mode .kpi-value       { color: #a855f7; }

.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 6px;
    color: inherit;
    transition: background 0.2s;
}
.dark-mode-toggle:hover { background: rgba(168,85,247,.2); }

/* -- Busqueda global -------------------------------------------- */
.global-search { position: relative; display: flex; align-items: center; }
.global-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 6px;
    color: inherit;
    transition: background 0.2s;
}
.global-search-toggle:hover { background: rgba(168,85,247,.2); }
.global-search-box {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 340px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    z-index: 9999;
    overflow: hidden;
}
body.dark-mode .global-search-box { background: #1e293b; border-color: #334155; }
.global-search-box input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    background: transparent;
    color: inherit;
}
.global-search-results { max-height: 320px; overflow-y: auto; }
.global-search-group { padding: 6px 14px 2px; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
.global-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-size: 13px;
    transition: background 0.15s;
}
.global-search-item:hover { background: var(--light-bg); }
body.dark-mode .global-search-item:hover { background: #273549; }
.global-search-item-icon { font-size: 16px; width: 24px; text-align: center; }
.global-search-empty { padding: 16px; text-align: center; color: #9ca3af; font-size: 13px; }

/* -- Modal de confirmacion -------------------------------------- */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.confirm-modal {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: modalIn .2s ease;
}
body.dark-mode .confirm-modal { background: #1e293b; color: #e2e8f0; }
@keyframes modalIn {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.confirm-modal-msg { margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
.confirm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* -- Barra de alerta de stock bajo ----------------------------- */
.stock-alert-bar {
    background: #fff3cd;
    border-bottom: 2px solid #f59e0b;
    color: #92400e;
    padding: 6px 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.dark-mode .stock-alert-bar { background: #451a03; border-color: #92400e; color: #fcd34d; }
.stock-alert-bar a { color: #d97706; font-weight: 600; text-decoration: underline; }

/* -- KPI Bar (dashboard tiempo real) --------------------------- */
.kpi-bar {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-radius: 10px;
}
.kpi-item {
    flex: 1;
    min-width: 130px;
    background: var(--light-bg);
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
}
.kpi-label { font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 20px; font-weight: 700; color: var(--primary-color); margin-top: 2px; }
.kpi-sub   { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.kpi-refresh { font-size: 11px; color: #9ca3af; padding: 0 4px; cursor: pointer; }

/* -- Responsive / Mobile ---------------------------------------- */
@media (max-width: 768px) {
    .top-nav-left .nav-link { display: none; }
    .top-nav-left .nav-link.mobile-visible { display: flex; }
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 500; position: fixed; }
    .sidebar.mobile-open { transform: translateX(0); }
    .main-content { margin-left: 0 !important; }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 499;
    }
    .sidebar-overlay.active { display: block; }
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cards-grid { grid-template-columns: 1fr 1fr; }
    .kpi-bar { gap: 8px; }
    .kpi-item { min-width: 100px; }
    .global-search-box { width: 280px; right: -60px; }
    .chart-container { min-width: 0; }
}
@media (max-width: 480px) {
    .top-nav { flex-wrap: wrap; height: auto; padding: 6px 10px; }
    .cards-grid { grid-template-columns: 1fr; }
    .kpi-bar { flex-direction: column; }
    .confirm-modal { padding: 20px; }
}

/* ================================================================
   MOBILE OPTIMIZATIONS — pantallas <= 768px
   ================================================================ */
@media (max-width: 768px) {

    /* ── Navegación superior ─────────────────────────────── */
    .top-nav {
        padding: 0 10px;
        height: 52px;
    }
    .top-nav-left .nav-link { display: none; }
    .top-nav-right .nav-icon.tipo-cambio { display: none; }

    /* ── Contenido principal sin margen de sidebar ──────── */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 12px 10px 80px; /* espacio para nav inferior */
    }

    /* ── Encabezados de página más compactos ─────────────── */
    .page-header h1 { font-size: 20px; }
    .page-header p  { font-size: 13px; }

    /* ── Secciones / filtros ─────────────────────────────── */
    .filters-section { padding: 14px; border-radius: 10px; }
    .filter-form {
        flex-direction: column;
        gap: 10px;
    }
    .filter-form input,
    .filter-form select,
    .filter-form button {
        width: 100%;
        font-size: 15px;
        padding: 10px 12px;
        min-height: 44px;
    }

    /* ── Tablas: scroll horizontal ───────────────────────── */
    .table-section { padding: 10px; border-radius: 10px; overflow: hidden; }
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
        white-space: nowrap;
    }
    .data-table th,
    .data-table td { padding: 8px 10px; }

    /* ── Botones táctiles ────────────────────────────────── */
    .btn {
        min-height: 42px;
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 8px;
        touch-action: manipulation;
    }
    .btn-sm { min-height: 36px; font-size: 13px; }

    /* ── Cards/estadísticas ──────────────────────────────── */
    .cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card   { padding: 14px 12px; border-radius: 10px; }
    .stat-number { font-size: 22px; }

    /* ── Formularios ─────────────────────────────────────── */
    .form-group { margin-bottom: 14px; }
    .form-group label { font-size: 14px; font-weight: 600; }
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* evita zoom automático en iOS */
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 8px;
        width: 100%;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    /* ── Modales ─────────────────────────────────────────── */
    .modal-content,
    .confirm-modal {
        width: 96vw !important;
        max-width: 96vw !important;
        margin: 10px auto;
        padding: 18px 14px;
        border-radius: 14px;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ── Acciones en tablas (botones inline) ─────────────── */
    .action-btns { display: flex; flex-wrap: wrap; gap: 4px; }
    .action-btns .btn { padding: 6px 10px; font-size: 12px; min-height: 32px; }

    /* ── Paginación ──────────────────────────────────────── */
    .pagination { flex-wrap: wrap; gap: 4px; justify-content: center; }
    .pagination a,
    .pagination span { min-width: 36px; min-height: 36px; font-size: 13px; }

    /* ── Ocultar columnas poco importantes en móvil ──────── */
    .hide-mobile { display: none !important; }

    /* ── Sección de acciones de página ──────────────────── */
    .page-actions {
        flex-direction: column;
        gap: 8px;
    }
    .page-actions .btn { width: 100%; justify-content: center; }
}

/* ── Teléfonos pequeños (< 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .cards-grid { grid-template-columns: 1fr; }
    .main-content { padding: 10px 8px 80px; }
    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 6px 8px; }
    .page-header h1 { font-size: 18px; }
}

/* ── Barra de navegación inferior (solo móvil) ────────────────── */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #140722;
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 1001;
        height: 60px;
        align-items: stretch;
    }
    .mobile-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.6);
        text-decoration: none;
        font-size: 10px;
        gap: 3px;
        transition: color .2s, background .2s;
        padding: 6px 4px;
    }
    .mobile-bottom-nav a .nav-icon-emoji { font-size: 20px; line-height: 1; }
    .mobile-bottom-nav a.active,
    .mobile-bottom-nav a:hover { color: #fff; background: rgba(127,0,178,0.3); }
}
@media (min-width: 769px) {
    .mobile-bottom-nav { display: none; }
}