:root {
    --cs-blue: #19458d;
    --cs-blue-dark: #071d41;
    --cs-blue-soft: #eaf2ff;

    --cs-orange: #ff6a00;
    --cs-orange-soft: #fff1e8;

    --cs-white: #ffffff;
    --cs-bg: #f6f8fc;

    --cs-text: #1f2937;
    --cs-muted: #6b7280;

    --cs-border: #e5e7eb;

    --cs-success: #16a34a;
    --cs-success-soft: #ecfdf3;

    --cs-danger: #dc2626;
    --cs-danger-soft: #fef2f2;

    --cs-warning: #d97706;
    --cs-warning-soft: #fff7ed;

    --cs-radius: 12px;
    --cs-shadow: 0 8px 24px rgba(15, 74, 168, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--cs-bg);
    color: var(--cs-text);
}

/* =========================
   ESTRUCTURA PRINCIPAL
========================= */

.cs-app {
    min-height: 100vh;
    display: flex;
}

.cs-sidebar {
    width: 245px;
    background: linear-gradient(
        180deg,
        var(--cs-blue) 0%,
        var(--cs-blue-dark) 100%
    );
    color: white;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 1000;
}

.cs-main {
    margin-left: 245px;
    width: calc(100% - 245px);
    min-height: 100vh;
}

/* =========================
   LOGO / MARCA
========================= */

.cs-brand {
    min-height: 78px;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.cs-brand img {
    max-width: 165px;
    max-height: 48px;
    object-fit: contain;
}

.cs-brand-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.cs-brand-text span {
    color: var(--cs-orange);
}

/* =========================
   MENÚ LATERAL
========================= */

.cs-menu {
    padding: 14px 10px 24px;
}

.cs-menu-section {
    margin-top: 18px;
}

.cs-menu-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    padding: 0 12px 8px;
    color: rgba(255, 255, 255, 0.58);
}

.cs-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 11px 13px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 15px;
    transition: 0.2s;
}

.cs-menu-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.cs-menu-link.active {
    background: var(--cs-orange);
    color: white;
    font-weight: 600;
}

.cs-menu-icon {
    width: 22px;
    text-align: center;
    font-size: 18px;
}

/* =========================
   NAVBAR SUPERIOR
========================= */

.cs-topbar {
    min-height: 72px;
    background: var(--cs-white);
    border-bottom: 1px solid var(--cs-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 24px;
    position: sticky;
    top: 0;
    z-index: 900;
}

.cs-topbar-left,
.cs-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-selector {
    min-width: 170px;
    border: 1px solid var(--cs-border);
    background: white;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--cs-text);
}

.cs-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cs-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cs-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.cs-user-info {
    line-height: 1.2;
}

.cs-user-name {
    font-weight: 700;
    font-size: 14px;
}

.cs-user-role {
    color: var(--cs-muted);
    font-size: 12px;
}

/* =========================
   CONTENIDO
========================= */

.cs-content {
    padding: 24px;
}

.cs-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}

.cs-page-title {
    margin: 0;
    font-size: 28px;
    color: var(--cs-blue-dark);
}

.cs-page-subtitle {
    margin: 5px 0 0;
    color: var(--cs-muted);
    font-size: 15px;
}

/* =========================
   TARJETAS
========================= */

.cs-grid {
    display: grid;
    gap: 18px;
}

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

.cs-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cs-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cs-card {
    background: var(--cs-white);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    padding: 18px;
}

.cs-stat-label {
    color: var(--cs-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.cs-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--cs-blue-dark);
}

.cs-stat-note {
    margin-top: 6px;
    font-size: 13px;
    color: var(--cs-muted);
}

/* =========================
   BOTONES
========================= */

.cs-btn {
    border: none;
    border-radius: 8px;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}

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

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

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

.cs-btn-orange:hover {
    filter: brightness(0.95);
}

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

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

.cs-btn-light {
    background: white;
    color: var(--cs-blue);
    border: 1px solid var(--cs-border);
}

.cs-btn-light:hover {
    background: var(--cs-blue-soft);
}

/* =========================
   FORMULARIOS
========================= */

.cs-form-card {
    background: white;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    padding: 22px;
}

.cs-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cs-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cs-form-group.full {
    grid-column: 1 / -1;
}

.cs-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-text);
}

.cs-input,
.cs-select,
.cs-textarea {
    width: 100%;
    border: 1px solid #cfd7e3;
    border-radius: 8px;
    background: white;
    padding: 11px 12px;
    font-size: 16px;
    color: var(--cs-text);
    outline: none;
    transition: 0.2s;
}

.cs-input,
.cs-select {
    min-height: 44px;
}

.cs-textarea {
    min-height: 110px;
    resize: vertical;
}

.cs-input:focus,
.cs-select:focus,
.cs-textarea:focus {
    border-color: var(--cs-blue);
    box-shadow: 0 0 0 3px rgba(15, 74, 168, 0.10);
}

.cs-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* =========================
   BUSCADORES / FILTROS
========================= */

.cs-toolbar {
    background: white;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cs-toolbar-left,
.cs-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cs-search {
    min-width: 290px;
}

/* =========================
   TABLAS
========================= */

.cs-table-card {
    background: white;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
}

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

.cs-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.cs-table thead {
    background: var(--cs-blue-soft);
}

.cs-table th {
    color: var(--cs-blue-dark);
    font-size: 13px;
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid var(--cs-border);
    white-space: nowrap;
}

.cs-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--cs-border);
    font-size: 14px;
    vertical-align: middle;
}

.cs-table tbody tr:hover {
    background: #fafcff;
}

/* =========================
   ESTADOS
========================= */

.cs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.cs-badge-success {
    color: #166534;
    background: var(--cs-success-soft);
}

.cs-badge-warning {
    color: #9a3412;
    background: var(--cs-warning-soft);
}

.cs-badge-danger {
    color: #991b1b;
    background: var(--cs-danger-soft);
}

.cs-badge-info {
    color: var(--cs-blue-dark);
    background: var(--cs-blue-soft);
}

/* =========================
   ALERTAS
========================= */

.cs-alert {
    border-radius: 9px;
    padding: 13px 15px;
    margin-bottom: 18px;
    font-size: 14px;
}

.cs-alert-success {
    background: var(--cs-success-soft);
    color: #166534;
    border: 1px solid #bbf7d0;
}

.cs-alert-danger {
    background: var(--cs-danger-soft);
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* =========================
   LOGIN
========================= */

.cs-login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: white;
}

.cs-login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.cs-login-box {
    width: 100%;
    max-width: 430px;
}

.cs-login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.cs-login-logo img {
    max-width: 250px;
    max-height: 120px;
    object-fit: contain;
}

.cs-login-title {
    font-size: 26px;
    color: var(--cs-blue-dark);
    margin-bottom: 6px;
}

.cs-login-subtitle {
    color: var(--cs-muted);
    margin-bottom: 28px;
}

.cs-login-brand-side {
    background: linear-gradient(
        135deg,
        var(--cs-blue-dark),
        var(--cs-blue)
    );
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    position: relative;
    overflow: hidden;
}

.cs-login-brand-content {
    max-width: 520px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.cs-login-brand-title {
    font-size: 40px;
    margin-bottom: 12px;
}

.cs-login-brand-title span {
    color: var(--cs-orange);
}

.cs-login-brand-text {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* =========================
   ACCESIBILIDAD / USABILIDAD
========================= */

button,
a,
input,
select,
textarea {
    font-family: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(255, 106, 0, 0.35);
    outline-offset: 2px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1200px) {
    .cs-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .cs-sidebar {
        width: 210px;
    }

    .cs-main {
        margin-left: 210px;
        width: calc(100% - 210px);
    }

    .cs-form-grid {
        grid-template-columns: 1fr;
    }

    .cs-login-page {
        grid-template-columns: 1fr;
    }

    .cs-login-brand-side {
        display: none;
    }
}

@media (max-width: 700px) {
    .cs-sidebar {
        position: static;
        width: 100%;
        min-height: auto;
    }

    .cs-app {
        display: block;
    }

    .cs-main {
        margin-left: 0;
        width: 100%;
    }

    .cs-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-topbar-left,
    .cs-topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .cs-content {
        padding: 16px;
    }

    .cs-grid-4,
    .cs-grid-3,
    .cs-grid-2 {
        grid-template-columns: 1fr;
    }

    .cs-toolbar {
        align-items: stretch;
    }

    .cs-toolbar-left,
    .cs-toolbar-right {
        width: 100%;
    }

    .cs-search {
        min-width: 100%;
        width: 100%;
    }

    .cs-page-header {
        flex-direction: column;
    }
}
.kontiva-login-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.12);

    color: white;

    font-size: 21px;
    font-weight: 700;
}
/* =========================================
   KONTIVA - LOGO DEL MENÚ
========================================= */

.kontiva-sidebar-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.kontiva-sidebar-logo img {
    width: 185px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* =========================================
   KONTIVA - SELECTORES SUPERIORES
========================================= */

.kontiva-top-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kontiva-selector-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
/* =========================================
   KONTIVA - BUSCADOR
========================================= */

.kontiva-search-container {
    position: relative;
}

.kontiva-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    pointer-events: none;
}

.kontiva-search-container .cs-input {
    padding-left: 42px;
}

.kontiva-record-counter {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 12px;

    background: var(--cs-blue-soft);

    color: var(--cs-blue-dark);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
}


/* =========================================
   KONTIVA - CLIENTES
========================================= */

.kontiva-client-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
}

.kontiva-client-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;

    border-radius: 10px;

    background: var(--cs-blue-soft);
    color: var(--cs-blue-dark);

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
}

.kontiva-client-name {
    font-weight: 600;
    color: var(--cs-text);
}

