/* Style the main container */
#contenido_formulario {
    padding-bottom: 50px;
    padding-left: 20px; /* Adjusted padding */
    padding-right: 20px; /* Adjusted padding */
    background-color: #ffffff; /* White background for the form container */
    border-radius: 0.5rem; /* Rounded corners for the container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    margin-top: 2rem; /* Add some space at the top */
    margin-bottom: 2rem; /* Add some space at the bottom */
}

/* Style the navigation tabs */
.nav-tabs {
    border-bottom: 2px solid #0d6efd; /* Bootstrap primary blue */
    margin-bottom: 0; /* Remove default margin */
}

.nav-tabs .nav-item {
    margin-bottom: -2px; /* Align tabs with the border */
}

.nav-tabs .nav-link {
    color: #0d6efd;
    font-weight: 500;
    border-radius: 0.5rem 0.5rem 0 0; /* Rounded top corners */
    padding: 1rem 1.5rem;
    transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease, box-shadow 0.3s ease;
    border: none; /* Remove default borders */
    border-bottom: 2px solid transparent; /* Space for active indicator */
    background-color: transparent; /* Default transparent background */
    text-align: center;
}

/* Hover and focus states for tabs */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    background-color: #e9ecef; /* Light grey background on hover */
    color: #0a58ca; /* Darker blue on hover */
    border-bottom-color: #0d6efd; /* Show border color on hover */
}

/* Active tab style */
.nav-tabs .nav-link.active {
    color: #fff; /* White text for active tab */
    background-color: #0d6efd; /* Primary blue background */
    border-bottom-color: #0d6efd; /* Match background */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Subtle top shadow */
}

/* Remove left border for the first tab */
.nav-tabs .nav-item:first-child .nav-link {
    border-top-left-radius: 0.5rem;
}

/* Remove right border for the last tab */
.nav-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: 0.5rem;
}

/* Style the content area of the tabs */
.tab-content > .tab-pane {
    padding: 2rem; /* Padding inside each tab pane */
    background-color: #ffffff; /* White background */
    border: 1px solid #dee2e6; /* Light border */
    border-top: none; /* Remove top border as it's handled by tabs */
    border-radius: 0 0 0.5rem 0.5rem; /* Rounded bottom corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* Style form labels */
.form-label {
    font-weight: 600; /* Bolder labels */
    color: #495057; /* Dark grey text */
    margin-bottom: 0.5rem;
}

/* Style form controls (inputs, selects, textareas) */
.form-control, .form-select {
    border-radius: 0.375rem; /* Standard Bootstrap rounding */
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus, .form-select:focus {
    border-color: #86b7fe; /* Lighter blue on focus */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap focus glow */
}
/* Add invalid state styling */
.form-control.is-invalid, .form-select.is-invalid, .form-check-input.is-invalid {
    border-color: #dc3545; /* Bootstrap danger color */
}
.form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}


/* Style helper text */
.form-text {
    color: #6c757d; /* Muted grey */
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Style primary buttons */
.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
    padding: 0.75rem 1.5rem; /* Generous padding */
    border-radius: 0.375rem;
    font-weight: 500;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary:hover {
    color: #fff;
    background-color: #0b5ed7; /* Slightly darker blue on hover */
    border-color: #0a58ca;
}
.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); /* Focus glow */
}
.btn-primary:disabled, .btn-primary.disabled {
    background-color: #0d6efd;
    border-color: #0d6efd;
    opacity: 0.65;
}


/* --- NEW STYLES for btn-secondary --- */
.btn-secondary {
    color: #fff;
    background-color: #6c757d; /* Bootstrap secondary grey */
    border-color: #6c757d;
    padding: 0.75rem 1.5rem; /* Match primary button padding */
    border-radius: 0.375rem; /* Match primary button radius */
    font-weight: 500; /* Match primary button weight */
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
}
.btn-secondary:focus, .btn-secondary.focus {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
    box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); /* Secondary focus glow */
}
.btn-secondary:active, .btn-secondary.active {
    color: #fff;
    background-color: #565e64;
    border-color: #51585e;
}
.btn-secondary:disabled, .btn-secondary.disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 0.65;
}
/* --- END NEW STYLES --- */


/* Style success buttons (like the final submit) */
.btn-success {
    color: #fff;
    background-color: #198754; /* Bootstrap success green */
    border-color: #198754;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-success:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}
.btn-success:focus, .btn-success.focus {
    box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}
.btn-success:disabled, .btn-success.disabled {
    background-color: #198754;
    border-color: #198754;
    opacity: 0.65;
}


/* Style form check labels (for checkboxes) */
#contenido_formulario .form-check-label {
    cursor: pointer;
    color: #495057;
}
#contenido_formulario .form-check-input {
    cursor: pointer;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .nav-tabs .nav-link {
        padding: 0.8rem 1rem; /* Smaller padding on small screens */
        font-size: 0.9rem; /* Slightly smaller font */
    }
    .tab-content > .tab-pane {
        padding: 1.5rem; /* Less padding in panes */
    }
    #contenido_formulario {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .btn-lg { /* Adjust button size */
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
    }
}

/* Estilos base para .btn-danger */
.btn-danger {
    color: #fff; /* Color del texto */
    background-color: #dc3545; /* Color de fondo rojo Bootstrap */
    border-color: #dc3545; /* Color del borde */
    padding: 0.75rem 1.5rem; /* Relleno (ajustar si usas otros tamaños de botón) */
    border-radius: 0.375rem; /* Radio del borde */
    font-weight: 500; /* Peso de la fuente */
    text-align: center; /* Alineación del texto */
    text-decoration: none; /* Sin subrayado */
    vertical-align: middle; /* Alineación vertical */
    cursor: pointer; /* Cursor de mano */
    user-select: none; /* Evitar selección de texto */
    border: 1px solid transparent; /* Borde base */
    font-size: 1rem; /* Tamaño de fuente base */
    line-height: 1.5; /* Altura de línea */
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; /* Transiciones suaves */
}

/* Estilos para el estado hover (cuando el cursor está encima) */
.btn-danger:hover {
    color: #fff;
    background-color: #bb2d3b; /* Rojo más oscuro */
    border-color: #b02a37;
}

/* Estilos para el estado focus (cuando el botón tiene el foco) */
.btn-danger:focus, .btn-danger.focus {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); /* Sombra de foco roja semitransparente */
}

/* Estilos para el estado disabled (cuando el botón está deshabilitado) */
.btn-danger:disabled, .btn-danger.disabled {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    opacity: 0.65; /* Reducir opacidad */
    cursor: default; /* Cursor por defecto */
    pointer-events: none; /* Deshabilitar eventos de puntero */
}