/* --------------------------- */
/* ----- Título centrado ----- */
/* --------------------------- */
.titulo-principal {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 20px;
}

/* --------------------------------- */
/* ----- Barra de herramientas ----- */
/* --------------------------------- */
.barra-herramientas {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* espacio entre botones */
    margin-bottom: 1rem;
    flex-wrap: wrap; /* permite que los botones se acomoden si no caben */
}

/* Grupos de botones */
.grupo-izquierda,
.grupo-centro,
.grupo-derecha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Centrado del grupo central */
.grupo-centro {
    margin: 0 auto; /* lo centra horizontalmente */
}

/* --- Botones de barra --- */
.btn-herramienta {
    background-color: #6c757d;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .btn-herramienta svg {
        width: 20px;
        height: 20px;
        fill: white; /* asegura que los iconos sean visibles */
    }

    .btn-herramienta:hover {
        background-color: #5a6268;
        transform: scale(1.05);
    }

/* --- Botón de guardar rojo --- */
.btn-guardar {
    background-color: #dc3545 !important;
    border: 2px solid #b02a37;
}

    .btn-guardar:hover {
        background-color: #b02a37 !important;
    }

    .btn-guardar svg {
        fill: #fff !important;
    }

/* -------------------------------------- */
/* ---------------Formularios------------ */
/* -------------------------------------- */
.form-group {
    margin-bottom: 15px;
}

/* Inputs uniformes */
.form-control {
    width: 100%;
    padding: 6px 10px;
    font-size: 1rem;
}

/* ------------------------------------- */
/* --------------Tabla------------------ */
/* -------------------------------------*/

/* Anchos específicos de la tabla */
.tabla-registros {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

    .tabla-registros th,
    .tabla-registros td {
        padding: 8px 12px;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }

 /*Definir anchos por columna*/ 
.tabla-registros th:nth-child(1),
        .tabla-registros td:nth-child(1) {
            width: 70%;
        }

        .tabla-registros th:nth-child(2),
        .tabla-registros td:nth-child(2),
        .tabla-registros th:nth-child(3),
        .tabla-registros td:nth-child(3) {
            width: 15%;
        }

 /*Última columna (icono) ajusta automáticamente*/ 
.tabla-registros th:nth-child(4),
        .tabla-registros td:nth-child(4) {
            width: auto;
            text-align: center;
        }

 /*Alternar colores de filas*/ 
.tabla-registros tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .tabla-registros tbody tr:nth-child(even) {
        background-color: #f7f7f7;
    }

 /*Hover*/ 
.tabla-registros tbody tr:hover {
        background-color: #e9e9e9;
    }

/* ---------------------- */
/* Mensajes de validación */
/* ---------------------- */
.text-danger {
    font-size: 0.875rem;
}

/* --------------------- */
/* --------Tarjetas----- */
/* --------------------- */
.hover-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border-radius: 0.5rem;
}

    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
/* --------------------- */

/* ----- Título centrado ----- */
/*.titulo-principal {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 20px;
}*/

/* ----- Barra de herramientas ----- */
/* --- Barra de herramientas equilibrada --- */
/*.barra-herramientas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;*/ /* pequeño espacio global */
    /*margin-bottom: 1rem;
}*/

/* Grupos laterales y centro */
/*.grupo-izquierda,
.grupo-centro,
.grupo-derecha {
    display: flex;
    align-items: center;
    gap: 0.5rem;*/ /* separación entre iconos */
/*}*/

/* Alineación con espacio más natural */
/*.grupo-izquierda {
    justify-content: flex-start;
    flex: 0.4;*/ /* ocupa menos ancho */
/*}*/

/*.grupo-centro {
    justify-content: center;
    flex: 1;*/ /* centro toma la parte más grande */
/*}

.grupo-derecha {
    justify-content: flex-end;
    flex: 0.4;*/ /* igual que izquierda */
/*}*/