.kontiva-client-secondary {
    margin-top: 3px;

    font-size: 12px;

    color: var(--cs-muted);
}


/* =========================================
   KONTIVA - ACCIONES DE TABLA
========================================= */

.kontiva-table-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.kontiva-action-button {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--cs-border);
    border-radius: 8px;

    background: white;
    color: var(--cs-blue);

    text-decoration: none;

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.2s;
}

.kontiva-action-button:hover {
    background: var(--cs-blue-soft);
    border-color: var(--cs-blue);
}


/* =========================================
   KONTIVA - LISTADO DE VENTAS Y FACTURACIÓN
========================================= */

.kontiva-sales-table-card {
    overflow: visible;
}

.kontiva-sales-table-card .cs-table-scroll {
    overflow: visible;
}

.kontiva-invoice-state {
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.kontiva-invoice-state small {
    color: var(--cs-muted);
    font-size: 11px;
    line-height: 1.25;
}

.kontiva-invoice-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.kontiva-invoice-status-neutral {
    color: #475569;
    background: #f1f5f9;
}

.kontiva-invoice-status-info {
    color: var(--cs-blue-dark);
    background: var(--cs-blue-soft);
}

.kontiva-invoice-status-warning {
    color: #9a3412;
    background: var(--cs-warning-soft);
}

.kontiva-invoice-status-success {
    color: #166534;
    background: var(--cs-success-soft);
}

.kontiva-invoice-status-danger {
    color: #991b1b;
    background: var(--cs-danger-soft);
}

.kontiva-sales-actions {
    min-width: 185px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.kontiva-sales-actions form {
    width: 130px;
    margin: 0;
}

.kontiva-sales-primary-action {
    width: 130px;
    min-width: 130px;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    box-sizing: border-box;

    border: 1px solid var(--cs-blue);
    border-radius: 8px;
    background: var(--cs-blue);
    color: #ffffff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s;
}

.kontiva-sales-primary-action:hover {
    background: var(--cs-blue-dark);
    border-color: var(--cs-blue-dark);
    color: #ffffff;
}

.kontiva-actions-menu {
    position: relative;
}

.kontiva-actions-menu > summary {
    width: 36px;
    height: 36px;
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--cs-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
}

.kontiva-actions-menu > summary::-webkit-details-marker {
    display: none;
}

.kontiva-actions-menu > summary:hover,
.kontiva-actions-menu[open] > summary {
    border-color: var(--cs-blue);
    background: var(--cs-blue-soft);
}

.kontiva-actions-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 80;
    width: 225px;
    padding: 7px;
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 45, 85, 0.16);
}

.kontiva-actions-dropdown form {
    width: 100%;
}

.kontiva-dropdown-action {
    width: 100%;
    min-height: 39px;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--cs-text);
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.kontiva-dropdown-action span:first-child {
    width: 20px;
    color: var(--cs-blue);
    display: inline-flex;
    justify-content: center;
}

.kontiva-dropdown-action:hover {
    background: var(--cs-blue-soft);
    color: var(--cs-blue-dark);
}

.kontiva-dropdown-action.is-disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.kontiva-dropdown-action.is-disabled:hover {
    background: transparent;
    color: #94a3b8;
}

.kontiva-dropdown-danger {
    color: #b91c1c;
}

.kontiva-dropdown-danger span:first-child {
    color: #b91c1c;
}

.kontiva-dropdown-danger:hover {
    background: var(--cs-danger-soft);
    color: #991b1b;
}

@media (max-width: 1180px) {
    .kontiva-sales-table-card {
        overflow: hidden;
    }

    .kontiva-sales-table-card .cs-table-scroll {
        overflow-x: auto;
        padding-bottom: 170px;
        margin-bottom: -170px;
    }
}


/* =========================================
   KONTIVA - TABLA VACÍA
========================================= */

.kontiva-empty-state {
    text-align: center !important;
    padding: 50px 20px !important;
    color: var(--cs-muted);
}

.kontiva-empty-state strong {
    display: block;

    margin-top: 10px;

    color: var(--cs-text);

    font-size: 16px;
}

.kontiva-empty-state span {
    display: block;

    margin-top: 5px;

    font-size: 14px;
}

.kontiva-empty-icon {
    width: 52px;
    height: 52px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--cs-blue-soft);
    color: var(--cs-blue);

    font-size: 25px;
}


/* =========================================
   KONTIVA - SIN RESULTADOS
========================================= */

.kontiva-no-results {
    margin-top: 15px;

    padding: 18px;

    background: white;

    border: 1px solid var(--cs-border);
    border-radius: 10px;

    text-align: center;

    color: var(--cs-muted);
}
/* =========================================
   KONTIVA - FORMULARIOS POR SECCIONES
========================================= */

.kontiva-form-section {
    padding: 5px 0 28px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--cs-border);
}

.kontiva-form-section:last-of-type {
    margin-bottom: 0;
}

.kontiva-form-section-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

.kontiva-form-section-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--cs-blue);
    color: white;

    font-size: 15px;
    font-weight: 700;
}

.kontiva-form-section-header h2 {
    margin: 0;
    color: var(--cs-blue-dark);
    font-size: 18px;
}

.kontiva-form-section-header p {
    margin: 4px 0 0;
    color: var(--cs-muted);
    font-size: 13px;
}

.kontiva-required {
    color: var(--cs-orange);
    font-weight: 700;
}

.kontiva-field-help {
    color: var(--cs-muted);
    font-size: 12px;
    line-height: 1.4;
}

.kontiva-form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    padding-top: 5px;
}

@media (max-width: 700px) {

    .kontiva-form-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .kontiva-form-footer .cs-btn {
        width: 100%;
    }

}
/* =========================================
   KONTIVA - MODAL
========================================= */

.kontiva-modal-overlay {
    position: fixed;

    inset: 0;

    background: rgba(15, 23, 42, 0.58);

    z-index: 5000;

    align-items: center;
    justify-content: center;

    padding: 25px;
}

.kontiva-modal {
    width: 100%;
    max-width: 950px;

    height: 90vh;
    max-height: 90vh;

    background: white;

    border-radius: 14px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28);

    overflow: hidden;

    display: flex;
    flex-direction: column;
}


/* CABECERA */

.kontiva-modal-header {
    min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 17px 24px;

    border-bottom: 1px solid var(--cs-border);

    background: white;
}

.kontiva-modal-header h2 {
    margin: 0;

    color: var(--cs-blue-dark);

    font-size: 21px;
}

.kontiva-modal-header p {
    margin: 4px 0 0;

    color: var(--cs-muted);

    font-size: 13px;
}

.kontiva-modal-close {
    width: 40px;
    height: 40px;

    border: none;
    border-radius: 8px;

    background: transparent;

    color: var(--cs-text);

    font-size: 27px;

    cursor: pointer;
}

.kontiva-modal-close:hover {
    background: var(--cs-blue-soft);
}


/* CUERPO */

.kontiva-modal-body {
    display: grid;

    grid-template-columns: 185px minmax(0, 1fr);

    flex: 1;

    min-height: 0;

    overflow: hidden;
}


/* PASOS */

.kontiva-modal-steps {
    background: #f8faff;

    border-right: 1px solid var(--cs-border);

    padding: 25px 17px;

    overflow-y: auto;
}

.kontiva-step {
    position: relative;

    display: flex;
    gap: 11px;

    padding-bottom: 34px;
}

.kontiva-step:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 17px;
    top: 38px;

    width: 1px;
    height: calc(100% - 8px);

    background: #d8e0ec;
}

.kontiva-step-number {
    width: 35px;
    height: 35px;

    min-width: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf2f8;

    color: var(--cs-blue-dark);

    border: 1px solid #d8e0ec;

    font-weight: 700;

    position: relative;
    z-index: 2;
}

.kontiva-step.active .kontiva-step-number {
    background: var(--cs-blue);

    color: white;

    border-color: var(--cs-blue);
}

.kontiva-step strong {
    display: block;

    color: var(--cs-blue-dark);

    font-size: 13px;

    margin-top: 2px;
}

.kontiva-step span {
    display: block;

    color: var(--cs-muted);

    font-size: 11px;

    line-height: 1.5;

    margin-top: 4px;
}


/* CONTENIDO */

.kontiva-modal-content {
    padding: 24px;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: #b8c4d6 transparent;
}
.kontiva-modal-content::-webkit-scrollbar {
    width: 8px;
}

.kontiva-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.kontiva-modal-content::-webkit-scrollbar-thumb {
    background: #b8c4d6;
    border-radius: 10px;
}

.kontiva-modal-content::-webkit-scrollbar-thumb:hover {
    background: #8fa0b8;
}
.kontiva-modal-section {
    padding-bottom: 24px;

    margin-bottom: 24px;

    border-bottom: 1px solid var(--cs-border);
}

.kontiva-modal-section:last-child {
    margin-bottom: 0;

    border-bottom: none;
}

.kontiva-modal-section h3 {
    margin: 0 0 18px;

    padding-bottom: 8px;

    color: var(--cs-blue);

    border-bottom: 2px solid var(--cs-blue);

    font-size: 17px;
}


/* PIE */

.kontiva-modal-footer {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding: 14px 24px;

    border-top: 1px solid var(--cs-border);

    background: white;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .kontiva-modal-overlay {
        padding: 10px;
    }

    .kontiva-modal {
        max-height: 95vh;
    }

    .kontiva-modal-body {
        grid-template-columns: 1fr;
    }

    .kontiva-modal-steps {
        display: none;
    }

    .kontiva-modal-content {
        padding: 18px;
    }

}


