/* ============================================================
   CASECONTROL
   DESIGN SYSTEM
   ============================================================ */


/* ============================================================
   1. VARIABLES
   ============================================================ */

:root {

    /* Marca */
    --cc-primary: #2563eb;
    --cc-primary-hover: #1d4ed8;
    --cc-primary-dark: #1e40af;
    --cc-primary-soft: #eff6ff;
    --cc-primary-soft-2: #dbeafe;

    /* Navegación */
    --cc-navy: #0b1424;
    --cc-navy-2: #101c30;
    --cc-navy-3: #17243a;

    /* Fondos */
    --cc-bg: #f5f7fa;
    --cc-surface: #ffffff;
    --cc-surface-soft: #f9fafb;

    /* Texto */
    --cc-text: #172033;
    --cc-text-secondary: #667085;
    --cc-text-muted: #98a2b3;
    --cc-text-light: #cbd5e1;

    /* Bordes */
    --cc-border: #e6eaf0;
    --cc-border-dark: #d8dee8;

    /* Estados */
    --cc-success: #16a34a;
    --cc-success-soft: #ecfdf3;

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

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

    --cc-info: #0284c7;
    --cc-info-soft: #f0f9ff;

    /* Radios */
    --cc-radius-sm: 8px;
    --cc-radius: 14px;
    --cc-radius-lg: 18px;
    --cc-radius-xl: 22px;

    /* Sombras */
    --cc-shadow-xs:
        0 1px 2px rgba(16, 24, 40, .03);

    --cc-shadow:
        0 2px 8px rgba(16, 24, 40, .04),
        0 8px 24px rgba(16, 24, 40, .035);

    --cc-shadow-hover:
        0 12px 30px rgba(16, 24, 40, .08);

    --cc-shadow-nav:
        0 8px 30px rgba(0, 0, 0, .14);

    /* Animaciones */
    --cc-transition: .18s ease;

}


/* ============================================================
   2. BASE
   ============================================================ */

html {
    min-height: 100%;
    background: var(--cc-bg);
}

body {
    min-height: 100%;
}

body.cc-body {

    margin: 0;

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(37, 99, 235, .045),
            transparent 28%
        ),
        var(--cc-bg);

    color: var(--cc-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

* {
    box-sizing: border-box;
}

a {
    transition:
        color var(--cc-transition),
        background-color var(--cc-transition),
        border-color var(--cc-transition),
        transform var(--cc-transition),
        box-shadow var(--cc-transition);
}

button,
input,
select,
textarea {
    font: inherit;
}


/* ============================================================
   3. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #f0f2f5;
}

::-webkit-scrollbar-thumb {
    background: #c5ccd7;
    border-radius: 20px;
    border: 2px solid #f0f2f5;
}

::-webkit-scrollbar-thumb:hover {
    background: #aeb7c5;
}


/* ============================================================
   4. NAVBAR
   ============================================================ */

.cc-navbar {

    min-height: 70px;

    padding: 0;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(37, 99, 235, .16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--cc-navy),
            var(--cc-navy-2)
        );

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

    box-shadow:
        var(--cc-shadow-nav);

    z-index: 1030;

}

.cc-navbar-container {

    min-height: 70px;

    width: 100%;

    padding-left: 22px;
    padding-right: 22px;

}


/* ============================================================
   5. BRAND
   ============================================================ */

.cc-brand {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-right: 28px;

    padding: 0;

    color: white !important;

    text-decoration: none;

}

.cc-brand:hover {
    color: white !important;
}

.cc-brand-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color: white;

    font-size: 18px;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, .30);

}

.cc-brand-content {

    min-width: 0;

    display: flex;
    flex-direction: column;

    line-height: 1.05;

}

