/* 
┌──────────────────────────────────────────────────────────────┐
│                                                              │
│ __filename__   : styles.css                                  │
│ __author__     : DataHome S. de R.L. de C.V.                 │
│ __copyright__  : DataHome S. de R.L. de C.V.                 │
│ __description__: Archivo de estilos para el proyecto         │
│ __version__    : 1.0.0                                       │
│                                                              │
└──────────────────────────────────────────────────────────────┘
*/

/* ===================== Importa estilos generales ===================== */
@import url('./fonts/fonts.css');

/* ===================== Paleta de colores ===================== */
:root {
    /* #611232 */
    --color-primario-2: #691c32;
    --color-secundario-2: #10312b;
    --color-dorado-2: #bc955c;
    --color-gris-2: #6f7271;

    --color-primario: #9f2241;
    --color-secundario: #235b4e;
    --color-dorado: #ddc9a3;
    --color-gris: #98989a;

    /* --main-color: #A22044;
    --hover-color: #801835; */
    --main-color: var(--color-primario);
    --hover-color: var(--color-primario-2);
    --background-color-login: #f4f4f4;
    --background-color-layout: #f8f9fa;
    --text-color: #555;
    --link-color: var(--main-color);
    --link-hover-color: var(--color-dorado-2);
    --white-color: #ffffff;
}


/* ===================== Tipografía ===================== */
body {
    font-family: 'Montserrat', sans-serif;
}

/* ===================== Estilo de los elementos de entrada ===================== */
.form-group {
    margin-bottom: 15px;
}

/* ===================== Color del label por defecto ===================== */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color);
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

/* ===================== Inputs estilizados ===================== */
input[type="text"],
input[type="password"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 0;
    outline: none;
    padding: 10px 0;
    font-size: 1rem;
    color: var(--text-color);
    transition: border-bottom-color 0.3s ease, color 0.3s ease;
}

/* ===================== Estilos al enfocar los inputs ===================== */
input[type="text"]:focus,
input[type="password"]:focus {
    border-bottom: 2px solid var(--main-color);
    color: var(--main-color);
}

input[type="text"]:focus+label,
input[type="password"]:focus+label,
.form-group:focus-within label {
    color: var(--main-color);
}

input[type="text"]:focus-visible,
input[type="password"]:focus-visible {
    box-shadow: none;
}

/* ===================== Estilos de botón ===================== */
button, .btn {
    background-color: var(--main-color);
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover, .btn:hover {
    background-color: var(--hover-color) !important;
}

/* ===================== Estilos del contenedor principal ===================== */
.container-management {
    background-color: var(--background-color-layout);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===================== Estilos de encabezado ===================== */
h1 {
    color: var(--main-color);
}

/* ===================== Estilo específico para el botón de agregar ===================== */
.btn.btn-primary {
    background-color: var(--main-color);
    color: var(--white-color);
    border: none;
    outline: none;
}

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

.btn.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 5px var(--hover-color);
}

/* ===================== Estilos de la tabla ===================== */

/* Mejora del estilo de la tabla */
.table {
    border-radius: 0.5rem;
    margin-bottom: 0;
}

/* Estilo de los encabezados de la tabla */
.table thead th {
    background-color: var(--main-color);
    color: var(--white-color);
}

/* Espaciado de botones en la tabla */
.btn {
    transition: transform 0.2s, background-color 0.3s;
}

.btn:hover {
    transform: scale(1.05);
}

/* ===================== Estilos de paginación ===================== */
.pagination {
    margin-top: 20px;
}

.page-item.active .page-link {
    background-color: var(--main-color) !important;
    color: var(--white-color) !important;
    border-color: var(--main-color) !important;
}

.page-link {
    color: var(--main-color) !important ;
}

.page-link:hover {
    background-color: var(--link-hover-color) !important;
    color: var(--white-color) !important;
}



.breadcrumb-item {
    color: var(--link-hover-color) !important;
}

.breadcrumb-item a{
    text-decoration: none !important;
    color: var(--link-color) !important;
}

.breadcrumb-item:hover {
    color: var(--link-hover-color) !important;
}
.breadcrumb-item.active a{
    text-decoration: none !important;
    color: var(--link-color) !important;
}

/* ===================== Estilos del modal ===================== */
.modal-content {
    background-color: var(--background-color-layout);
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background-color: var(--main-color);
    color: var(--white-color);
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.modal-body {
    padding: 1.5rem;
    color: var(--text-color);
    font-size: 1rem;
}

.modal-footer {
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
    border-top: none;
}

.modal-footer .btn {
    padding: 0.5rem 1rem;
}

.modal-footer .btn-secondary {
    background-color: #6c757d;
    border: none;
}

.modal-footer .btn-danger {
    background-color: var(--main-color);
    border: none;
}

.modal-footer .btn-danger:hover {
    background-color: var(--hover-color);
}

/* ===================== Estilos de la animación del modal ===================== */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: translate(0, 0);
}

/* ===================== Estilos adicionales para el botón de cerrar ===================== */
.btn-close {
    background: none;
    border: none;
    color: var(--white-color);
    font-size: 1.2rem;
    opacity: 0.8;
}

.btn-close:hover {
    opacity: 1;
}

/* Inicia Select2 */

.select2-selection {
    min-height: 40px !important;
    border-color: #ced4da !important;
}

.select2-container .select2-choice {
    padding: 5px 10px;
    font-size: 1.2em;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--main-color) !important;
    color: var(--white-color) !important;
}

/* Asegura que las opciones seleccionadas estén alineadas horizontalmente */
.select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Estilo para cada opción seleccionada */
.select2-container--default .select2-selection__choice {
    /* width: calc(50% - 5px);  Dividir el espacio en 2 columnas */
    width: calc(33.33% - 5px);
    margin-bottom: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
}

/* Fin Select2 */

/* ===================== Campos requeridos ===================== */
.campo-requerido {
    color: red;
    font-size: 1.2rem;
    margin-left: 5px;
}


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

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