@media (max-width: 600px) {

    .kontiva-modal-footer {
        flex-direction: column-reverse;
    }

    .kontiva-modal-footer .cs-btn {
        width: 100%;
    }

}
.kontiva-modal > form {
    display: flex;
    flex-direction: column;

    flex: 1;

    min-height: 0;
    overflow: hidden;
}
/* =========================================
   KONTIVA - MENSAJES TEMPORALES
========================================= */

.kontiva-flash-message {
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        max-height 0.4s ease,
        margin 0.4s ease,
        padding 0.4s ease;

    opacity: 1;
    transform: translateY(0);

    overflow: hidden;
}

.kontiva-flash-hide {
    opacity: 0;
    transform: translateY(-8px);

    max-height: 0;

    margin-top: 0;
    margin-bottom: 0;

    padding-top: 0;
    padding-bottom: 0;

    border-width: 0;
}
/* =========================================
   KONTIVA - MODALES PEQUEÑOS DE CATÁLOGOS
========================================= */

.kontiva-modal-small {
    max-width: 620px;
    height: auto;
    max-height: 90vh;
}

.kontiva-modal-small > form {
    overflow: hidden;
}

.kontiva-simple-modal-content {
    padding: 24px;

    overflow-y: auto;

    max-height: calc(90vh - 150px);
}
/* =========================================
   KONTIVA - OPCIONES TIPO CHECK
========================================= */

.kontiva-check-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px;

    border: 1px solid var(--cs-border);
    border-radius: 10px;

    background: #fafcff;

    cursor: pointer;
}

.kontiva-check-option:hover {
    border-color: #b9c8dc;
    background: var(--cs-blue-soft);
}

.kontiva-check-option input {
    width: 19px;
    height: 19px;

    margin-top: 2px;

    accent-color: var(--cs-blue);
}

.kontiva-check-option strong {
    display: block;

    color: var(--cs-text);

    font-size: 14px;
}

.kontiva-check-option small {
    display: block;

    margin-top: 4px;

    color: var(--cs-muted);

    font-size: 12px;
    line-height: 1.4;
}
/* =========================================
   KONTIVA - RESUMEN DE INVENTARIO
========================================= */

.kontiva-inventory-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    padding: 16px;

    background: var(--cs-blue-soft);

    border-radius: 10px;
}

.kontiva-inventory-summary div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kontiva-inventory-summary span {
    font-size: 12px;
    color: var(--cs-muted);
}

.kontiva-inventory-summary strong {
    color: var(--cs-blue-dark);
    font-size: 14px;
}


/* STOCK */

.kontiva-stock-box {
    padding: 14px;

    border: 1px solid var(--cs-border);
    border-radius: 10px;

    background: white;
}

.kontiva-stock-box span {
    display: block;

    color: var(--cs-muted);

    font-size: 12px;

    margin-bottom: 5px;
}

.kontiva-stock-box strong {
    color: var(--cs-blue-dark);

    font-size: 21px;
}


/* NOTA */

.kontiva-info-note {
    margin-top: 20px;

    padding: 13px 15px;

    background: var(--cs-orange-soft);

    border-left: 4px solid var(--cs-orange);

    border-radius: 7px;

    color: var(--cs-text);

    font-size: 13px;

    line-height: 1.5;
}


@media (max-width: 700px) {

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

}

/* =========================================================
   KONTIVA 2.0 - SIDEBAR MODERNO
========================================================= */

:root {
    --kontiva-sidebar-collapsed: 78px;
    --kontiva-sidebar-expanded: 255px;
}


/* =========================================================
   SIDEBAR BASE
========================================================= */

.cs-sidebar {
    width: var(--kontiva-sidebar-collapsed);

    background:
        linear-gradient(
            180deg,
            #123e78 0%,
            #071d41 100%
        );

    color: white;

    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    transition:
        width .25s ease,
        box-shadow .25s ease;
}


/* EXPANDIDO */

.cs-sidebar.expanded,
.cs-sidebar.hover-expanded {
    width: var(--kontiva-sidebar-expanded);

    box-shadow:
        8px 0 30px rgba(7, 29, 65, 0.18);
}


/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

.cs-main {
    margin-left: var(--kontiva-sidebar-collapsed);

    width:
        calc(
            100% - var(--kontiva-sidebar-collapsed)
        );

    min-height: 100vh;

    transition:
        margin-left .25s ease,
        width .25s ease;
}


/*
Cuando el menú queda FIJO expandido,
movemos también el contenido.
*/

body.kontiva-sidebar-pinned .cs-main {
    margin-left: var(--kontiva-sidebar-expanded);

    width:
        calc(
            100% - var(--kontiva-sidebar-expanded)
        );
}


/*
Cuando solamente hacemos HOVER,
el sidebar se superpone al contenido.
No desplaza toda la página.
*/


/* =========================================================
   HEADER SIDEBAR
========================================================= */

.kontiva-sidebar-header {
    min-height: 76px;

    display: flex;
    align-items: center;

    padding: 12px 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);

    flex-shrink: 0;

    position: relative;
}


.kontiva-sidebar-toggle {
    width: 46px;
    height: 46px;

    min-width: 46px;

    border: none;
    border-radius: 11px;

    background: transparent;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 23px;

    cursor: pointer;

    transition: .2s;
}


.kontiva-sidebar-toggle:hover {
    background:
        rgba(255, 255, 255, 0.12);
}


/* LOGO */

.kontiva-sidebar-brand {
    display: flex;
    align-items: center;

    margin-left: 12px;

    opacity: 0;
    visibility: hidden;

    transform: translateX(-8px);

    transition:
        opacity .2s ease,
        transform .2s ease;

    white-space: nowrap;
}


.kontiva-sidebar-brand img {
    width: 145px;
    height: auto;

    object-fit: contain;
}


.cs-sidebar.expanded
.kontiva-sidebar-brand,

.cs-sidebar.hover-expanded
.kontiva-sidebar-brand {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


/* =========================================================
   MENÚ
========================================================= */

.kontiva-sidebar-menu {
    flex: 1;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 14px 10px 20px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, .18)
        transparent;
}


.kontiva-sidebar-menu::-webkit-scrollbar {
    width: 6px;
}


.kontiva-sidebar-menu::-webkit-scrollbar-thumb {
    background:
        rgba(255, 255, 255, .18);

    border-radius: 10px;
}


/* =========================================================
   ITEM
========================================================= */

.kontiva-nav-item {
    width: 100%;

    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 9px 12px;

    margin-bottom: 5px;

    border: none;
    border-radius: 10px;

    background: transparent;

    color:
        rgba(255, 255, 255, .90);

    text-decoration: none;

    font-size: 14px;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease;
}


.kontiva-nav-item:hover {
    background:
        rgba(255, 255, 255, .10);

    color: white;
}


/* ICONO */

.kontiva-nav-icon {
    width: 34px;
    min-width: 34px;

    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 18px;

    transition:
        background .2s ease,
        color .2s ease;
}


/* TEXTO */