.cc-brand-name {

    max-width: 190px;

    color: white;

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

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.cc-brand-content small {

    margin-top: 4px;

    color: #77869d;

    font-size: 8px;
    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: 1.4px;

}


/* ============================================================
   6. MENU PRINCIPAL
   ============================================================ */

.cc-nav-menu {

    align-items: center;

    gap: 2px;

}

.cc-nav-menu .nav-item {
    position: relative;
}

.cc-nav-menu .nav-link {

    min-height: 40px;

    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        8px
        10px !important;

    border-radius: 9px;

    color: #8f9cb0;

    font-size: 12.5px;
    font-weight: 500;

    white-space: nowrap;

}

.cc-nav-menu .nav-link i {

    font-size: 14px;

    transition: color var(--cc-transition);

}

.cc-nav-menu .nav-link:hover {

    color: white;

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

}

.cc-nav-menu .nav-link.active {

    color: white;

    background:
        rgba(37, 99, 235, .17);

    box-shadow:
        inset 0 0 0 1px
        rgba(59, 130, 246, .12);

}

.cc-nav-menu .nav-link.active i {
    color: #60a5fa;
}


/* ============================================================
   7. DROPDOWN
   ============================================================ */

.cc-dropdown {

    min-width: 255px;

    margin-top: 10px !important;

    padding: 8px;

    border:
        1px solid
        #edf0f4;

    border-radius: 14px;

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

    box-shadow:
        0 20px 50px rgba(16, 24, 40, .16);

}

.cc-dropdown-label {

    padding:
        8px
        10px
        6px;

    color: #98a2b3;

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

    letter-spacing: 1px;

    text-transform: uppercase;

}

.cc-dropdown .dropdown-item {

    min-height: 43px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        8px
        10px;

    border-radius: 9px;

    color: #344054;

    font-size: 12.5px;
    font-weight: 500;

}

.cc-dropdown .dropdown-item i {

    width: 22px;

    text-align: center;

    color: var(--cc-primary);

    font-size: 14px;

}

.cc-dropdown .dropdown-item:hover {

    color: #111827;

    background: #f3f6fb;

    transform: translateX(2px);

}

.cc-dropdown .dropdown-item.active {

    color: var(--cc-primary-hover);

    background: var(--cc-primary-soft);

}

.cc-dropdown .dropdown-divider {

    margin:
        6px
        4px;

    border-color: #edf0f4;

}


/* ============================================================
   8. USUARIO NAVBAR
   ============================================================ */

.cc-user-menu {
    margin-left: 14px;
}

.cc-user-button {

    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        5px
        8px;

    border: 0;
    border-radius: 11px;

    background: transparent;

    color: white;

}

.cc-user-button:hover {

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

}

.cc-user-avatar {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    border-radius: 50%;

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

    border:
        1px solid
        rgba(255, 255, 255, .08);

    color: white;

}

.cc-user-info {

    min-width: 0;

    display: flex;
    flex-direction: column;

    text-align: left;

    line-height: 1.05;

}

.cc-user-info strong {

    max-width: 115px;

    color: white;

    font-size: 11px;
    font-weight: 600;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.cc-user-info small {

    max-width: 120px;

    margin-top: 4px;

    color: #718096;

    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}


/* ============================================================
   9. BOTON HAMBURGUESA
   ============================================================ */

.cc-navbar-toggler {

    width: 42px;
    height: 42px;

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

    padding: 0;

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

    border-radius: 11px;

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

    color: white;

    font-size: 22px;

}

.cc-navbar-toggler:hover {

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

}

.cc-navbar-toggler:focus {

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .22);

}


/* ============================================================
   10. CONTENIDO GENERAL
   ============================================================ */

.cc-page {

    width: 100%;

    padding:
        30px
        0
        60px;

}

.cc-container {

    width: 100%;

    max-width: 1480px;

    margin:
        0
        auto;

    padding-left: 26px;
    padding-right: 26px;

}


/* ============================================================
   11. PAGE HEADER
   ============================================================ */

.cc-page-header {

    width: 100%;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 25px;

}

.cc-page-header > div:first-child {
    min-width: 0;
}

.cc-page-eyebrow {

    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    color: var(--cc-primary);

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

    text-transform: uppercase;

    letter-spacing: .9px;

}

.cc-page-header h1 {

    margin: 0;

    color: #131c2e;

    font-size:
        clamp(25px, 2.4vw, 33px);

    font-weight: 700;

    letter-spacing: -.7px;

    line-height: 1.15;

}

.cc-page-header p {

    max-width: 700px;

    margin:
        6px
        0
        0;

    color: var(--cc-text-secondary);

    font-size: 13px;

    line-height: 1.55;

}

.cc-header-meta {
    flex-shrink: 0;
}


/* ============================================================
   12. FECHA
   ============================================================ */

.cc-date-card {

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        8px
        13px;

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

    border-radius: 13px;

    background: white;

    box-shadow:
        var(--cc-shadow-xs);

}

.cc-date-icon {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    border-radius: 9px;

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

    font-size: 14px;

}

.cc-date-card > div:last-child {

    display: flex;
    flex-direction: column;

}

.cc-date-card span {

    color:
        var(--cc-text-muted);

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

    letter-spacing: .7px;

    text-transform: uppercase;

}

.cc-date-card strong {

    margin-top: 1px;

    color:
        var(--cc-text);

    font-size: 11px;
    font-weight: 600;

}


/* ============================================================
   13. DASHBOARD HERO
   ============================================================ */

.cc-dashboard-hero {

    position: relative;

    min-height: 178px;

    display: flex;

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

    gap: 25px;

    padding:
        30px
        32px;

    margin-bottom: 32px;

    overflow: hidden;

    border-radius:
        var(--cc-radius-xl);

    background:

        radial-gradient(
            circle at 84% 18%,
            rgba(59, 130, 246, .25),
            transparent 27%
        ),

        radial-gradient(
            circle at 15% 120%,
            rgba(37, 99, 235, .17),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #0b1424,
            #111e34
        );

    color: white;

    box-shadow:
        0 17px 40px
        rgba(11, 20, 36, .14);

}

.cc-dashboard-hero::before {

    content: "";

    position: absolute;

    top: -130px;
    right: -70px;

    width: 280px;
    height: 280px;

    border:
        1px solid
        rgba(255, 255, 255, .045);

    border-radius: 50%;

}

.cc-dashboard-hero::after {

    content: "";

    position: absolute;

    right: 70px;
    bottom: -210px;

    width: 350px;
    height: 350px;

    border:
        1px solid
        rgba(255, 255, 255, .035);

    border-radius: 50%;

}

.cc-dashboard-hero-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

    display: flex;

    align-items: center;

    gap: 21px;

}

