/* ECUARURUKUNA Brand Colors */
:root {
    --ecuadorukuna-dark-teal: #005C6F; /* Primary Dark Teal from logo */
    --ecuadorukuna-golden-yellow: #F9A825; /* Primary Golden Yellow from logo */
    --ecuadorukuna-light-gray: #F2F2F2; /* Light background for filters/cards */
    --ecuadorukuna-text-dark: #333333; /* For general text */
    --ecuadorukuna-text-light: #FFFFFF; /* For text on dark backgrounds */
}

/* Override Bootstrap Primary Color to Dark Teal */
.btn-primary,
.form-control:focus,
.card-footer .btn-primary,
a.btn-primary { /* Also target the asp-action buttons if you want them primary */
    --bs-btn-bg: var(--ecuadorukuna-dark-teal);
    --bs-btn-border-color: var(--ecuadorukuna-dark-teal);
    --bs-btn-hover-bg: #004D5A; /* Slightly darker teal for hover */
    --bs-btn-hover-border-color: #004D5A;
    --bs-btn-active-bg: #003F4B;
    --bs-btn-active-border-color: #003F4B;
    --bs-btn-disabled-bg: #005C6F; /* Maintain color for disabled but reduced opacity */
    --bs-btn-disabled-border-color: #005C6F;
    --bs-btn-color: var(--ecuadorukuna-text-light); /* White text on primary buttons */
}

    /* Style for the 'Regresar' button using primary color */
    .btn-primary.mt-3 { /* Targeting the specific 'Regresar' button */
        background-color: var(--ecuadorukuna-dark-teal);
        border-color: var(--ecuadorukuna-dark-teal);
        color: var(--ecuadorukuna-text-light);
    }

        .btn-primary.mt-3 svg {
            fill: var(--ecuadorukuna-text-light); /* Ensure SVG icon is white */
        }

/* Override Bootstrap Success Color for 'Exportar a Excel' button (Optional, if you want it green, use original Bootstrap green) */
.btn-success {
    --bs-btn-bg: #28a745; /* Bootstrap's default green */
    --bs-btn-border-color: #28a745;
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-active-bg: #1e7e34;
    --bs-btn-active-border-color: #1c7430;
}
/* OR if you want it golden yellow from brand: */
/*
.btn-success.excel, .btn-success.exceloperacion {
    --bs-btn-bg: var(--ecuadorukuna-golden-yellow);
    --bs-btn-border-color: var(--ecuadorukuna-golden-yellow);
    --bs-btn-hover-bg: #e0971a;
    --bs-btn-hover-border-color: #d18a0f;
    --bs-btn-color: var(--ecuadorukuna-text-light);
}
*/


/* Background for Filters Box */
.box-filtros {
    background-color: var(--ecuadorukuna-light-gray) !important; /* Lighter background for the filter box */
    border-color: rgba(0, 0, 0, 0.1) !important; /* Soft border */
}

/* Card Styling */
.card {
    border-color: var(--ecuadorukuna-light-gray); /* Subtle border for cards */
    border-radius: 8px; /* Slightly rounded corners */
}

.card-header {
    background-color: var(--ecuadorukuna-light-gray) !important; /* Header of cards */
    color: var(--ecuadorukuna-dark-teal); /* Dark teal for card header text */
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.card-body strong {
    color: var(--ecuadorukuna-dark-teal); /* Highlight strong text in card body */
}

/* Badges for status */
.badge.bg-success {
    background-color: var(--ecuadorukuna-dark-teal) !important; /* Use dark teal for "Cerrada" (closed) */
    color: var(--ecuadorukuna-text-light) !important;
}

.badge.bg-warning {
    background-color: var(--ecuadorukuna-golden-yellow) !important; /* Use golden yellow for "Abierta" (open) */
    color: var(--ecuadorukuna-text-dark) !important; /* Dark text for readability on yellow */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--ecuadorukuna-dark-teal); /* All headings in dark teal */
}

/* Horizontal Rule */
hr {
    border-top: 1px solid var(--ecuadorukuna-dark-teal); /* Dark teal for horizontal rule */
    opacity: 0.5; /* Slightly transparent */
}

/* Default button for pagination */
.btn-default { /* ASP.NET Core pagination link */
    background-color: var(--ecuadorukuna-dark-teal);
    border-color: var(--ecuadorukuna-dark-teal);
    color: var(--ecuadorukuna-text-light);
    transition: background-color 0.3s ease;
}

    .btn-default:hover:not(.disabled) {
        background-color: #004D5A; /* Darker teal on hover */
        border-color: #004D5A;
        color: var(--ecuadorukuna-text-light);
    }

    .btn-default.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* General Link Color (optional, if you want all links to follow brand) */
a {
    color: var(--ecuadorukuna-dark-teal);
    text-decoration: none;
}

    a:hover {
        color: var(--ecuadorukuna-golden-yellow);
        text-decoration: underline;
    }

/* Ensure the SVG for the 'Regresar' button has the correct fill color */
.btn.btn-primary svg {
    fill: currentColor; /* Inherit color from parent button text */
}
/* 1. "Editar" Button - Use Primary Dark Teal */
.btn-primary {
    --bs-btn-bg: var(--ecuadorukuna-dark-teal);
    --bs-btn-border-color: var(--ecuadorukuna-dark-teal);
    --bs-btn-hover-bg: #004D5A; /* Slightly darker teal on hover */
    --bs-btn-hover-border-color: #004D5A;
    --bs-btn-active-bg: #003F4B;
    --bs-btn-active-border-color: #003F4B;
    --bs-btn-color: var(--ecuadorukuna-text-light); /* White text */
}