.kontiva-nav-text {
    flex: 1;

    text-align: left;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    transform: translateX(-6px);

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.cs-sidebar.expanded
.kontiva-nav-text,

.cs-sidebar.hover-expanded
.kontiva-nav-text {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


/* FLECHA */

.kontiva-nav-arrow {
    font-size: 20px;

    opacity: 0;
    visibility: hidden;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.cs-sidebar.expanded
.kontiva-nav-arrow,

.cs-sidebar.hover-expanded
.kontiva-nav-arrow {
    opacity: .75;
    visibility: visible;
}


/* =========================================================
   ACTIVO
========================================================= */

.kontiva-nav-item.active {
    background:
        linear-gradient(
            135deg,
            #236ed8,
            #1b5db7
        );

    color: white;

    box-shadow:
        0 6px 18px rgba(35, 110, 216, .24);
}


.kontiva-nav-item.active
.kontiva-nav-icon {
    background:
        rgba(255, 255, 255, .13);
}


/* PADRE ACTIVO */

.kontiva-nav-item.active-parent {
    color: white;
}


.kontiva-nav-item.active-parent
.kontiva-nav-icon {
    background: var(--cs-orange);

    color: white;
}


/* =========================================================
   GRUPOS
========================================================= */

.kontiva-nav-group {
    margin-bottom: 5px;
}


.kontiva-nav-group.open
.kontiva-nav-arrow {
    transform: rotate(90deg);
}


/* =========================================================
   SUBMENÚ
========================================================= */

.kontiva-submenu {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    margin-left: 42px;

    padding-left: 13px;

    border-left:
        1px solid rgba(255, 255, 255, .20);

    transition:
        max-height .28s ease,
        opacity .20s ease,
        margin-bottom .20s ease;
}


/*
Solo enseñamos submenús
cuando el sidebar está abierto.
*/

.cs-sidebar.expanded
.kontiva-nav-group.open
.kontiva-submenu,

.cs-sidebar.hover-expanded
.kontiva-nav-group.open
.kontiva-submenu {
    max-height: 600px;

    opacity: 1;

    margin-bottom: 8px;
}


.kontiva-submenu-link {
    min-height: 36px;

    display: flex;
    align-items: center;

    padding: 7px 10px;

    margin: 2px 0;

    border-radius: 7px;

    color:
        rgba(255, 255, 255, .78);

    text-decoration: none;

    font-size: 13px;

    transition: .18s;
}


.kontiva-submenu-link:hover {
    color: white;

    background:
        rgba(255, 255, 255, .09);
}


.kontiva-submenu-link.active {
    color: white;

    background:
        rgba(255, 106, 0, .18);

    border-left:
        3px solid var(--cs-orange);

    font-weight: 600;
}


/* OPCIONES TODAVÍA NO DISPONIBLES */

.kontiva-submenu-link.disabled {
    opacity: .42;

    cursor: not-allowed;

    user-select: none;
}


/* =========================================================
   FOOTER
========================================================= */

.kontiva-sidebar-footer {
    min-height: 58px;

    padding: 8px 13px;

    border-top:
        1px solid rgba(255, 255, 255, .10);

    display: flex;
    align-items: center;

    flex-shrink: 0;
}


.kontiva-collapse-button {
    width: 42px;
    height: 42px;

    border: none;
    border-radius: 9px;

    background: transparent;

    color:
        rgba(255, 255, 255, .85);

    font-size: 22px;

    cursor: pointer;
}


.kontiva-collapse-button:hover {
    background:
        rgba(255, 255, 255, .10);
}


/*
Cuando está contraído,
el botón inferior sigue centrado.
*/

.cs-sidebar:not(.expanded)
.kontiva-sidebar-footer {
    justify-content: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .cs-sidebar {
        width:
            var(--kontiva-sidebar-collapsed);
    }

    .cs-main {
        margin-left:
            var(--kontiva-sidebar-collapsed);

        width:
            calc(
                100%
                - var(--kontiva-sidebar-collapsed)
            );
    }

    body.kontiva-sidebar-pinned
    .cs-main {
        margin-left:
            var(--kontiva-sidebar-collapsed);

        width:
            calc(
                100%
                - var(--kontiva-sidebar-collapsed)
            );
    }

}


/*
En móvil se comportará como panel flotante.
*/

@media (max-width: 700px) {

    .cs-sidebar {
        position: fixed;

        width:
            var(--kontiva-sidebar-collapsed);

        min-height: 100vh;
    }


    .cs-sidebar.expanded,
    .cs-sidebar.hover-expanded {
        width:
            min(
                280px,
                calc(100vw - 40px)
            );
    }


    .cs-main,
    body.kontiva-sidebar-pinned
    .cs-main {
        margin-left:
            var(--kontiva-sidebar-collapsed);

        width:
            calc(
                100%
                - var(--kontiva-sidebar-collapsed)
            );
    }

}
/* =========================================================
   KONTIVA 2.0 - TOPBAR
========================================================= */

.kontiva-topbar {
    min-height: 76px;

    padding: 10px 24px;

    background:
        rgba(255, 255, 255, .98);

    border-bottom:
        1px solid #e8edf5;

    box-shadow:
        0 2px 10px rgba(15, 45, 90, .04);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    position: sticky;
    top: 0;

    z-index: 900;
}


/* =========================================================
   IZQUIERDA
========================================================= */

.kontiva-topbar-left {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   SELECTORES
========================================================= */

.kontiva-topbar-selector {
    min-width: 190px;

    height: 52px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 7px 11px;

    border:
        1px solid var(--cs-border);

    border-radius: 10px;

    background: white;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.kontiva-topbar-selector:hover {
    border-color:
        #b8c8dc;

    box-shadow:
        0 4px 14px rgba(7, 29, 65, .05);
}


.kontiva-topbar-selector-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;

    border-radius: 8px;

    background:
        var(--cs-blue-soft);

    color:
        var(--cs-blue);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;

    font-weight: 700;
}


.kontiva-topbar-selector-content {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 1px;
}


.kontiva-topbar-selector-label {
    font-size: 10px;

    font-weight: 700;

    color:
        var(--cs-muted);

    text-transform: uppercase;

    letter-spacing: .45px;
}


.kontiva-topbar-select {
    width: 100%;

    min-width: 0;

    border: none;

    background: transparent;

    padding: 0;

    outline: none;

    color:
        var(--cs-blue-dark);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


/* =========================================================
   DERECHA
========================================================= */

.kontiva-topbar-right {
    display: flex;
    align-items: center;

    gap: 8px;
}


/* =========================================================
   BOTONES ICONOS
========================================================= */

.kontiva-topbar-icon-button {
    width: 42px;
    height: 42px;

    min-width: 42px;

    border:
        1px solid transparent;

    border-radius: 10px;

    background: transparent;

    color:
        var(--cs-blue-dark);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;

    font-weight: 700;

    cursor: pointer;

    position: relative;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}


.kontiva-topbar-icon-button:hover {
    background:
        var(--cs-blue-soft);

    color:
        var(--cs-blue);

    border-color:
        #dbe7f8;
}


/* BOTÓN + */

.kontiva-topbar-add {
    border-radius: 50%;

    background:
        #236ed8;

    color: white;

    font-size: 25px;
}


.kontiva-topbar-add:hover {
    background:
        var(--cs-blue);

    color: white;
}


/* =========================================================
   NOTIFICACIONES
========================================================= */

.kontiva-notification-dot {
    position: absolute;

    top: 2px;
    right: 1px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background:
        #ef4444;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;

    font-weight: 700;

    border:
        2px solid white;
}


/* =========================================================
   DIVISOR
========================================================= */

.kontiva-topbar-divider {
    width: 1px;

    height: 32px;

    margin: 0 4px;

    background:
        var(--cs-border);
}


/* =========================================================
   USUARIO
========================================================= */

.kontiva-user-dropdown {
    position: relative;
}


.kontiva-user-button {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 5px 9px;

    border: none;

    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    transition: .18s;
}


.kontiva-user-button:hover {
    background:
        #f5f8fd;
}


.kontiva-user-avatar {
    width: 38px;
    height: 38px;

    min-width: 38px;

    border-radius: 50%;

    background:
        var(--cs-orange);

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;

    font-weight: 700;
}


.kontiva-user-summary {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    min-width: 0;

    line-height: 1.25;
}


.kontiva-user-summary strong {
    max-width: 155px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color:
        var(--cs-blue-dark);

    font-size: 13px;
}


.kontiva-user-summary span {
    max-width: 155px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color:
        var(--cs-muted);

    font-size: 11px;
}


.kontiva-user-arrow {
    color:
        var(--cs-muted);

    font-size: 14px;

    transition:
        transform .18s ease;
}


.kontiva-user-dropdown.open
.kontiva-user-arrow {
    transform:
        rotate(180deg);
}


/* =========================================================
   DROPDOWN USUARIO
========================================================= */

.kontiva-user-menu {
    width: 270px;

    position: absolute;

    top: calc(100% + 9px);
    right: 0;

    padding: 10px;

    background: white;

    border:
        1px solid var(--cs-border);

    border-radius: 12px;

    box-shadow:
        0 18px 40px rgba(7, 29, 65, .16);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-6px);

    transition:
        opacity .18s ease,
        transform .18s ease;

    z-index: 2000;
}


.kontiva-user-dropdown.open
.kontiva-user-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}


/* HEADER USUARIO */

.kontiva-user-menu-header {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 9px;
}


.kontiva-user-menu-avatar {
    width: 44px;
    height: 44px;

    min-width: 44px;

    border-radius: 50%;

    background:
        var(--cs-orange);

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
}


.kontiva-user-menu-header div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.kontiva-user-menu-header strong {
    color:
        var(--cs-blue-dark);

    font-size: 13px;
}


.kontiva-user-menu-header span {
    color:
        var(--cs-muted);

    font-size: 11px;
}


/* DIVISOR */

.kontiva-user-menu-divider {
    height: 1px;

    margin: 7px 0;

    background:
        var(--cs-border);
}


/* ITEMS */

.kontiva-user-menu-item {
    width: 100%;

    min-height: 40px;

    display: flex;
    align-items: center;

    padding: 8px 10px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color:
        var(--cs-text);

    font-size: 13px;

    text-align: left;

    cursor: pointer;

    transition: .18s;
}


.kontiva-user-menu-item:hover {
    background:
        var(--cs-blue-soft);

    color:
        var(--cs-blue);
}


.kontiva-user-menu-item.disabled {
    opacity: .45;

    cursor: not-allowed;
}


.kontiva-user-menu-item.disabled:hover {
    background: transparent;

    color:
        var(--cs-text);
}


.kontiva-user-menu-logout {
    color:
        var(--cs-danger);
}


.kontiva-user-menu-logout:hover {
    background:
        var(--cs-danger-soft);

    color:
        var(--cs-danger);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .kontiva-topbar-selector {
        min-width: 165px;
    }


    .kontiva-user-summary {
        display: none;
    }

}


@media (max-width: 850px) {

    .kontiva-topbar {
        padding:
            10px 14px;
    }


    .kontiva-topbar-selector {
        min-width: 145px;
    }


    .kontiva-topbar-selector-icon {
        display: none;
    }


    .kontiva-topbar-icon-button:nth-of-type(3) {
        display: none;
    }

}


@media (max-width: 650px) {

    .kontiva-topbar-selector:nth-child(2) {
        display: none;
    }


    .kontiva-topbar-add {
        display: none;
    }


    .kontiva-topbar-divider {
        display: none;
    }

}
/* =========================================================
   KONTIVA 2.0 - RESPONSIVE GENERAL
========================================================= */

@media (max-width: 900px) {

    /* TOPBAR EN DOS FILAS */

    .kontiva-topbar {
        min-height: auto;

        flex-wrap: wrap;

        padding:
            10px 14px;

        gap: 9px;
    }


    .kontiva-topbar-left {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .kontiva-topbar-selector {
        width: 100%;

        min-width: 0;
    }


    .kontiva-topbar-right {
        width: 100%;

        justify-content: flex-end;

        gap: 7px;

        padding-top: 2px;
    }


    /* USUARIO */

    .kontiva-user-summary {
        display: none;
    }


    .kontiva-user-button {
        padding:
            4px 5px;
    }


    /* CONTENIDO */

    .cs-content {
        padding:
            20px 16px;
    }


    /* CABECERAS DE MÓDULO */

    .cs-page-header {
        align-items: flex-start;

        gap: 14px;
    }


    /* TOOLBAR */

    .cs-toolbar-left {
        flex: 1;

        min-width: 0;
    }


    .kontiva-search-container {
        flex: 1;

        min-width: 220px;
    }


    .cs-search {
        width: 100%;

        min-width: 0;
    }

}



@media (max-width: 700px) {

    /*
    |--------------------------------------------------------------------------
    | CONTENIDO PRINCIPAL
    |--------------------------------------------------------------------------
    */

    .cs-main,
    body.kontiva-sidebar-pinned
    .cs-main {
        margin-left:
            var(--kontiva-sidebar-collapsed);

        width:
            calc(
                100%
                - var(--kontiva-sidebar-collapsed)
            );
    }


    /*
    |--------------------------------------------------------------------------
    | TOPBAR
    |--------------------------------------------------------------------------
    */

    .kontiva-topbar {
        padding:
            10px 12px;
    }


    .kontiva-topbar-left {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .kontiva-topbar-selector {
        height: 52px;

        padding:
            6px 9px;
    }


    .kontiva-topbar-selector-icon {
        display: none;
    }


    .kontiva-topbar-selector-label {
        font-size: 9px;
    }


    .kontiva-topbar-select {
        font-size: 13px;
    }


    /*
    |--------------------------------------------------------------------------
    | BOTONES SUPERIORES
    |--------------------------------------------------------------------------
    */

    .kontiva-topbar-icon-button {
        width: 38px;
        height: 38px;

        min-width: 38px;

        font-size: 17px;
    }


    .kontiva-topbar-add {
        display: inline-flex;

        font-size: 22px;
    }


    .kontiva-topbar-divider {
        height: 28px;
    }


    /*
    |--------------------------------------------------------------------------
    | PÁGINAS
    |--------------------------------------------------------------------------
    */

    .cs-content {
        padding:
            18px 12px;
    }


    .cs-page-header {
        flex-direction: column;

        margin-bottom: 18px;
    }


    .cs-page-title {
        font-size: 26px;
    }


    .cs-page-header > .cs-btn,
    .cs-page-header > button,
    .cs-page-header > a {
        align-self: flex-start;
    }


    /*
    |--------------------------------------------------------------------------
    | FILTROS
    |--------------------------------------------------------------------------
    */

    .cs-toolbar {
        display: block;

        padding: 13px;
    }


    .cs-toolbar-left {
        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(160px, .65fr);

        gap: 9px;
    }


    .cs-toolbar-right {
        width: 100%;

        margin-top: 11px;

        justify-content: flex-start;
    }


    .kontiva-search-container {
        min-width: 0;

        width: 100%;
    }


    .cs-search {
        width: 100%;

        min-width: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | TABLAS
    |--------------------------------------------------------------------------
    */

    .cs-table-card {
        width: 100%;

        overflow: hidden;
    }


    .cs-table-scroll {
        overflow-x: auto;

        -webkit-overflow-scrolling:
            touch;
    }


    .cs-table {
        min-width: 800px;
    }

}



@media (max-width: 520px) {

    /*
    |--------------------------------------------------------------------------
    | EMPRESA / SUCURSAL
    |--------------------------------------------------------------------------
    */

    .kontiva-topbar-left {
        grid-template-columns: 1fr;
    }


    /*
    |--------------------------------------------------------------------------
    | FILTROS
    |--------------------------------------------------------------------------
    */

    .cs-toolbar-left {
        grid-template-columns: 1fr;
    }


    .cs-toolbar-left .cs-select {
        width: 100% !important;
    }


    /*
    |--------------------------------------------------------------------------
    | USUARIO
    |--------------------------------------------------------------------------
    */

    .kontiva-user-arrow {
        display: none;
    }


    .kontiva-user-menu {
        width:
            min(
                270px,
                calc(100vw - 105px)
            );
    }

}
/* =========================================================
   KONTIVA - ACCIONES RÁPIDAS
========================================================= */

.kontiva-quick-actions {
    position: relative;
}


.kontiva-quick-menu {
    width: 285px;

    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    padding: 10px;

    background: white;

    border:
        1px solid var(--cs-border);

    border-radius: 12px;

    box-shadow:
        0 18px 40px
        rgba(7, 29, 65, .16);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-6px);

    transition:
        opacity .18s ease,
        transform .18s ease;

    z-index: 2100;
}


.kontiva-quick-actions.open
.kontiva-quick-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}


.kontiva-quick-menu-header {
    padding:
        8px 10px 11px;

    border-bottom:
        1px solid var(--cs-border);

    margin-bottom: 6px;
}


.kontiva-quick-menu-header strong {
    display: block;

    color:
        var(--cs-blue-dark);

    font-size: 14px;
}


.kontiva-quick-menu-header span {
    display: block;

    margin-top: 3px;

    color:
        var(--cs-muted);

    font-size: 11px;
}


.kontiva-quick-action {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 9px;

    border-radius: 9px;

    text-decoration: none;

    transition: .18s;
}


.kontiva-quick-action:hover {
    background:
        var(--cs-blue-soft);
}


.kontiva-quick-action-icon {
    width: 36px;
    height: 36px;

    min-width: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        var(--cs-orange-soft);

    color:
        var(--cs-orange);

    font-size: 17px;
}


.kontiva-quick-action strong {
    display: block;

    color:
        var(--cs-blue-dark);

    font-size: 13px;
}


.kontiva-quick-action div span {
    display: block;

    margin-top: 2px;

    color:
        var(--cs-muted);

    font-size: 11px;
}
/* =========================================================
   KONTIVA - CENTRO DE AYUDA
========================================================= */

.kontiva-help {
    position: relative;
}


.kontiva-help-menu {
    width: 320px;

    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    padding: 12px;

    background: white;

    border:
        1px solid var(--cs-border);

    border-radius: 13px;

    box-shadow:
        0 18px 40px
        rgba(7, 29, 65, .16);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-6px);

    transition:
        opacity .18s ease,
        transform .18s ease;

    z-index: 2200;
}


.kontiva-help.open
.kontiva-help-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}


.kontiva-help-header {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 6px;
}


.kontiva-help-icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

    border-radius: 10px;

    background:
        var(--cs-blue-soft);

    color:
        var(--cs-blue);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;

    font-weight: 700;
}


.kontiva-help-header strong {
    display: block;

    color:
        var(--cs-blue-dark);

    font-size: 14px;
}


.kontiva-help-header span {
    display: block;

    margin-top: 3px;

    color:
        var(--cs-muted);

    font-size: 11px;
}


.kontiva-help-divider {
    height: 1px;

    margin: 10px 0;

    background:
        var(--cs-border);
}


.kontiva-help-section {
    padding: 9px 8px 13px;
}


.kontiva-help-section strong {
    color:
        var(--cs-blue-dark);

    font-size: 13px;
}


.kontiva-help-section p {
    margin:
        5px 0 0;

    color:
        var(--cs-muted);

    font-size: 12px;

    line-height: 1.55;
}


.kontiva-help-link {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 9px;

    border-radius: 8px;

    color:
        var(--cs-text);

    text-decoration: none;

    font-size: 12px;
}


.kontiva-help-link:hover {
    background:
        var(--cs-blue-soft);
}


.kontiva-help-link span {
    color:
        var(--cs-muted);

    font-size: 10px;
}


.kontiva-help-link.disabled {
    opacity: .5;

    cursor: not-allowed;
}
.kontiva-notifications {
    position: relative;
}

.kontiva-notification-menu {
    width: 380px;
    max-height: 520px;

    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    background: white;

    border: 1px solid var(--cs-border);
    border-radius: 14px;

    box-shadow:
        0 18px 45px rgba(7, 29, 65, .18);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-6px);

    transition:
        opacity .18s ease,
        transform .18s ease;

    z-index: 2300;
}