.cc-hero-icon {

    width: 68px;
    height: 68px;

    flex-shrink: 0;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    box-shadow:
        0 12px 28px
        rgba(37, 99, 235, .31);

    color: white;

    font-size: 27px;

}

.cc-hero-label {

    display: inline-block;

    color: #60a5fa;

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

    letter-spacing: 2px;

}

.cc-dashboard-hero h2 {

    margin:
        4px
        0
        7px;

    color: white;

    font-size: 25px;

    font-weight: 650;

    letter-spacing: -.45px;

}

.cc-dashboard-hero p {

    max-width: 560px;

    margin: 0;

    color: #94a3b8;

    font-size: 12.8px;

    line-height: 1.65;

}

.cc-dashboard-session {

    position: relative;

    z-index: 2;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 6px;

}

.cc-dashboard-session small {

    color: #728199;

    font-size: 9px;

}

.cc-session-indicator {

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        7px
        11px;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 100px;

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

    color: #cbd5e1;

    font-size: 10.5px;
    font-weight: 500;

}

.cc-session-indicator span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 4px
        rgba(34, 197, 94, .10);

}


/* ============================================================
   14. TITULOS DE SECCION
   ============================================================ */

.cc-section-header {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;

}

.cc-section-header h2 {

    margin: 0;

    color: var(--cc-text);

    font-size: 16px;
    font-weight: 650;

    letter-spacing: -.25px;

}

.cc-section-header p {

    margin:
        4px
        0
        0;

    color:
        var(--cc-text-muted);

    font-size: 11.5px;

}


/* ============================================================
   15. ACTION CARDS
   ============================================================ */

.cc-action-card {

    position: relative;

    min-height: 148px;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 19px;

    overflow: hidden;

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

    border-radius:
        var(--cc-radius);

    background:
        var(--cc-surface);

    color:
        var(--cc-text);

    text-decoration: none;

    box-shadow:
        var(--cc-shadow);

    transition:
        transform var(--cc-transition),
        box-shadow var(--cc-transition),
        border-color var(--cc-transition);

}

.cc-action-card::after {

    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    top: -55px;
    right: -50px;

    border-radius: 50%;

    background:
        rgba(37, 99, 235, .035);

    transition:
        transform .25s ease;

}

.cc-action-card:hover {

    color:
        var(--cc-text);

    transform:
        translateY(-3px);

    border-color:
        #d7e1f1;

    box-shadow:
        var(--cc-shadow-hover);

}

.cc-action-card:hover::after {

    transform:
        scale(1.35);

}

.cc-action-icon {

    width: 41px;
    height: 41px;

    flex-shrink: 0;

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

    margin-bottom: 15px;

    border-radius: 11px;

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

    font-size: 17px;

}

.cc-action-content {

    padding-right: 25px;

}

.cc-action-content h3 {

    margin:
        0
        0
        5px;

    color:
        var(--cc-text);

    font-size: 13.5px;
    font-weight: 650;

}

.cc-action-content p {

    margin: 0;

    color:
        var(--cc-text-secondary);

    font-size: 11px;

    line-height: 1.55;

}

.cc-action-arrow {

    position: absolute;

    top: 19px;
    right: 19px;

    color: #c3cad5;

    font-size: 14px;

    transition:
        color var(--cc-transition),
        transform var(--cc-transition);

}

.cc-action-card:hover .cc-action-arrow {

    color:
        var(--cc-primary);

    transform:
        translate(2px, -2px);

}


/* ============================================================
   16. CARD GENERAL
   ============================================================ */

.cc-card {

    width: 100%;

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

    border-radius:
        var(--cc-radius);

    background:
        var(--cc-surface);

    box-shadow:
        var(--cc-shadow);

}

.cc-card-header {

    min-height: 68px;

    display: flex;

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

    gap: 15px;

    padding:
        18px
        20px;

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

}

.cc-card-header h2,
.cc-card-header h3 {

    margin:
        2px
        0
        0;

    color:
        var(--cc-text);

    font-size: 14.5px;

    font-weight: 650;

}

.cc-card-eyebrow {

    display: block;

    color:
        var(--cc-primary);

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

    letter-spacing: 1px;

    text-transform: uppercase;

}

.cc-card-body {

    padding:
        20px;

}

.cc-card-footer {

    padding:
        14px
        20px;

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

    background:
        #fbfcfd;

    border-radius:
        0
        0
        var(--cc-radius)
        var(--cc-radius);

}


/* ============================================================
   17. ACCIONES FRECUENTES
   ============================================================ */

.cc-shortcuts-card {

    margin-top: 31px;

}

.cc-shortcuts {

    display: grid;

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

    gap: 6px;

    padding: 13px;

}

.cc-shortcut {

    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        8px
        11px;

    border-radius: 10px;

    color:
        var(--cc-text-secondary);

    font-size: 11.5px;
    font-weight: 550;

    text-decoration: none;

}

