/* Variables de color personalizadas (verde semioscuro y amarillo) */
:root {
    --bs-primary: #0b5236; /* Un verde más profundo, semioscuro */
    --bs-primary-rgb: 44, 122, 91;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ab7b03; /* Amarillo dorado para acentos */
    --bs-warning-rgb: 255, 215, 0;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
    /* Un tono de verde un poco más oscuro para el gradiente */
    --bs-primary-darker: #22644D;
}

/* Importar Bootstrap, esto debe estar al inicio para que nuestras variables lo sobrescriban */
@import url('bootstrap/bootstrap.min.css');


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f0f2f5; /* Un fondo gris muy claro para contraste */
    min-height: 100vh;
    width: 100%; /* Asegura que el body ocupe todo el ancho */
    overflow-x: hidden; /* Evita la barra de desplazamiento horizontal general */
}

/* Ajustes para el layout principal de Blazor */
.page {
    width: 100%; /* Asegura que la página ocupe todo el ancho */
    min-height: 100vh; /* Asegura que la página ocupe al menos el alto de la vista */
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen verticalmente */
    overflow-x: hidden; /* Evita desbordamiento horizontal dentro de .page */
}

.main {
    flex-grow: 1; /* Permite que el contenido principal ocupe el espacio restante */
    /* Aumentado el padding-top para asegurar espacio debajo de la navbar fija */
    padding-top: 90px; /* Era 70px, lo aumentamos para mayor seguridad */
    width: 100%; /* Asegura que ocupe todo el ancho */
    box-sizing: border-box; /* Incluye padding y border en el ancho/alto */
    overflow-x: hidden; /* Evita desbordamiento horizontal dentro del main */
}

.content {
    padding: 20px;
    box-sizing: border-box;
    width: 100%; /* Asegura que el contenido ocupe todo el ancho disponible de su padre */
}

/* Estilos para la barra de navegación superior */
.navbar.bg-primary {
    /* Usamos var() para los colores del gradiente y evitamos darken() */
    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-primary-darker) 100%) !important;
    border-bottom: 3px solid var(--bs-warning); /* Línea amarilla de acento */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 8px; /* Bordes redondeados para los enlaces */
}

    .nav-link:hover, .nav-link.active {
        color: var(--bs-warning) !important; /* Texto amarillo al pasar el ratón */
        background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil */
    }

    .nav-link i {
        margin-right: 8px;
    }

/* Estilos mejorados para tarjetas y botones */
.card {
    border: none;
    border-radius: 15px !important; /* Más redondeado */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

.card-header {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    background-color: var(--bs-primary) !important;
    color: white !important;
    padding: 1.5rem;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    transition: all 0.3s ease;
}

    .btn-primary:hover {
        background-color: var(--bs-primary-darker); /* Oscurece el verde al pasar el ratón */
        border-color: var(--bs-primary-darker);
    }

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    transition: all 0.3s ease;
}

    .btn-secondary:hover {
        background-color: #5a6268; /* Tono más oscuro de gris */
        border-color: #545b62;
    }

.btn-outline-warning {
    color: var(--bs-warning);
    border-color: var(--bs-warning);
    transition: all 0.3s ease;
}

    .btn-outline-warning:hover {
        background-color: var(--bs-warning);
        color: var(--bs-dark); /* Texto oscuro para el amarillo */
    }

.btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
    transition: all 0.3s ease;
}

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

.btn-outline-info {
    color: var(--bs-info);
    border-color: var(--bs-info);
    transition: all 0.3s ease;
}

    .btn-outline-info:hover {
        background-color: var(--bs-info);
        color: white;
    }

.btn-outline-success {
    color: var(--bs-success);
    border-color: var(--bs-success);
    transition: all 0.3s ease;
}

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

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    transition: all 0.3s ease;
}

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

.spinner-border {
    color: var(--bs-primary) !important;
}

.badge {
    border-radius: 5px;
    padding: 0.5em 0.8em;
    font-size: 0.85em;
}

/* Estilos para los form-floating */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}

.form-floating > label {
    padding: 1rem 0.75rem;
    color: #6c757d; /* Color más suave para la etiqueta */
}

/* Para asegurar que el InputDate siempre muestre el calendario correctamente */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Puede necesitar ajuste según el tema */
}

/* Estilos para tablas */
.table-responsive {
    overflow-x: auto;
}

.table {
    min-width: 768px; /* Asegura que la tabla no se haga demasiado pequeña en pantallas pequeñas */
}

    .table th, .table td {
        vertical-align: middle;
    }

    .table thead th {
        font-weight: 600;
        background-color: #e9ecef; /* Un fondo ligeramente más oscuro para el encabezado */
        border-bottom: 2px solid #dee2e6;
    }

/* Estilo para el input de búsqueda */
.search-input-group {
    transition: all 0.3s ease;
}

/* Efecto hover para los botones */
.search-btn:hover {
    transform: scale(1.05);
}

/* Animación para el botón de limpiar */
.clear-btn {
    transition: opacity 0.3s ease;
}
/*.check-finalizar {
    align-content: center;
    margin-right: 0.7rem;
}*/