.kontiva-notifications.open
.kontiva-notification-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.kontiva-notification-header {
    min-height: 66px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 13px 15px;

    border-bottom:
        1px solid var(--cs-border);
}

.kontiva-notification-header strong {
    display: block;
    color: var(--cs-blue-dark);
    font-size: 14px;
}

.kontiva-notification-header span {
    display: block;
    margin-top: 3px;
    color: var(--cs-muted);
    font-size: 11px;
}

.kontiva-notification-read-all {
    border: none;
    background: transparent;
    color: var(--cs-blue);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.kontiva-notification-list {
    max-height: 390px;
    overflow-y: auto;
}

.kontiva-notification-list form {
    margin: 0;
}

.kontiva-notification-item {
    width: 100%;

    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 12px 14px;

    border: none;
    border-bottom:
        1px solid #eef1f6;

    background: white;

    text-align: left;

    cursor: pointer;
}

.kontiva-notification-item:hover {
    background: #f8faff;
}

.kontiva-notification-item.unread {
    background: #f4f8ff;
}

.kontiva-notification-type {
    width: 38px;
    height: 38px;

    min-width: 38px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
}

.kontiva-notification-type.info {
    background: var(--cs-blue-soft);
    color: var(--cs-blue);
}

.kontiva-notification-type.warning {
    background: var(--cs-warning-soft);
    color: var(--cs-warning);
}

.kontiva-notification-type.danger {
    background: var(--cs-danger-soft);
    color: var(--cs-danger);
}

.kontiva-notification-content {
    flex: 1;
    min-width: 0;
}

.kontiva-notification-content strong {
    display: block;
    color: var(--cs-blue-dark);
    font-size: 12px;
}

.kontiva-notification-content > span {
    display: block;
    margin-top: 3px;
    color: var(--cs-muted);
    font-size: 11px;
    line-height: 1.45;
}

.kontiva-notification-content small {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 10px;
}

.kontiva-notification-unread-dot {
    width: 8px;
    height: 8px;

    min-width: 8px;

    margin-top: 5px;

    border-radius: 50%;

    background: #236ed8;
}

.kontiva-notification-empty {
    padding: 35px 20px;
    text-align: center;
}

.kontiva-notification-empty div {
    width: 48px;
    height: 48px;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: var(--cs-success-soft);
    color: var(--cs-success);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
}

.kontiva-notification-empty strong {
    display: block;
    color: var(--cs-blue-dark);
    font-size: 13px;
}

.kontiva-notification-empty span {
    display: block;
    max-width: 240px;

    margin: 5px auto 0;

    color: var(--cs-muted);
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 600px) {

    .kontiva-notification-menu {
        width:
            min(
                365px,
                calc(100vw - 105px)
            );
    }

}
/* =========================================================
   KONTIVA - BUSCADOR GLOBAL
========================================================= */

.kontiva-global-search {
    position: relative;
}


.kontiva-global-search-menu {
    width: 420px;

    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    background: white;

    border:
        1px solid var(--cs-border);

    border-radius: 14px;

    box-shadow:
        0 18px 45px
        rgba(7, 29, 65, .18);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-6px);

    transition:
        opacity .18s ease,
        transform .18s ease;

    z-index: 2400;
}