.cc-shortcut:hover {

    color:
        var(--cc-primary);

    background:
        #f5f8fd;

}

.cc-shortcut > div {

    width: 33px;
    height: 33px;

    flex-shrink: 0;

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

    border-radius: 9px;

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

    font-size: 14px;

}


/* ============================================================
   18. BOTONES GENERALES
   ============================================================ */

.cc-btn {

    min-height: 40px;

    display: inline-flex;

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

    gap: 7px;

    padding:
        8px
        14px;

    border:
        1px solid
        transparent;

    border-radius: 9px;

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

    text-decoration: none;

    cursor: pointer;

    transition:
        all var(--cc-transition);

}

.cc-btn-primary {

    border-color:
        var(--cc-primary);

    background:
        var(--cc-primary);

    color: white;

    box-shadow:
        0 5px 14px
        rgba(37, 99, 235, .16);

}

.cc-btn-primary:hover {

    border-color:
        var(--cc-primary-hover);

    background:
        var(--cc-primary-hover);

    color: white;

    transform:
        translateY(-1px);

}

.cc-btn-light {

    border-color:
        var(--cc-border);

    background: white;

    color:
        var(--cc-text);

}

.cc-btn-light:hover {

    border-color:
        #d6dce5;

    background:
        #f8fafc;

    color:
        var(--cc-text);

}

.cc-btn-danger {

    border-color:
        #fecaca;

    background:
        var(--cc-danger-soft);

    color:
        var(--cc-danger);

}

.cc-btn-danger:hover {

    border-color:
        #fca5a5;

    background:
        #fee2e2;

    color:
        #b91c1c;

}

.cc-btn-icon {

    width: 38px;
    height: 38px;

    padding: 0;

}


/* ============================================================
   19. FORMULARIOS
   ============================================================ */

.cc-form-label {

    display: block;

    margin-bottom: 6px;

    color:
        #344054;

    font-size: 11.5px;
    font-weight: 600;

}

.cc-form-control,
.cc-form-select {

    width: 100%;

    min-height: 42px;

    padding:
        9px
        12px;

    border:
        1px solid
        #dfe4eb;

    border-radius: 9px;

    background: white;

    color:
        var(--cc-text);

    font-size: 12.5px;

    outline: 0;

    transition:
        border-color var(--cc-transition),
        box-shadow var(--cc-transition);

}

textarea.cc-form-control {
    min-height: 110px;
    resize: vertical;
}

.cc-form-control:focus,
.cc-form-select:focus {

    border-color:
        #84aef8;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, .09);

}

.cc-form-control::placeholder {

    color:
        #aab2bf;

}

.cc-form-help {

    display: block;

    margin-top: 5px;

    color:
        var(--cc-text-muted);

    font-size: 10.5px;

}


/* Bootstrap input compatibility */

.form-control,
.form-select {

    border-color:
        #dfe4eb;

    border-radius: 9px;

    font-size: 12.5px;

}

.form-control:focus,
.form-select:focus {

    border-color:
        #84aef8;

    box-shadow:
        0 0 0 .2rem
        rgba(37, 99, 235, .08);

}


/* ============================================================
   20. TABLAS
   ============================================================ */

.cc-table-wrapper {

    width: 100%;

    overflow-x: auto;

    border-radius:
        var(--cc-radius);

}

.cc-table {

    width: 100%;

    margin: 0;

    border-collapse: separate;
    border-spacing: 0;

    background: white;

}

.cc-table thead th {

    padding:
        12px
        14px;

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

    background:
        #f8fafc;

    color:
        #667085;

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

    text-transform: uppercase;

    letter-spacing: .55px;

    white-space: nowrap;

}

.cc-table tbody td {

    padding:
        13px
        14px;

    border-bottom:
        1px solid
        #eef1f5;

    color:
        #344054;

    font-size: 12px;

    vertical-align: middle;

}

.cc-table tbody tr:last-child td {
    border-bottom: 0;
}

.cc-table tbody tr:hover td {

    background:
        #fafbfd;

}


/* Bootstrap table compatibility */

.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {

    padding:
        .75rem
        .85rem;

    border-bottom-color:
        #edf0f4;

}

.table thead th {

    color:
        #667085;

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

    text-transform: uppercase;

    letter-spacing: .4px;

}


/* ============================================================
   21. BADGES / ESTADOS
   ============================================================ */

.cc-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        5px
        8px;

    border-radius: 100px;

    font-size: 9.5px;
    font-weight: 650;

    white-space: nowrap;

}

.cc-badge-primary {

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary-hover);

}

.cc-badge-success {

    background:
        var(--cc-success-soft);

    color:
        var(--cc-success);

}

.cc-badge-warning {

    background:
        var(--cc-warning-soft);

    color:
        var(--cc-warning);

}

.cc-badge-danger {

    background:
        var(--cc-danger-soft);

    color:
        var(--cc-danger);

}

.cc-badge-secondary {

    background:
        #f2f4f7;

    color:
        #667085;

}


/* ============================================================
   22. BUSQUEDA / TOOLBAR
   ============================================================ */