/* --- Botones --- */
/* Barra de herramientas */
/*.barra-herramientas {
    display: flex;
    align-items: center;
    justify-content: flex-start;*/ /* ya no space-between */
    /*gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;*/ /* permite que los botones se acomoden */
/*}*/

/* Grupos */
/*.grupo-izquierda,
.grupo-centro,
.grupo-derecha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}*/

/* Centrado absoluto del grupo central */
/*.grupo-centro {
    margin: 0 auto;*/ /* lo centra horizontalmente */
/*}

    .btn-herramienta svg {
        width: 20px;
        height: 20px;
        fill: white;
    }

    .btn-herramienta:hover {
        background-color: #5a6268;
        transform: scale(1.05);
    }*/

/* --- Botón de guardar rojo --- */
/*.btn-guardar {
    background-color: #dc3545 !important;
    border: 2px solid #b02a37;
}

    .btn-guardar:hover {
        background-color: #b02a37 !important;
    }

    .btn-guardar svg {
        fill: #fff !important;
    }*/



/* Anchos específicos de la tabla */
/*.tabla-registros {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

    .tabla-registros th,
    .tabla-registros td {
        padding: 8px 12px;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }*/

        /* Definir anchos por columna */
        /*.tabla-registros th:nth-child(1),
        .tabla-registros td:nth-child(1) {
            width: 70%;
        }

        .tabla-registros th:nth-child(2),
        .tabla-registros td:nth-child(2),
        .tabla-registros th:nth-child(3),
        .tabla-registros td:nth-child(3) {
            width: 15%;
        }*/

        /* Última columna (icono) ajusta automáticamente */
        /*.tabla-registros th:nth-child(4),
        .tabla-registros td:nth-child(4) {
            width: auto;
            text-align: center;
        }*/

    /* Alternar colores de filas */
    /*.tabla-registros tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .tabla-registros tbody tr:nth-child(even) {
        background-color: #f7f7f7;
    }*/

    /* Hover */
    /*.tabla-registros tbody tr:hover {
        background-color: #e9e9e9;
    }

.texto-pequeno {
    font-size: 0.85rem;*/ /* Ajusta según necesites: 0.75rem, 0.8rem, etc. */
/*}

    .texto-pequeno th,
    .texto-pequeno td {
        padding: 0.3rem 0.5rem;*/ /* Opcional: reduce el espacio interior */
    /*}*/


/* Icono de la última columna */
/*.celda-icono svg {
    width: 20px;
    height: 20px;
    fill: #6c757d;
    transition: transform 0.2s ease, fill 0.2s ease;
}

.celda-icono a:hover svg {
    transform: translateX(4px);
    fill: #343a40;
}*/

/* Enlace del icono “>” */
/*.icono-enlace svg {
    transition: transform 0.2s ease, fill 0.2s ease;
}

.icono-enlace:hover svg {
    transform: translateX(3px);
    fill: #0056b3;
}

.btn-agregar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #6c757d;*/ /* gris base */
    /*text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

    .btn-agregar svg {
        fill: #ffffff;*/ /* el ícono sigue blanco para contraste */
    /*}

    .btn-agregar:hover {
        background-color: #5a6268;*/ /* gris más oscuro al pasar el mouse */
        /*transform: scale(1.05);
    }*/

/* Celda del icono */
/*.celda-icono {
    text-align: center;
    width: 50px;
}*/

/* Enlace del icono “>” */
/*.icono-enlace svg {
    width: 20px;
    height: 20px;
    fill: #6c757d;*/ /* gris medio */
    /*transition: transform 0.2s ease, fill 0.2s ease;
}

.icono-enlace:hover svg {
    transform: translateX(4px);
    fill: #343a40;*/ /* gris oscuro en hover */
/*}*/

/* Separación entre campos del formulario */
/*.form-group {
    margin-bottom: 15px;
}*/

/* Inputs uniformes */
/*.form-control {
    width: 100%;
    padding: 6px 10px;
    font-size: 1rem;
}*/

/* Mensajes de validación */
/*.text-danger {
    font-size: 0.875rem;
}*/