.kontiva-global-search.open
.kontiva-global-search-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}


/* HEADER */

.kontiva-global-search-header {
    padding:
        14px 16px 10px;
}


.kontiva-global-search-header strong {
    display: block;

    color:
        var(--cs-blue-dark);

    font-size: 14px;
}


.kontiva-global-search-header span {
    display: block;

    margin-top: 3px;

    color:
        var(--cs-muted);

    font-size: 11px;
}


/* INPUT */

.kontiva-global-search-box {
    position: relative;

    margin:
        0 14px 12px;
}


.kontiva-global-search-box > span {
    position: absolute;

    left: 12px;
    top: 50%;

    transform:
        translateY(-50%);

    font-size: 14px;

    pointer-events: none;
}


.kontiva-global-search-box input {
    width: 100%;

    min-height: 44px;

    padding:
        10px 12px 10px 39px;

    border:
        1px solid #cfd7e3;

    border-radius: 9px;

    outline: none;

    font-size: 14px;

    color:
        var(--cs-text);
}


.kontiva-global-search-box input:focus {
    border-color:
        var(--cs-blue);

    box-shadow:
        0 0 0 3px
        rgba(25, 69, 141, .10);
}


/* RESULTADOS */

.kontiva-global-search-results {
    max-height: 420px;

    overflow-y: auto;

    border-top:
        1px solid var(--cs-border);
}


.kontiva-global-search-empty {
    padding:
        28px 18px;

    text-align: center;

    color:
        var(--cs-muted);

    font-size: 12px;
}


.kontiva-global-search-item {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        11px 14px;

    border-bottom:
        1px solid #eef1f6;

    text-decoration: none;

    background: white;

    transition:
        background .18s ease;
}


.kontiva-global-search-item:hover {
    background:
        #f7faff;
}


.kontiva-global-search-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        var(--cs-orange-soft);

    color:
        var(--cs-orange);

    font-size: 17px;
}


.kontiva-global-search-content {
    flex: 1;

    min-width: 0;
}


.kontiva-global-search-content strong {
    display: block;

    color:
        var(--cs-blue-dark);

    font-size: 13px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.kontiva-global-search-content span {
    display: block;

    margin-top: 2px;

    color:
        var(--cs-muted);

    font-size: 11px;
}


.kontiva-global-search-type {
    font-size: 10px;

    font-weight: 700;

    color:
        var(--cs-blue);

    background:
        var(--cs-blue-soft);

    border-radius: 999px;

    padding:
        4px 8px;

    white-space: nowrap;
}


@media (max-width: 600px) {

    .kontiva-global-search-menu {
        width:
            min(
                410px,
                calc(100vw - 105px)
            );
    }

}
/* =========================================================
   KONTIVA - AJUSTE RESPONSIVE BUSCADOR GLOBAL
========================================================= */

@media (max-width: 700px) {

    .kontiva-global-search {
        position: static;
    }

    .kontiva-global-search-menu {
        position: fixed;

        top: 165px;

        left: calc(
            var(--kontiva-sidebar-collapsed)
            + 12px
        );

        right: 12px;

        width: auto;

        max-width: none;

        max-height: calc(
            100vh - 185px
        );

        border-radius: 12px;
    }

    .kontiva-global-search-results {
        max-height: calc(
            100vh - 310px
        );
    }

}
@media (max-width: 520px) {

    .kontiva-global-search-menu {
        top: 205px;

        left: calc(
            var(--kontiva-sidebar-collapsed)
            + 8px
        );

        right: 8px;
    }

}
@media (max-width: 700px) {

    .kontiva-global-search-item {
        align-items: flex-start;
        gap: 9px;
    }

    .kontiva-global-search-type {
        font-size: 9px;
        padding: 4px 6px;
    }

    .kontiva-global-search-content strong {
        white-space: normal;
    }

}
/* =========================================================
   KONTIVA 2.0 - DASHBOARD
========================================================= */

.kontiva-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 22px;
}


.kontiva-dashboard-welcome {
    display: block;

    margin-bottom: 3px;

    color: var(--cs-orange);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .5px;
}


.kontiva-dashboard-header h1 {
    margin: 0;

    color: var(--cs-blue-dark);

    font-size: 28px;
}


.kontiva-dashboard-header p {
    margin: 5px 0 0;

    color: var(--cs-muted);

    font-size: 13px;
}


.kontiva-dashboard-date {
    min-width: 125px;

    padding: 10px 14px;

    border: 1px solid var(--cs-border);
    border-radius: 10px;

    background: white;

    text-align: right;
}


.kontiva-dashboard-date span {
    display: block;

    color: var(--cs-muted);

    font-size: 10px;

    text-transform: uppercase;
}


.kontiva-dashboard-date strong {
    display: block;

    margin-top: 2px;

    color: var(--cs-blue-dark);

    font-size: 13px;
}


/* =========================================================
   ESTADÍSTICAS
========================================================= */

.kontiva-dashboard-stats {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-bottom: 18px;
}


.kontiva-stat-card {
    min-width: 0;

    padding: 17px;

    background: white;

    border:
        1px solid var(--cs-border);

    border-radius: 12px;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.kontiva-stat-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(7, 29, 65, .07);
}


.kontiva-stat-card-top {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 13px;
}


.kontiva-stat-icon {
    width: 36px;
    height: 36px;

    min-width: 36px;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
}


.kontiva-stat-icon.blue,
.kontiva-dashboard-quick span.blue {
    background: var(--cs-blue-soft);
    color: var(--cs-blue);
}


.kontiva-stat-icon.orange,
.kontiva-dashboard-quick span.orange {
    background: var(--cs-orange-soft);
    color: var(--cs-orange);
}


.kontiva-stat-icon.green,
.kontiva-dashboard-quick span.green {
    background: var(--cs-success-soft);
    color: var(--cs-success);
}


.kontiva-stat-icon.red {
    background: var(--cs-danger-soft);
    color: var(--cs-danger);
}


.kontiva-stat-label {
    color: var(--cs-muted);

    font-size: 11px;

    font-weight: 600;
}


.kontiva-stat-number {
    display: block;

    color: var(--cs-blue-dark);

    font-size: 22px;

    line-height: 1.2;
}


.kontiva-stat-detail {
    display: block;

    margin-top: 6px;

    color: var(--cs-muted);

    font-size: 11px;
}


.kontiva-stat-link {
    display: inline-block;

    margin-top: 7px;

    color: var(--cs-blue);

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;
}


/* =========================================================
   CUERPO
========================================================= */

.kontiva-dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(320px, .9fr);

    gap: 16px;

    margin-bottom: 16px;
}


.kontiva-dashboard-card {
    min-width: 0;

    padding: 18px;

    background: white;

    border:
        1px solid var(--cs-border);

    border-radius: 12px;
}


.kontiva-dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 16px;
}


.kontiva-dashboard-card-header h2 {
    margin: 0;

    color: var(--cs-blue-dark);

    font-size: 16px;
}


.kontiva-dashboard-card-header p {
    margin: 4px 0 0;

    color: var(--cs-muted);

    font-size: 11px;
}


.kontiva-dashboard-card-link {
    color: var(--cs-blue);

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;
}


/* =========================================================
   TABLA
========================================================= */

.kontiva-dashboard-table-scroll {
    width: 100%;

    overflow-x: auto;
}


.kontiva-dashboard-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 570px;
}


.kontiva-dashboard-table th {
    padding: 10px 11px;

    background: var(--cs-blue-soft);

    color: var(--cs-blue-dark);

    text-align: left;

    font-size: 11px;
}


.kontiva-dashboard-table td {
    padding: 11px;

    border-bottom:
        1px solid var(--cs-border);

    color: var(--cs-text);

    font-size: 11px;
}


.kontiva-dashboard-table tbody tr:last-child td {
    border-bottom: none;
}


.kontiva-dashboard-badge {
    display: inline-flex;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;
}


.kontiva-dashboard-badge.warning {
    background: var(--cs-warning-soft);
    color: var(--cs-warning);
}


.kontiva-dashboard-badge.success {
    background: var(--cs-success-soft);
    color: var(--cs-success);
}


.kontiva-dashboard-empty {
    padding: 25px !important;

    text-align: center;

    color: var(--cs-muted) !important;
}


/* =========================================================
   ALERTAS
========================================================= */

.kontiva-dashboard-alerts {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.kontiva-dashboard-alert {
    display: flex;
    align-items: center;

    gap: 11px;

    min-height: 62px;

    padding: 10px;

    border:
        1px solid var(--cs-border);

    border-radius: 10px;

    text-decoration: none;

    transition:
        background .18s ease;
}


.kontiva-dashboard-alert:hover {
    background: #f8faff;
}


.kontiva-alert-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
}


.kontiva-alert-icon.warning {
    background: var(--cs-orange-soft);
    color: var(--cs-orange);
}