.cc-toolbar {

    display: flex;

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

    gap: 12px;

    margin-bottom: 17px;

}

.cc-toolbar-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}

.cc-search {

    position: relative;

    width: min(100%, 330px);

}

.cc-search > i {

    position: absolute;

    top: 50%;
    left: 13px;

    transform:
        translateY(-50%);

    color:
        #98a2b3;

    font-size: 13px;

    pointer-events: none;

}

.cc-search input {

    width: 100%;

    min-height: 40px;

    padding:
        8px
        13px
        8px
        37px;

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

    border-radius: 9px;

    background: white;

    color:
        var(--cc-text);

    font-size: 12px;

    outline: 0;

}

.cc-search input:focus {

    border-color:
        #84aef8;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, .08);

}


/* ============================================================
   23. EMPTY STATE
   ============================================================ */

.cc-empty-state {

    min-height: 240px;

    display: flex;
    flex-direction: column;

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

    padding: 30px;

    text-align: center;

}

.cc-empty-icon {

    width: 52px;
    height: 52px;

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

    margin-bottom: 13px;

    border-radius: 15px;

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

    font-size: 21px;

}

.cc-empty-state h3 {

    margin:
        0
        0
        5px;

    font-size: 14px;
    font-weight: 650;

}

.cc-empty-state p {

    max-width: 430px;

    margin: 0;

    color:
        var(--cc-text-secondary);

    font-size: 11.5px;

}


/* ============================================================
   24. KPI / STAT CARDS
   ============================================================ */

.cc-stat-card {

    height: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px;

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

    border-radius:
        var(--cc-radius);

    background: white;

    box-shadow:
        var(--cc-shadow);

}

.cc-stat-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

    font-size: 17px;

}

.cc-stat-content {

    min-width: 0;

}

.cc-stat-label {

    display: block;

    color:
        var(--cc-text-muted);

    font-size: 9.5px;
    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: .45px;

}

.cc-stat-value {

    display: block;

    margin-top: 2px;

    color:
        var(--cc-text);

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

    letter-spacing: -.4px;

}


/* ============================================================
   25. MODALES
   ============================================================ */

.modal-content {

    border: 0;

    border-radius: 17px;

    box-shadow:
        0 25px 60px
        rgba(16, 24, 40, .20);

}

.modal-header {

    padding:
        18px
        20px;

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

}

.modal-title {

    color:
        var(--cc-text);

    font-size: 15px;
    font-weight: 650;

}

.modal-body {

    padding: 20px;

}

.modal-footer {

    padding:
        13px
        20px;

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

}


/* ============================================================
   26. PAGINACION
   ============================================================ */

.pagination {

    gap: 4px;

}

.page-link {

    min-width: 36px;
    min-height: 36px;

    display: flex;

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

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

    border-radius:
        8px !important;

    background: white;

    color:
        #475467;

    font-size: 11px;

}

.page-link:hover {

    border-color:
        #cfd6e2;

    background:
        #f8fafc;

    color:
        var(--cc-primary);

}

.active > .page-link,
.page-link.active {

    border-color:
        var(--cc-primary);

    background:
        var(--cc-primary);

    color: white;

}


/* ============================================================
   27. ALERTAS
   ============================================================ */

.alert {

    border-radius: 11px;

    font-size: 12px;

    border-width: 1px;

}

.alert-success {

    border-color:
        #bbf7d0;

    background:
        #f0fdf4;

    color:
        #166534;

}

.alert-danger {

    border-color:
        #fecaca;

    background:
        #fef2f2;

    color:
        #991b1b;

}

.alert-warning {

    border-color:
        #fed7aa;

    background:
        #fff7ed;

    color:
        #9a3412;

}

.alert-info {

    border-color:
        #bae6fd;

    background:
        #f0f9ff;

    color:
        #075985;

}


/* ============================================================
   28. UTILIDADES
   ============================================================ */

.cc-text-muted {
    color: var(--cc-text-muted) !important;
}

.cc-text-secondary {
    color: var(--cc-text-secondary) !important;
}

.cc-text-primary {
    color: var(--cc-primary) !important;
}

.cc-bg-soft {
    background: var(--cc-surface-soft);
}

.cc-divider {

    width: 100%;

    height: 1px;

    margin:
        18px
        0;

    background:
        var(--cc-border);

}


/* ============================================================
   29. RESPONSIVE - TABLETS Y MENU
   ============================================================ */

@media (max-width: 1199.98px) {

    .cc-navbar {

        min-height: 66px;

        padding:
            9px
            0;

    }

    .cc-navbar-container {
        min-height: auto;
    }

    #ccNavbar {

        margin-top: 10px;

        padding:
            12px
            0
            5px;

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

    }

    .cc-nav-menu {

        align-items: stretch;

        gap: 4px;

        margin-bottom: 12px;

    }

    .cc-nav-menu .nav-link {

        min-height: 44px;

        padding:
            10px
            12px !important;

        font-size: 13px;

    }

    .cc-dropdown {

        position: static !important;

        width: 100%;

        min-width: 0;

        margin:
            4px
            0
            8px !important;

        transform: none !important;

        border: 0;

        border-radius: 11px;

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

        box-shadow: none;

    }

    .cc-dropdown-label {

        color: #607089;

    }

    .cc-dropdown .dropdown-item {

        color: #a9b5c6;

    }

    .cc-dropdown .dropdown-item i {

        color: #60a5fa;

    }

    .cc-dropdown .dropdown-item:hover,
    .cc-dropdown .dropdown-item.active {

        color: white;

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

        transform: none;

    }

    .cc-user-menu {

        margin:
            8px
            0
            4px;

    }

    .cc-user-button {

        width: 100%;

        justify-content: flex-start;

        padding: 9px;

    }

    .cc-user-info strong,
    .cc-user-info small {

        max-width: none;

    }

}


