:root {
    --ddec-teal: #0d5c5c;
    --ddec-teal-dark: #0a4a4a;
    --ddec-gold: #c8962e;
    --ddec-gold-light: #fdf5e6;
    --ddec-bg: #e9ecef;
    --ddec-footer-bg: #1a3c3c;
    --ddec-red: #B30000;
}

/* Base */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ddec-bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================
   Top Banner
========================= */
.gov-banner {
    padding-right: 5px;
    height: 20px;
}



/* =========================
   Layout
========================= */
.main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-card {
    background: #fff;
    border-radius: 32px;
    max-width: 840px;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.main-card2 {
    max-width: 460px;
    border-radius: 24px;
}

.main-card .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* =========================
   Alerts Panel
========================= */
.alert-container {
    margin: 20px 0 20px 20px;
    max-width: 40%;
}

.alerts-header {
    margin-bottom: 10px;
}

    .alerts-header i {
        display: none;
    }

.alerts-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

    .alerts-content:not(.collapsed) ~ .alerts-header i,
    .alerts-header.active i {
        transform: rotate(180deg);
    }
    /* Collapsed state */
    .alerts-content.collapsed {
        overflow: hidden;
        opacity: 0;
    }



.alerts-panel {
    background-color: var(--ddec-gold-light);
    border: 1px solid var(--ddec-gold);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

    .alerts-panel h6 {
        font-weight: 700;
    }

    .alerts-panel .bi-file-earmark-text {
        color: orange;
    }

    .alerts-panel .alert-item h6 {
        font-weight: 700;
        display: flex;
        gap: 0.1rem;
    }

    .alerts-panel .alert-item p {
        font-size: 14px;
        line-height: 1.4;
        color: #333333;
        min-width: 300px;
    }

    .alerts-panel a {
        color: #D68F24;
        font-weight: 600;
        text-decoration: underline;
    }

.icon-sm {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.alert-item h6 {
    display: flex;
    align-items: center;
}

/* Carousel indicators */
.carousel-indicators-custom {
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding-bottom:10px;
}

    .carousel-indicators-custom button {
        width: 28px;
        height: 5px;
        border-radius: 3px;
        border: none;
        background-color: var(--ddec-gold);
        opacity: 0.4;
    }

        .carousel-indicators-custom button.active {
            opacity: 1;
        }

/* =========================
   Forms / Inputs
========================= */
.required {
    color: var(--ddec-red) !important;
    font-size: 1.4em;
    line-height: 1;
    margin-left: 4px;
    font-weight: bold;
}

.login-panel {
    padding: 32px;
    margin: 24px;
    width: 100%;
    color: #555;
}

    .login-panel .form-control {
        border-radius: 4px !important;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
    }

        .login-panel .form-control:focus {
            border-color: #1b6d6a;
            box-shadow: 0 0 0 2px rgba(27,109,106,.15);
        }

.login-panel2 {
    margin: 24px;
    width: 460px;
    color: #555;
}

    .login-panel2 .text-title {
        font-weight: 700;
        font-size: 20px;
        color: var(--ddec-teal);
        text-decoration: none;
    }

        .login-panel2 .text-title .bi-arrow-left {
            font-size: 24px;
        }

        .login-panel2 .text-title span {
            color: #333333;
        }

    .login-panel2 .form-control {
        border-radius: 4px !important;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
    }

        .login-panel2 .form-control:focus {
            border-color: #1b6d6a;
            box-shadow: 0 0 0 2px rgba(27,109,106,.15);
        }

/* Input group */
.input-group {
    border: 1px solid #d1d5db;
    border-radius: 4px !important;
    overflow: hidden;
}

    .input-group .form-control {
        border: none;
        box-shadow: none;
    }

    .input-group .btn {
        border: none !important;
        background: transparent;
        border-radius: 0px !important;
    }

    .input-group:focus-within {
        border-color: var(--ddec-teal);
        box-shadow: 0 0 0 2px rgba(13, 92, 92, 0.15);
    }
    /* Eye icon color */
    .input-group .btn i {
        color: var(--ddec-teal);
    }

    .input-group .btn:hover i {
        color: var(--ddec-teal-dark);
    }
    /* Make input group behave as one control */
    .input-group.password-group {
        border: 1px solid #ced4da;
        border-radius: 4px !important;
        overflow: hidden; /* clips inner borders */
    }

        .input-group.password-group .form-control,
        .input-group.password-group .btn {
            border-radius: 0 !important;
            border: none;
            box-shadow: none;
        }

        .input-group.password-group .btn {
            background-color: #fff;
            display: flex;
            align-items: center;
        }
        .input-group.password-group.is-invalid,
        .input-group.password-group.input-validation-error {
            border-radius: 4px !important;
        }

        .input-group.password-group:focus-within {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
        }

        .input-group.password-group.is-invalid {
            border-color: #dc3545;
        }

        .input-group.password-group.is-valid {
            border-color: #198754;
        }
/* Invalid input */
.input-validation-error {
    border: 1px solid #dc3545 !important; /* red */
    background-color: #fff5f5;
/*    border-radius: 8px !important;*/
    color: var(--ddec-red);
}


/* Optional: valid input */
input.valid {
    border: 4px solid #198754; /* green */
}

/* =========================
   Buttons
========================= */
.btn-auth {
    background: var(--ddec-teal);
    color: #fff;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    width: 100%;
}

    .btn-auth:hover {
        background: var(--ddec-teal-dark);
        color: #fff;
    }

.btn-outline {
    background: transparent;
    border: 1px solid var(--ddec-teal);
    color: var(--ddec-teal);
    font-weight: 600;
    width: 100%;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--ddec-teal);
    font-weight: 600;
    width: 100%;
}

.password-info {
    cursor: pointer;
    margin-left: 5px;
    padding: 2px;
    float: right;
}
    .password-info img,
    .password-info svg {
        width: 20px;
        height: 20px;
    }

.popover-dark {
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: 1px solid #1a252f;
    border-radius: 8px;
}

    /* Allow HTML content to keep line breaks visible */
    .popover-dark .popover-body {
        color: #fff;
        font-size: 14px;
        line-height: 1.4;
    }

.popover.bs-popover-top .arrow::after {
    border-top-color: #1a252f;
}

.popover.bs-popover-bottom .arrow::after {
    border-bottom-color: #1a252f;
}

.popover.bs-popover-left .arrow::after {
    border-left-color: #1a252f;
}

.popover.bs-popover-right .arrow::after {
    border-right-color: #1a252f;
}

.form-label-block {
    display: block;
}

/* Links */
.login-panel .login-links a {
    text-decoration: none;
    color: var(--ddec-teal);
    font-weight: 600;
}

    .login-panel .login-links a:hover {
        text-decoration: underline;
        color: var(--ddec-teal);
        font-weight: 600;
    }

.login-panel2 .login-links a {
    text-decoration: none;
    color: var(--ddec-teal) !important;
    font-weight: 600;
}


    .login-panel2 .login-links a:hover {
        text-decoration: underline;
        color: var(--ddec-teal) !important;
        font-weight: 600;
    }


.btn-guide {
    color: var(--ddec-teal);
    font-weight: 600;
}

    .btn-guide i {
        padding-right: 4px;
    }

    .btn-guide a:hover {
        text-decoration: underline;
        color: var(--ddec-teal);
    }

.btn-otp {
    color: var(--ddec-teal);
    font-weight: 600;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    width: 100%;
}

    .btn-otp i {
        padding-right: 4px;
    }

    .btn-otp:hover {
        text-decoration: none;
        background-color: var(--ddec-teal) !important;
    }

.dark-link {
    text-decoration: none;
    color: #555;
    font-weight: 600;
}

/* =========================
   Auth Layout
========================= */
.login-container {
    width: 100%;
    justify-content: center;
    align-items: center;
}


.login-title {
    display: flex;
    justify-content: center;
    font-weight: 600;
    color: #333333;
}

.auth-title {
    display: flex;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 20px;
}

.auth-guide {
    font-size: 14px;
    color: var(--ddec-teal);
}

    .auth-guide:hover {
        text-decoration: underline;
    }

/* =========================
   Footer
========================= */
.login-footer {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px !important;
}

footer {
    background-color: #2f3d45;
    color: #fff;
    font-size: 0.9rem;
}

    /* Default footer links */
    footer a {
        color: #ffffff;
        text-decoration: underline;
        transition: color 0.2s;
    }

        /* Hover + active → gold */
        footer a:hover,
        footer a:active,
        footer a:focus {
            color: #D68F24;
            text-decoration: none;
        }

        /* Permisos link default */
        footer a.link-permisos {
            color: #ffffff;
            font-weight: 500;
        }

            /* Hover / active → gold */
            footer a.link-permisos:hover,
            footer a.link-permisos:active,
            footer a.link-permisos:focus {
                color: #D68F24;
            }

    footer h6 {
        font-weight: 600;
    }

    footer .footer-bottom-bar {
        background-color: #2c3537;
        color: #c0c0c0;
        width: 100%;
        padding: 0.5rem 1rem;
        margin-top: 10px;
    }

/* =========================
   Animations
========================= */
.alert-slide {
    display: none;
    animation: fadeSlide 0.4s ease;
}

    .alert-slide.active {
        display: block;
        position: relative;
    }

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   Responsive
========================= */
@media (max-width: 778px) {
    .main-card .row {
        flex-direction: column;
    }

    .main-content,
    .container-lg {
        max-width: 100%;
        overflow-x: clip;
        padding:0px;
    }

    .main-card {
        box-shadow: none;
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
    .login-panel {
        padding: 1rem;
    }

    .alert-container {
        margin: 16px 8px 0px 16px;
        min-width: 95%;
    }


    .alerts-panel {
        padding-left: 16px;
        padding-right:16px;
    }
    .alerts-header {
        margin-bottom: 0px;
    }

    .alerts-header h5  {
        font-size: 18px;
    }
    .alerts-header i {
        font-size: 18px;
        color: #000;
        transition: transform 0.2s ease;
        display: block;
        float: right;
    }
    /* Start collapsed on mobile */
    .alerts-content {
        max-height: 0;
        overflow: scroll;
        opacity: 0;
    }

        /* Expanded state */
        .alerts-content:not(.collapsed) {
            min-height: 330px;
            max-height: 330px;
            opacity: 1;
            margin-top: 10px;
        }

    .login-container {
        padding-left: 0px !important;
    }
    /* tighten label spacing */
    .form-label {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* remove extra gap above password group */
    .input-group.password-group {
        margin-top: 0 !important;
    }

    /* ensure container spacing is consistent */
    .mb-3.text-start {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 501px) {
    .alerts-panel {
        padding-left: 16px;
        width: 95%;
    }
    .alerts-header i {
        font-size: 14px;
        transition: transform 0.2s ease;
        display: block;
        float: right;
    }
    /* Expanded state */
    .alerts-content:not(.collapsed) {
        min-height: 420px;
        max-height: 500px;
        opacity: 1;
        margin-top: 10px;
    }
}
/* =========================
    Success Modal Styling 
    ========================= */
.success-modal .modal-content {
    background-color: #eef6ee;
    border: 2px solid #2e8b2e;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 30px 20px;
}

.success-modal .modal-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.success-modal .success-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* Circle icon */
.success-modal .success-icon {
    width: 24px;
    height: 24px;
    border: 3px solid #2e8b2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .success-modal .success-icon i {
        color: #2e8b2e;
        font-size: 22px;
    }

.success-modal .success-title {
    font-size: 26px;
    font-weight: 600;
    color: #333;
}


/* Center button */
.success-modal .success-btn {
    margin-top: 20px;
    background-color: #2e8b2e;
    border: none;
    padding: 10px 30px;
    font-size: 18px;
    border-radius: 8px;
}

    .success-modal .success-btn:hover {
        background-color: #256f25;
    }

.success-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    font-weight: 300;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: 0.2s;
}

    .success-close:hover {
        color: #000;
        transform: scale(1.1);
    }