.kontiva-alert-icon.blue {
    background: var(--cs-blue-soft);
    color: var(--cs-blue);
}


.kontiva-alert-icon.green {
    background: var(--cs-success-soft);
    color: var(--cs-success);
}


.kontiva-alert-icon.red {
    background: var(--cs-danger-soft);
    color: var(--cs-danger);
}


.kontiva-dashboard-alert div:nth-child(2) {
    flex: 1;
    min-width: 0;
}


.kontiva-dashboard-alert strong {
    display: block;

    color: var(--cs-blue-dark);

    font-size: 12px;
}


.kontiva-dashboard-alert div span {
    display: block;

    margin-top: 3px;

    color: var(--cs-muted);

    font-size: 10px;
}


.kontiva-alert-arrow {
    color: var(--cs-muted);

    font-size: 18px;
}


/* =========================================================
   ACCESOS RÁPIDOS
========================================================= */

.kontiva-dashboard-quick-card {
    margin-top: 0;
}


.kontiva-dashboard-quick-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.kontiva-dashboard-quick {
    min-height: 90px;

    padding: 13px;

    border:
        1px solid var(--cs-border);

    border-radius: 10px;

    text-decoration: none;

    display: flex;
    flex-direction: column;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.kontiva-dashboard-quick:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(7, 29, 65, .07);
}


.kontiva-dashboard-quick > span {
    width: 34px;
    height: 34px;

    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;
}


.kontiva-dashboard-quick strong {
    color: var(--cs-blue-dark);

    font-size: 12px;
}


.kontiva-dashboard-quick small {
    margin-top: 3px;

    color: var(--cs-muted);

    font-size: 10px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .kontiva-dashboard-stats {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 900px) {

    .kontiva-dashboard-grid {
        grid-template-columns: 1fr;
    }


    .kontiva-dashboard-quick-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 700px) {

    .kontiva-dashboard-header {
        align-items: flex-start;
    }


    .kontiva-dashboard-header h1 {
        font-size: 24px;
    }


    .kontiva-dashboard-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .kontiva-stat-number {
        font-size: 20px;
    }

}


@media (max-width: 500px) {

    .kontiva-dashboard-header {
        flex-direction: column;
    }


    .kontiva-dashboard-date {
        width: 100%;

        text-align: left;
    }


    .kontiva-dashboard-stats {
        grid-template-columns: 1fr;
    }


    .kontiva-dashboard-quick-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   KONTIVA DASHBOARD - GRÁFICOS
========================================================= */

.kontiva-dashboard-charts {
    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(320px, .8fr);

    gap: 16px;

    margin-bottom: 16px;
}


/* =========================================================
   LEYENDA
========================================================= */

.kontiva-chart-legend {
    display: flex;
    align-items: center;

    gap: 12px;
}


.kontiva-chart-legend span {
    display: flex;
    align-items: center;

    gap: 5px;

    color: var(--cs-muted);

    font-size: 10px;
}


.kontiva-chart-legend i {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}


.kontiva-chart-legend i.ventas {
    background: #236ed8;
}


.kontiva-chart-legend i.compras {
    background: var(--cs-orange);
}


/* =========================================================
   VENTAS / COMPRAS
========================================================= */

.kontiva-flow-chart {
    height: 220px;

    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    gap: 12px;

    align-items: end;

    padding:
        15px 8px 0;

    border-bottom:
        1px solid var(--cs-border);

    background-image:
        linear-gradient(
            to top,
            #edf1f7 1px,
            transparent 1px
        );

    background-size:
        100% 25%;
}


.kontiva-flow-day {
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    align-items: center;

    gap: 8px;
}


.kontiva-flow-bars {
    height: calc(100% - 25px);

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    gap: 4px;
}


.kontiva-flow-bar {
    width: 18px;

    max-width: 36%;

    min-height: 3px;

    border-radius:
        5px 5px 2px 2px;

    cursor: help;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.kontiva-flow-bar:hover {
    opacity: .8;

    transform:
        scaleX(1.08);
}


.kontiva-flow-bar.venta {
    background:
        linear-gradient(
            180deg,
            #3583eb,
            #19458d
        );
}


.kontiva-flow-bar.compra {
    background:
        linear-gradient(
            180deg,
            #ff8b3d,
            #ff6a00
        );
}


.kontiva-flow-day > span {
    min-height: 18px;

    color: var(--cs-muted);

    font-size: 9px;
}


/* =========================================================
   CARTERA
========================================================= */

.kontiva-cartera-layout {
    min-height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 28px;
}


.kontiva-cartera-chart {
    width: 145px;
    height: 145px;

    min-width: 145px;

    border-radius: 50%;

    background:
        conic-gradient(
            #22a663
                0
                var(--porcentaje-cobrar),

            #ef5350
                var(--porcentaje-cobrar)
                100%
        );

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}


.kontiva-cartera-chart::after {
    content: "";

    width: 102px;
    height: 102px;

    position: absolute;

    border-radius: 50%;

    background: white;
}


.kontiva-cartera-chart > div {
    position: relative;

    z-index: 2;

    text-align: center;
}


.kontiva-cartera-chart span {
    display: block;

    color: var(--cs-muted);

    font-size: 10px;
}


.kontiva-cartera-chart strong {
    display: block;

    margin-top: 3px;

    color: var(--cs-blue-dark);

    font-size: 16px;
}


/* DETALLES */

.kontiva-cartera-detail {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


.kontiva-cartera-detail a {
    display: grid;

    grid-template-columns:
        10px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 9px;

    padding:
        9px 4px;

    text-decoration: none;
}


.kontiva-cartera-detail a:hover {
    opacity: .8;
}


.kontiva-cartera-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}


.kontiva-cartera-dot.cobrar {
    background: #22a663;
}


.kontiva-cartera-dot.pagar {
    background: #ef5350;
}


.kontiva-cartera-detail div span {
    display: block;

    color: var(--cs-muted);

    font-size: 10px;
}


.kontiva-cartera-detail div strong {
    display: block;

    margin-top: 2px;

    color: var(--cs-blue-dark);

    font-size: 12px;
}


.kontiva-cartera-detail small {
    color: var(--cs-muted);

    font-size: 10px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .kontiva-dashboard-charts {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .kontiva-flow-chart {
        gap: 5px;

        height: 190px;
    }


    .kontiva-flow-bar {
        width: 10px;
    }


    .kontiva-cartera-layout {
        flex-direction: column;

        gap: 15px;
    }


    .kontiva-cartera-detail {
        width: 100%;
    }

}
/* =========================================================
   KONTIVA - SELECTOR DEL GRÁFICO
========================================================= */

.kontiva-chart-controls {
    display: flex;
    align-items: center;

    gap: 13px;
}


.kontiva-chart-period {
    min-width: 145px;

    height: 34px;

    padding:
        5px 28px 5px 10px;

    border:
        1px solid var(--cs-border);

    border-radius: 8px;

    background: white;

    color:
        var(--cs-blue-dark);

    outline: none;

    font-size: 10px;

    font-weight: 600;

    cursor: pointer;
}


.kontiva-chart-period:hover {
    border-color:
        #b7c7dc;
}


.kontiva-chart-period:focus {
    border-color:
        var(--cs-blue);

    box-shadow:
        0 0 0 3px
        rgba(25, 69, 141, .08);
}


/* =========================================================
   GRÁFICO DINÁMICO
========================================================= */

.kontiva-flow-chart {
    overflow-x: auto;

    scrollbar-width: thin;

    scrollbar-color:
        #cbd5e1
        transparent;
}


.kontiva-flow-chart.loading {
    opacity: .45;

    pointer-events: none;
}


.kontiva-chart-empty {
    width: 100%;

    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--cs-muted);

    font-size: 11px;
}


/*
Cuando hay 30 días,
permitimos scroll horizontal.
*/

.kontiva-flow-chart
.kontiva-flow-day {
    min-width: 28px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .kontiva-dashboard-card-header {
        align-items: flex-start;
    }


    .kontiva-chart-controls {
        flex-direction: column;

        align-items: flex-end;

        gap: 7px;
    }


    .kontiva-chart-period {
        min-width: 135px;
    }

}


@media (max-width: 520px) {

    .kontiva-dashboard-card-header {
        flex-direction: column;
    }


    .kontiva-chart-controls {
        width: 100%;

        align-items: flex-start;
    }


    .kontiva-chart-period {
        width: 100%;
    }

}
.kontiva-cartera-detail {
    gap: 16px;
}


.kontiva-cartera-group {
    padding: 10px;

    border:
        1px solid var(--cs-border);

    border-radius: 9px;

    background:
        #fbfcff;
}


.kontiva-cartera-group-title {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 8px;
}


.kontiva-cartera-group-title strong {
    color:
        var(--cs-blue-dark);

    font-size: 11px;
}


.kontiva-cartera-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        5px 0;

    border-bottom:
        1px solid #eef1f6;
}


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


.kontiva-cartera-row span {
    color:
        var(--cs-muted);

    font-size: 10px;
}


.kontiva-cartera-row strong {
    color:
        var(--cs-blue-dark);

    font-size: 10px;
}
/* =========================================================
   KONTIVA - ACTIVIDAD RECIENTE
========================================================= */

.kontiva-activity-list {
    display: flex;
    flex-direction: column;
}


.kontiva-activity-item {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding:
        11px 4px;

    border-bottom:
        1px solid var(--cs-border);

    text-decoration: none;

    transition:
        background .18s ease;
}


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


.kontiva-activity-item:hover {
    background:
        #f8faff;
}


.kontiva-activity-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
}


.kontiva-activity-icon.blue {
    background:
        var(--cs-blue-soft);

    color:
        var(--cs-blue);
}


.kontiva-activity-icon.orange {
    background:
        var(--cs-orange-soft);

    color:
        var(--cs-orange);
}


.kontiva-activity-icon.green {
    background:
        var(--cs-success-soft);

    color:
        var(--cs-success);
}


.kontiva-activity-icon.red {
    background:
        var(--cs-danger-soft);

    color:
        var(--cs-danger);
}


.kontiva-activity-content {
    flex: 1;

    min-width: 0;
}


.kontiva-activity-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;
}