/* ============================================================
   30. RESPONSIVE - TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .cc-page {

        padding-top: 24px;

    }

    .cc-container {

        padding-left: 18px;
        padding-right: 18px;

    }

    .cc-dashboard-hero {

        padding:
            27px
            25px;

    }

    .cc-shortcuts {

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

    }

    .cc-toolbar {

        align-items: stretch;

        flex-direction: column;

    }

    .cc-search {
        width: 100%;
        max-width: none;
    }

}


/* ============================================================
   31. RESPONSIVE - MOVIL
   ============================================================ */

@media (max-width: 575.98px) {

    body.cc-body {

        background:
            var(--cc-bg);

    }

    .cc-navbar-container {

        padding-left: 14px;
        padding-right: 14px;

    }

    .cc-brand {

        margin-right: 10px;

    }

    .cc-brand-icon {

        width: 37px;
        height: 37px;

        border-radius: 10px;

        font-size: 16px;

    }

    .cc-brand-name {

        max-width: 175px;

        font-size: 14px;

    }

    .cc-brand-content small {
        display: none;
    }

    .cc-page {

        padding:
            19px
            0
            40px;

    }

    .cc-container {

        padding-left: 14px;
        padding-right: 14px;

    }

    .cc-page-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

        margin-bottom: 19px;

    }

    .cc-page-header h1 {

        font-size: 23px;

        letter-spacing: -.4px;

    }

    .cc-page-header p {

        font-size: 12px;

    }

    .cc-header-meta {

        width: 100%;

    }

    .cc-date-card {

        width: 100%;

    }

    .cc-dashboard-hero {

        min-height: 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        padding:
            22px
            19px;

        margin-bottom: 26px;

        border-radius: 17px;

    }

    .cc-dashboard-hero-content {

        align-items: flex-start;

        gap: 14px;

    }

    .cc-hero-icon {

        width: 49px;
        height: 49px;

        border-radius: 13px;

        font-size: 20px;

    }

    .cc-dashboard-hero h2 {

        margin-top: 3px;

        font-size: 20px;

    }

    .cc-dashboard-hero p {

        font-size: 11.5px;

        line-height: 1.55;

    }

    .cc-dashboard-session {

        align-items: flex-start;

        margin-left: 63px;

    }

    .cc-section-header h2 {

        font-size: 15px;

    }

    .cc-action-card {

        min-height: 130px;

        padding: 17px;

    }

    .cc-action-icon {

        width: 38px;
        height: 38px;

        margin-bottom: 13px;

        font-size: 16px;

    }

    .cc-action-arrow {

        top: 17px;
        right: 17px;

    }

    .cc-shortcuts {

        grid-template-columns:
            1fr;

        padding: 10px;

    }

    .cc-card-header {

        align-items: flex-start;

        flex-direction: column;

        padding:
            16px;

    }

    .cc-card-body {

        padding: 16px;

    }

    .cc-toolbar-actions {

        width: 100%;

        flex-wrap: wrap;

    }

    .cc-toolbar-actions .cc-btn {

        flex-grow: 1;

    }

    .cc-stat-card {

        padding: 15px;

    }

}


/* ============================================================
   32. PANTALLAS MUY PEQUEÑAS
   ============================================================ */

@media (max-width: 380px) {

    .cc-brand-name {

        max-width: 135px;

    }

    .cc-page-header h1 {

        font-size: 21px;

    }

    .cc-dashboard-hero-content {

        gap: 11px;

    }

    .cc-hero-icon {

        width: 44px;
        height: 44px;

    }

    .cc-dashboard-session {

        margin-left: 55px;

    }

}


/* ============================================================
   33. ACCESIBILIDAD
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

    }

}

/* ============================================================
   CONSULTAS - CARGA DE ARCHIVOS
============================================================ */


/* ============================================================
   CONTEXTO CONSULTA
============================================================ */

.cc-upload-context {

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        17px
        20px;

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

    border-radius:
        var(--cc-radius);

    background:
        var(--cc-surface);

    box-shadow:
        var(--cc-shadow-xs);

}


.cc-upload-context-icon {

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

    font-size: 18px;

}


.cc-upload-context-info {

    min-width: 0;

    display: flex;

    flex: 1;

    flex-direction: column;

}


.cc-upload-context-info > span {

    color:
        var(--cc-text-muted);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

}


.cc-upload-context-info strong {

    margin-top: 2px;

    color:
        var(--cc-text);

    font-size: 14px;

    font-weight: 700;

}