/* 2. "Detalle" Button - Use Golden Yellow as an accent/info color */
.btn-info {
    --bs-btn-bg: var(--ecuadorukuna-golden-yellow);
    --bs-btn-border-color: var(--ecuadorukuna-golden-yellow);
    --bs-btn-hover-bg: #F9A825; /* Slightly darker yellow on hover */
    --bs-btn-hover-border-color: #F9A825;
    --bs-btn-active-bg: #F9A825;
    --bs-btn-active-border-color: #F9A825;
    --bs-btn-color: var(--ecuadorukuna-text-dark); /* Dark text for readability on yellow */
}

/* 3. "Exportar" Button - You have two common options. Choose ONE: */

/* OPTION A: Use a Standard Green for 'Export' (common UX for success/export) */
.btn-success.exceloperacion { /* Target specifically the exceloperacion button */
    --bs-btn-bg: #28a745; /* Bootstrap's default green */
    --bs-btn-border-color: #28a745;
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-active-bg: #1e7e34;
    --bs-btn-active-border-color: #1c7430;
    --bs-btn-color: var(--ecuadorukuna-text-light);
}

/* OPTION B: Use Golden Yellow for 'Export' to keep strictly within brand primary colors */
/*
        .btn-success.exceloperacion {
            --bs-btn-bg: var(--ecuadorukuna-golden-yellow);
            --bs-btn-border-color: var(--ecuadorukuna-golden-yellow);
            --bs-btn-hover-bg: #e0971a;
            --bs-btn-hover-border-color: #d18a0f;
            --bs-btn-active-bg: #d18a0f;
            --bs-btn-active-border-color: #c07d0d;
            --bs-btn-color: var(--ecuadorukuna-text-dark); // Dark text for readability on yellow
        }
        */

/* Ensure SVG icons within these specific buttons inherit text color */
.card-footer .btn svg {
    fill: currentColor;
}
/* Ensure the checkbox and label align nicely */
.card-header .form-check-label {
    vertical-align: middle;
    margin-bottom: 0; /* Remove default margin for labels */
}

.card-header .form-check-input {
    margin-top: 0.25em; /* Adjust to align with text if needed */
    vertical-align: middle;
}

/* Style for the new "Exportar Seleccionados" button */
#exportSelectedBtn {
    background-color: var(--ecuadorukuna-golden-yellow); /* Using golden yellow for this action */
    border-color: var(--ecuadorukuna-golden-yellow);
    color: var(--ecuadorukuna-text-dark); /* Dark text for readability on yellow */
    --bs-btn-hover-bg: #e0971a;
    --bs-btn-hover-border-color: #e0971a;
}
html {
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6, .nav-item a {
    color: #0A5D6D !important;
}

.titular {
    text-align: center;
    margin-top: 0.5em;
}

a {
    text-decoration: none !important;
}

header {
    background: #fff;
}

input:read-only {
    border: 0px !important;
    background-color: rgba(128,128,128,0.1) !important;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn-primary {
    background: #ffffff !important;
    border-color: #FFAA02 !important;
    color: #0A5D6D !important;
}

    .btn-primary:hover {
        background: #FFAA02 !important;
    }

    .btn-primary svg {
        color: #0A5D6D !important;
        height: 20px;
        width: 20px;
    }

.btn-danger {
    background: #ffffff !important;
    border-color: #FFAA02 !important;
    color: rgb(10,93,109,0.5) !important;
}

    .btn-danger svg {
        color: rgb(10,93,109,0.5) !important;
        height: 20px;
        width: 20px;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

input[type='checkbox']{
    background-color: #808080 !important;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    padding: 0px !important;
}

.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

.step-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: grey;
    transition: .4s;
}

    .step-button[aria-expanded="true"] {
        width: 60px;
        height: 60px;
        background-color: #0A5D6D;
        color: #fff;
    }

.done {
    background-color: #FFAA02;
    color: #fff;
}

.step-item {
    z-index: 10;
    text-align: center;
}

#progress {
    -webkit-appearance: none;
    position: absolute;
    width: 95%;
    z-index: 5;
    height: 10px;
    margin-left: 18px;
    margin-bottom: 18px;
}
    /* to customize progress bar */
    #progress::-webkit-progress-value {
        background-color: #0A5D6D;
        transition: .5s ease;
    }

    #progress::-webkit-progress-bar {
        background-color: grey;
    }

.inicio-page {
    background-image: url("../media/acopio.png")
}

.box-child {
    background: rgb(255, 255, 255,0.8);
    padding: 3em;
}

table th {
    background: #FFAA02 !important;
    color: #0A5D6D;
    padding: 10px;
}

    table th a {
        background: #FFAA02 !important;
        color: #0A5D6D;
    }

table td {
    text-align: left;
    border: solid 1px #ddd;
    padding: 10px;
}

.box-filtros {
    background: rgba(204, 204, 204, 0.5);
    padding: 10px;
}



@media (max-width: 980px) {
    table, .child {
        width: 100% !important;
    }

    table {
        display: flex;
        flex-direction: column;
    }

        table tr {
            width: 100%;
        }

            table tr td, table tr th {
                display: none;
                width: inherit;
            }

                table tr td:last-child, table tr td:first-child, table tr th:last-child, table tr th:first-child {
                    display: table-cell !important;
                }

    row {
        display: block;
        overflow-x: auto
    }

    .container {
        display: block;
    }
}