.kontiva-activity-main > div {
    min-width: 0;
}


.kontiva-activity-main strong {
    color:
        var(--cs-blue-dark);

    font-size: 12px;
}


.kontiva-activity-main div span {
    display: block;

    margin-top: 2px;

    color:
        var(--cs-muted);

    font-size: 10px;
}


.kontiva-activity-amount {
    white-space: nowrap;
}


.kontiva-activity-content small {
    display: block;

    margin-top: 5px;

    color:
        #94a3b8;

    font-size: 9px;
}


.kontiva-activity-empty {
    padding: 25px;

    text-align: center;

    color:
        var(--cs-muted);

    font-size: 11px;
}
/* =========================================================
   DASHBOARD - ACTIVIDAD + VENCIMIENTOS
========================================================= */

.kontiva-dashboard-secondary-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 16px;

    margin-bottom: 16px;
}


/* =========================================================
   ACTIVIDAD COMPACTA
========================================================= */

.kontiva-activity-list.compact {
    max-height: 330px;

    overflow-y: auto;
}


.kontiva-activity-item.compact {
    padding:
        8px 4px;
}


.kontiva-activity-item.compact
.kontiva-activity-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;

    font-size: 13px;
}


.kontiva-activity-item.compact
.kontiva-activity-main strong {
    font-size: 11px;
}


.kontiva-activity-item.compact
.kontiva-activity-main div span {
    font-size: 9px;
}


.kontiva-activity-item.compact
.kontiva-activity-content small {
    font-size: 8px;
}


/* =========================================================
   VENCIMIENTOS
========================================================= */

.kontiva-due-list {
    max-height: 330px;

    overflow-y: auto;

    display: flex;
    flex-direction: column;
}


.kontiva-due-item {
    min-height: 56px;

    display: grid;

    grid-template-columns:
        8px
        minmax(0, 1fr)
        auto
        auto
        auto;

    align-items: center;

    gap: 10px;

    padding:
        9px 4px;

    border-bottom:
        1px solid var(--cs-border);

    text-decoration: none;

    transition:
        background .18s ease;
}


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


.kontiva-due-item:hover {
    background:
        #f8faff;
}


.kontiva-due-status {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}


.kontiva-due-status.danger {
    background:
        var(--cs-danger);
}


.kontiva-due-status.warning {
    background:
        var(--cs-orange);
}


.kontiva-due-status.success {
    background:
        var(--cs-success);
}


.kontiva-due-main {
    min-width: 0;
}


.kontiva-due-main strong {
    display: block;

    color:
        var(--cs-blue-dark);

    font-size: 10px;

    text-transform: uppercase;
}


.kontiva-due-main span {
    display: block;

    margin-top: 2px;

    color:
        var(--cs-muted);

    font-size: 9px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.kontiva-due-days {
    color:
        var(--cs-muted);

    font-size: 9px;

    white-space: nowrap;
}


.kontiva-due-amount {
    color:
        var(--cs-blue-dark);

    font-size: 10px;

    white-space: nowrap;
}


.kontiva-due-type {
    padding:
        4px 7px;

    border-radius: 999px;

    font-size: 8px;

    font-weight: 700;

    white-space: nowrap;
}


.kontiva-due-type.cobrar {
    background:
        var(--cs-success-soft);

    color:
        var(--cs-success);
}


.kontiva-due-type.pagar {
    background:
        var(--cs-danger-soft);

    color:
        var(--cs-danger);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .kontiva-dashboard-secondary-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .kontiva-due-item {
        grid-template-columns:
            8px
            minmax(0, 1fr)
            auto;
    }


    .kontiva-due-days {
        display: none;
    }


    .kontiva-due-type {
        display: none;
    }

}
/* =========================================================
   DASHBOARD - INVENTARIO COMPLETO
========================================================= */

.kontiva-inventory-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    width: 100%;

    margin-bottom: 16px;
}


.kontiva-inventory-dashboard-grid
.kontiva-dashboard-card {
    width: 100%;

    min-width: 0;
}


.kontiva-dashboard-table-wrapper {
    width: 100%;

    overflow-x: auto;
}


.kontiva-dashboard-table {
    width: 100%;

    border-collapse: collapse;
}


/* =========================================================
   ESTADO DE DISPONIBILIDAD
========================================================= */

.kontiva-stock-value {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 46px;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
}


.kontiva-stock-value.success {
    background: #eafaf1;
    color: #159447;
}


.kontiva-stock-value.warning {
    background: #fff4e8;
    color: #ff6b00;
}


.kontiva-stock-value.danger {
    background: #fff0f0;
    color: #dc2626;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .kontiva-dashboard-table {
        min-width: 560px;
    }

}
/* =========================================================
   DASHBOARD - BLOQUE DE ANCHO COMPLETO
========================================================= */

.kontiva-dashboard-grid-full {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;

    margin-bottom: 16px;
}


.kontiva-dashboard-grid-full
.kontiva-dashboard-card {
    width: 100%;

    min-width: 0;
}
.kontiva-reconciliation-summary {
    display: grid;
    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );
    gap: 10px;
    margin-bottom: 18px;
}

.kontiva-reconciliation-stat {
    padding: 11px 12px;
    border: 1px solid var(--cs-border);
    border-radius: 9px;
    background: #fbfcff;
}

.kontiva-reconciliation-stat span {
    display: block;
    color: var(--cs-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.kontiva-reconciliation-stat strong {
    display: block;
    margin-top: 5px;
    color: var(--cs-blue-dark);
    font-size: 13px;
}

#resumenDiferencia.negative {
    color: var(--cs-danger);
}

#resumenDiferencia.positive {
    color: var(--cs-orange);
}

#resumenDiferencia.zero {
    color: var(--cs-success);
}

@media (max-width: 1000px) {

    .kontiva-reconciliation-summary {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 600px) {

    .kontiva-reconciliation-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}
/* =========================================================
   KONTIVA - CONCILIACIÓN FINALIZADA
========================================================= */

.kontiva-reconciliation-finished {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 14px 16px;

    margin-bottom: 16px;

    border:
        1px solid #bbf7d0;

    border-radius: 10px;

    background:
        #f0fdf4;
}


.kontiva-reconciliation-finished-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        #16a34a;

    color:
        #ffffff;

    font-size: 17px;
    font-weight: 700;
}


.kontiva-reconciliation-finished strong {
    display: block;

    color:
        #166534;

    font-size: 12px;
}


.kontiva-reconciliation-finished span {
    display: block;

    margin-top: 2px;

    color:
        #15803d;

    font-size: 9px;
}


.kontiva-reconciliation-finished p {
    margin:
        5px 0 0;

    color:
        #64748b;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   ESTADO DEL RESUMEN
========================================================= */

#resumenEstadoConciliacion.conciliada {
    color:
        #16a34a;
}


#resumenEstadoConciliacion.proceso {
    color:
        var(--cs-orange);
}

/* =========================================================
   MODAL CONFIRMAR ANULACIÓN DE ABONO
   ========================================================= */
.modal-anular-abono {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}


.modal-anular-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e5e7eb;
}


.modal-anular-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0f274f;
}


.modal-anular-header p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #64748b;
}


.modal-anular-close {
    border: 0;
    background: transparent;
    font-size: 27px;
    line-height: 1;
    color: #0f172a;
    cursor: pointer;
    padding: 0;
}


.modal-anular-body {
    padding: 20px 22px;
}


.modal-anular-warning {
    display: flex;
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid #fdba74;
    background: #fff7ed;
    border-radius: 14px;
}


.modal-anular-warning-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f97316;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}


.modal-anular-warning strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    color: #9a3412;
}


.modal-anular-warning p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #9a3412;
}


.modal-anular-warning span {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #9a3412;
}


.modal-anular-info {
    margin-top: 16px;
    padding: 14px 18px;
    background: #eef5ff;
    border-radius: 14px;
}


.modal-anular-info-row {
    display: flex;
    align-items: center;
    gap: 14px;
}


.modal-anular-info-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #0f4c9a;
    font-weight: 700;
    font-size: 18px;
}


.modal-anular-info-row span {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    color: #64748b;
}


.modal-anular-info-row strong {
    display: block;
    font-size: 16px;
    color: #0f274f;
    word-break: break-word;
}


.modal-anular-divider {
    height: 1px;
    background: #d8e2ef;
    margin: 13px 0;
}


.modal-anular-effects {
    display: flex;
    gap: 13px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #f0fdf4;
    border: 1px solid #86d49a;
    border-radius: 14px;
}


.modal-anular-effects-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #22a447;
    color: white;
    font-weight: 700;
    font-size: 18px;
}


.modal-anular-effects strong {
    display: block;
    margin-bottom: 4px;
    color: #166534;
    font-size: 14px;
}


.modal-anular-effects p {
    margin: 0;
    color: #3f6848;
    font-size: 12px;
    line-height: 1.45;
}


.modal-anular-message {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 13px;
}


.modal-anular-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}


.modal-anular-footer .cs-btn {
    min-width: 118px;
}


/* Responsive */

@media (max-width: 576px) {

    .modal-anular-abono {
        width: calc(100% - 24px);
        max-width: none;
    }

    .modal-anular-header {
        padding: 18px;
    }

    .modal-anular-body {
        padding: 16px;
    }

    .modal-anular-footer {
        padding: 14px 16px;
    }
}