.cc-upload-context-info small {

    margin-top: 3px;

    color:
        var(--cc-text-secondary);

    font-size: 10.5px;

}


.cc-upload-context-count {

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}


.cc-upload-context-count span {

    color:
        var(--cc-text-muted);

    font-size: 9px;

}


.cc-upload-context-count strong {

    color:
        var(--cc-primary);

    font-size: 20px;

    font-weight: 700;

}


/* ============================================================
   DROP AREA
============================================================ */

.cc-upload-area {

    min-height: 245px;

    display: flex;

    flex-direction: column;

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

    padding:
        30px
        20px;

    border:
        1.5px dashed
        #cfd7e4;

    border-radius: 14px;

    background:
        #fafbfd;

    text-align: center;

    cursor: pointer;

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

}


.cc-upload-area:hover {

    border-color:
        var(--cc-primary);

    background:
        var(--cc-primary-soft);

}


.cc-upload-area-icon {

    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 12px;

    border-radius: 14px;

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

    font-size: 22px;

}


.cc-upload-area strong {

    color:
        #344054;

    font-size: 13px;

    font-weight: 700;

}


.cc-upload-area p {

    margin:
        5px
        0
        10px;

    color:
        #667085;

    font-size: 11px;

}


.cc-upload-area > span {

    padding:
        5px
        8px;

    border-radius: 6px;

    background:
        white;

    color:
        var(--cc-primary);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .4px;

}


.cc-upload-area small {

    margin-top: 10px;

    color:
        #98a2b3;

    font-size: 9.5px;

}


.cc-upload-area input {

    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

}


/* ============================================================
   FILE SELECTION
============================================================ */

.cc-upload-selection {

    margin-top: 18px;

}


.cc-upload-selection-header {

    display: flex;

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

    gap: 15px;

    padding-bottom: 11px;

    border-bottom:
        1px solid
        #eef1f5;

}


.cc-upload-selection-header > div {

    display: flex;

    flex-direction: column;

}


.cc-upload-selection-header strong {

    color:
        #344054;

    font-size: 11.5px;

}


.cc-upload-selection-header span {

    margin-top: 2px;

    color:
        #98a2b3;

    font-size: 9.5px;

}


.cc-upload-files {

    max-height: 230px;

    overflow-y: auto;

}


.cc-upload-file-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px
        0;

    border-bottom:
        1px solid
        #f0f2f5;

}


.cc-upload-file-item:last-child {

    border-bottom: 0;

}


.cc-upload-file-icon {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 9px;

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

    font-size: 14px;

}


.cc-upload-file-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

}


.cc-upload-file-info strong {

    max-width: 500px;

    overflow: hidden;

    color:
        #475467;

    font-size: 10.5px;

    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.cc-upload-file-info small {

    margin-top: 2px;

    color:
        #98a2b3;

    font-size: 9px;

}


/* ============================================================
   PRIVACY
============================================================ */

.cc-upload-privacy-text {

    margin:
        0
        0
        14px;

    color:
        var(--cc-text-secondary);

    font-size: 11px;

    line-height: 1.55;

}


.cc-privacy-option {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 13px;

    margin-bottom: 10px;

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

    border-radius: 11px;

    background:
        white;

    cursor: pointer;

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

}


.cc-privacy-option:hover {

    border-color:
        #c7d5ea;

}


.cc-privacy-option input {

    position: absolute;

    opacity: 0;

}


.cc-privacy-selector {

    width: 15px;
    height: 15px;

    flex-shrink: 0;

    margin-top: 2px;

    border:
        1.5px solid
        #cbd2dc;

    border-radius: 50%;

    background:
        white;

}


.cc-privacy-option input:checked
+ .cc-privacy-selector {

    border:
        4px solid
        var(--cc-primary);

}


.cc-privacy-option:has(input:checked) {

    border-color:
        #b9cef7;

    background:
        #f8fbff;

}


.cc-privacy-icon {

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 8px;

    background:
        #f4f6f8;

    color:
        #667085;

}


.cc-privacy-option:has(input:checked)
.cc-privacy-icon {

    background:
        var(--cc-primary-soft);

    color:
        var(--cc-primary);

}


.cc-privacy-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

}


.cc-privacy-content strong {

    color:
        #344054;

    font-size: 11px;

}


.cc-privacy-content small {

    margin-top: 3px;

    color:
        #98a2b3;

    font-size: 9.5px;

    line-height: 1.45;

}


.cc-upload-security-note {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    padding:
        10px
        11px;

    margin-top: 15px;

    border-radius: 9px;

    background:
        #f7f9fc;

    color:
        #667085;

    font-size: 9.5px;

    line-height: 1.5;

}


.cc-upload-security-note i {

    margin-top: 1px;

    color:
        var(--cc-primary);

}


/* ============================================================
   ACTIONS
============================================================ */

.cc-upload-actions {

    display: flex;

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

    gap: 8px;

    margin:
        22px
        0
        50px;

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .cc-upload-context {

        align-items: flex-start;

        flex-wrap: wrap;

    }


    .cc-upload-context-count {

        width: 100%;

        flex-direction: row;

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

        padding-top: 10px;

        border-top:
            1px solid
            #eef1f5;

    }


    .cc-upload-context-count strong {

        font-size: 16px;

    }


    .cc-upload-area {

        min-height: 220px;

        padding:
            25px
            14px;

    }


    .cc-upload-actions {

        flex-direction: column-reverse;

    }


    .cc-upload-actions .cc-btn {

        width: 100%;

    }

}

/* ============================================================
   GALERÍA DE IMÁGENES
============================================================ */

.cc-gallery-section {

    width: 100%;

}


.cc-gallery-header {

    display: flex;

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

    gap: 12px;

    margin-bottom: 13px;

}


.cc-gallery-header h3 {

    margin:
        3px
        0
        0;

    color:
        #344054;

    font-size: 13px;

    font-weight: 700;

}


.cc-gallery-eyebrow {

    display: flex;

    align-items: center;

    gap: 5px;

    color:
        #98a2b3;

    font-size: 8.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .45px;

}


/* ============================================================
   4 COLUMNAS
============================================================ */

.cc-image-gallery {

    display: grid;

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

    gap: 12px;

}


/* ============================================================
   TARJETA
============================================================ */

.cc-image-thumbnail-card {

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        #e6eaf0;

    border-radius:
        11px;

    background:
        #fff;

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

}


.cc-image-thumbnail-card:hover {

    border-color:
        #b9cef7;

    box-shadow:
        0 7px 18px
        rgba(15, 23, 42, .07);

    transform:
        translateY(-1px);

}


/* ============================================================
   MINIATURA
============================================================ */

.cc-image-thumbnail {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    display: block;

    overflow: hidden;

    padding: 0;

    border: 0;

    background:
        #eef1f5;

    cursor: pointer;

}


.cc-image-thumbnail img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .25s ease;

}


.cc-image-thumbnail:hover img {

    transform:
        scale(1.035);

}


/* ============================================================
   OVERLAY
============================================================ */

.cc-image-thumbnail-overlay {

    position: absolute;

    inset: 0;

    display: flex;

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

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

    opacity: 0;

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

}


.cc-image-thumbnail-overlay > span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        7px
        10px;

    border-radius:
        8px;

    background:
        rgba(15, 23, 42, .82);

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        600;

}


.cc-image-thumbnail:hover
.cc-image-thumbnail-overlay {

    background:
        rgba(15, 23, 42, .18);

    opacity: 1;

}


/* ============================================================
   NÚMERO DE IMAGEN
============================================================ */

.cc-image-number {

    position: absolute;

    top: 8px;
    left: 8px;

    min-width: 22px;
    height: 22px;

    display: inline-flex;

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

    padding:
        0
        6px;

    border-radius:
        7px;

    background:
        rgba(15, 23, 42, .75);

    color:
        #fff;

    font-size:
        8.5px;

    font-weight:
        700;

    backdrop-filter:
        blur(4px);

}


/* ============================================================
   PRIVADA
============================================================ */

.cc-image-private {

    position: absolute;

    right: 8px;
    top: 8px;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding:
        4px
        7px;

    border-radius:
        7px;

    background:
        rgba(15, 23, 42, .80);

    color:
        #fff;

    font-size:
        7.5px;

    font-weight:
        600;

}


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

.cc-image-thumbnail-footer {

    min-height: 36px;

    display: flex;

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

    gap: 8px;

    padding:
        7px
        9px;

}


.cc-image-thumbnail-footer > span {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-width: 0;

    color:
        #667085;

    font-size:
        8.5px;

}


.cc-image-thumbnail-footer > span i {

    color:
        #98a2b3;

}


/* ============================================================
   DOCUMENTOS
============================================================ */

.cc-gallery-documents {

    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid
        #edf0f4;

}


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

@media (max-width: 991.98px) {

    .cc-image-gallery {

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

    }

}


@media (max-width: 767.98px) {

    .cc-image-gallery {

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

    }

}


@media (max-width: 380px) {

    .cc-image-gallery {

        gap: 8px;

    }


    .cc-image-thumbnail-footer {

        padding:
            6px
            7px;

    }

}

/* ============================================================
   MODAL - VISUALIZACIÓN DE IMÁGENES
============================================================ */

.cc-image-modal .modal-body {

    display: flex;

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

    position: relative;

    padding: 20px;

    overflow: hidden;

    background: #0f172a;

}


/* Imagen ampliada */

#imagenCompleta {

    display: block;

    width: auto;
    height: auto;

    max-width: min(100%, 1000px);

    max-height: 70vh;

    object-fit: contain;

    margin: 0 auto;

    border-radius: 8px;

}

#modalImagen .modal-dialog {

    max-width: 1100px;

    margin-left: auto;
    margin-right: auto;

}

@media (max-width: 767.98px) {

    #modalImagen .modal-dialog {

        max-width: calc(100% - 20px);

        margin-left: auto;
        margin-right: auto;

    }


    .cc-image-modal .modal-body {

        padding: 10px;

    }


    #imagenCompleta {

        max-width: 100%;

        max-height: 65vh;

    }

}