/* ==================== ESTILOS GENERALES ==================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
}

/* ==================== ESTILOS PARA TABLAS ==================== */
.table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 2px solid #ab0000;
    overflow: hidden;
}

.table th {
    background-color: #ab0000;
    color: #fff;
    padding: 12px;
    text-align: center; /* Encabezados centrados */
    font-weight: bold;
    font-size: 16px;
    border-bottom: 2px solid #fff;
}

.table td {
    background-color: #f7f7f7;
    padding: 10px;
    text-align: center; /* Contenido de celdas centrado (cambia de 'left' a 'center') */
    border-bottom: 1px solid #ddd;
}

.table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table tr:hover {
    background-color: #e5e5e5;
    cursor: pointer;
}
/* ==================== ESTILOS PARA PANELES ==================== */
.panel-info, .panel-default, .panel-search {
    border: 2px solid #ab0000;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    overflow: hidden;
}

.panel-info > .panel-heading,
.panel-default > .panel-heading,
.panel-search > .panel-heading {
    color: #ffffff;
    background-color: #ab0000;
    border-color: #ab0000;
    padding: 12px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border-bottom: 2px solid #fff;
}

.panel-info > .panel-body,
.panel-default > .panel-body,
.panel-search > .panel-body {
    background-color: #f7f7f7;
    padding: 15px;
}

/* ==================== ESTILOS PARA EL PANEL DE BÚSQUEDA ==================== */
.panel-search .form-group {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
}

.panel-search .form-group:nth-child(even) {
    background-color: #f2f2f2;
}

.panel-search .form-group:hover {
    background-color: #e5e5e5;
    cursor: pointer;
}

.panel-search .form-control {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.panel-search .form-control:focus {
    border-color: #ab0000;
    box-shadow: 0 0 0 0.2rem rgba(171, 0, 0, 0.25);
}

/* ==================== ESTILOS PARA BOTONES ==================== */
.btn {
    font-weight: 500;
    padding: 8px 16px;
    margin: 0 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Botón Añadir nuevo */
[data-itemtype="add"] .btn,
[data-itemtype="grid_add"] .btn {
    background-color: #4CAF50 !important;
    color: white !important;
}

[data-itemtype="add"] .btn:hover,
[data-itemtype="grid_add"] .btn:hover {
    background-color: #3e8e41 !important;
}

[data-itemtype="add"] .btn::before,
[data-itemtype="grid_add"] .btn::before {
    content: "\f067"; /* Icono de más (Añadir) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Borrar artículos seleccionados */
[data-itemtype="grid_delete"] .btn {
    background-color: #F44336 !important;
    color: white !important;
}

[data-itemtype="grid_delete"] .btn:hover {
    background-color: #D32F2F !important;
}

[data-itemtype="grid_delete"] .btn::before {
    content: "\f1f8"; /* Icono de papelera */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Grid View (Ver) */
[data-itemtype="grid_view"] .btn {
    background-color: #2196F3 !important;
    color: white !important;
}

[data-itemtype="grid_view"] .btn:hover {
    background-color: #0b7dda !important;
}

[data-itemtype="grid_view"] .btn::before {
    content: "\f06e"; /* Icono de ojo (Ver) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Guardar (Edit) */
[data-itemtype="edit_save"] .btn,
.btn.btn-primary,
[data-itemtype="add_save"] .btn {
    background-color: #4CAF50 !important;
    color: white !important;
}

[data-itemtype="edit_save"] .btn:hover,
.btn.btn-primary:hover,
[data-itemtype="add_save"] .btn:hover {
    background-color: #3e8e41 !important;
}

[data-itemtype="edit_save"] .btn::before,
[data-itemtype="add_save"] .btn::before {
    content: "\f0c7"; /* Icono de disco (Guardar) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Volver a la lista (View) */
[data-itemtype="view_back_list"] .btn {
    background-color: #757575 !important;
    color: white !important;
}

[data-itemtype="view_back_list"] .btn:hover {
    background-color: #616161 !important;
}

[data-itemtype="view_back_list"] .btn::before {
    content: "\f03a"; /* Icono de lista */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Volver a la lista (Edit) */
[data-itemtype="edit_back_list"] .btn,
[data-itemtype="add_back_list"] .btn,
#backButton {
    background-color: #757575 !important;
    color: white !important;
}

[data-itemtype="edit_back_list"] .btn:hover,
[data-itemtype="add_back_list"] .btn:hover,
#backButton:hover {
    background-color: #616161 !important;
}

[data-itemtype="edit_back_list"] .btn::before,
[data-itemtype="add_back_list"] .btn::before,
#backButton::before {
    content: "\f03a"; /* Icono de lista */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Configuración */
[data-itemtype="config"] .btn,
#configButton {
    background-color: #9C27B0 !important;
    color: white !important;
}

[data-itemtype="config"] .btn:hover,
#configButton:hover {
    background-color: #7B1FA2 !important;
}

[data-itemtype="config"] .btn::before,
#configButton::before {
    content: "\f013"; /* Icono de engranaje */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Home */
[data-itemtype="home"] .btn,
#homeButton {
    background-color: #FF9800 !important;
    color: white !important;
}

[data-itemtype="home"] .btn:hover,
#homeButton:hover {
    background-color: #F57C00 !important;
}

[data-itemtype="home"] .btn::before,
#homeButton::before {
    content: "\f015"; /* Icono de casa */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Reiniciar */
.btn.btn-default,
[data-itemtype="add_reset"] .btn,
#resetButton {
    background-color: #42A5F5 !important;
    color: white !important;
}

.btn.btn-default:hover,
[data-itemtype="add_reset"] .btn:hover,
#resetButton:hover {
    background-color: #1E88E5 !important;
}

[data-itemtype="add_reset"] .btn::before,
#resetButton::before {
    content: "\f2f1"; /* Icono de reinicio */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Cancelar */
[data-itemtype="add_cancel"] .btn,
#cancelButton {
    background-color: #F44336 !important;
    color: white !important;
}

[data-itemtype="add_cancel"] .btn:hover,
#cancelButton:hover {
    background-color: #D32F2F !important;
}

[data-itemtype="add_cancel"] .btn::before,
#cancelButton::before {
    content: "\f00d"; /* Icono de X (Cancelar) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Buscar */
.panel-search .btn-primary {
    background-color: #ab0000 !important;
    color: white !important;
}

.panel-search .btn-primary:hover {
    background-color: #8a0000 !important;
}

.panel-search .btn-primary::before {
    content: "\f002"; /* Icono lupa */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Mostrar todo */
.panel-search .btn-default {
    background-color: #757575 !important;
    color: white !important;
}

.panel-search .btn-default:hover {
    background-color: #616161 !important;
}

.panel-search .btn-default::before {
    content: "\f2f1"; /* Icono reiniciar */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* ==================== ESTILOS PARA CONTENEDORES ==================== */
.r-align-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 0;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    margin-top: 20px;
}

/* ==================== EFECTOS HOVER ==================== */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .r-align-center {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 15px;
    }
    
    .btn {
        width: 100%;
        margin: 0;
        padding: 10px;
    }
    
    .table th, .table td {
        padding: 8px;
    }
    
    .panel-search .form-group {
        padding: 8px;
    }
}

/* ==================== ANIMACIONES ==================== */
[data-itemtype="add_reset"] .btn:hover::before,
#resetButton:hover::before {
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==================== ICONOS PARA ACCIONES ==================== */
[data-itemtype="grid_edit"] .glyphicon-pencil:before {
    content: "\f044"; /* Icono de lápiz de FontAwesome */
    font-family: "Font Awesome 6 Free";
}

[data-itemtype="grid_view"] .glyphicon-search:before {
    content: "\f06e"; /* Icono de ojo (Ver) */
    font-family: "Font Awesome 6 Free";
}

.glyphicon-remove:before {
    content: "\f00d"; /* Icono X de FontAwesome */
    font-family: "Font Awesome 6 Free";
}

.glyphicon-cog:before {
    content: "\f013"; /* Icono de engranaje de FontAwesome */
    font-family: "Font Awesome 6 Free";
}

.glyphicon-user:before {
    content: "\f007"; /* Icono de usuario de FontAwesome */
    font-family: "Font Awesome 6 Free";
}

.glyphicon-home:before {
    content: "\f015"; /* Icono de casa de FontAwesome */
    font-family: "Font Awesome 6 Free";
}

/* ==================== BOTÓN DE OPCIONES (LIST_OPTIONS) ==================== */
[data-itemtype="list_options"] .btn-default {
    background-color: #9C27B0 !important;
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
}

[data-itemtype="list_options"] .btn-default:hover {
    background-color: #7B1FA2 !important;
}

[data-itemtype="list_options"] .glyphicon-cog:before {
    content: "\f013"; /* Icono de engranaje */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 5px;
}

/* Estilo para el caret (triángulo desplegable) */
[data-itemtype="list_options"] .caret {
    margin-left: 5px;
    border-top: 4px solid white;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* Estilos para el menú desplegable */
[data-itemtype="list_options"] .dropdown-menu {
    border: 1px solid #ab0000;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

[data-itemtype="list_options"] .dropdown-menu li a {
    padding: 8px 16px;
    color: #333;
    transition: all 0.2s;
}

[data-itemtype="list_options"] .dropdown-menu li a:hover {
    background-color: #f5f5f5;
    color: #ab0000;
}

[data-itemtype="list_options"] .dropdown-menu .divider {
    margin: 4px 0;
    background-color: #e5e5e5;
}

/* Estilos para elementos deshabilitados */
[data-itemtype="list_options"] .dropdown-menu .disabled a {
    color: #999 !important;
    cursor: not-allowed;
    background-color: transparent !important;
}

/* ==================== BOTÓN BUSCAR ==================== */
#searchButton1 {
    background-color: #ab0000 !important;
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px !important;
}

#searchButton1:hover {
    background-color: #8a0000 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#searchButton1::before {
    content: "\f002"; /* Icono de lupa de Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
}

/* ==================== BOTÓN HOME CON ICONO ==================== */
.glyphicon-home:before {
    content: "\f015" !important; /* Icono de casa de Font Awesome */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    color: white; /* Color del icono */
}

/* Estilo para el botón que contiene el icono home */
.btn .glyphicon-home {
    margin-right: 5px; /* Espacio entre el icono y el texto */
    font-size: 14px; /* Tamaño del icono */
}

/**/

/* ==================== ESTILOS PARA EL ENCABEZADO ==================== */
.r-form[data-location="top"] {
    background-color: #ab0000; /* Color rojo corporativo */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-bottom: 2px solid #8a0000;
}

/* Estilos para la barra de migas de pan */
.breadcrumb {
    background-color: transparent !important;
    padding: 8px 15px;
    margin-bottom: 0;
    border-radius: 4px;
}

.breadcrumb > li {
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.breadcrumb > li a {
    color: #f8f8f8 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb > li a:hover {
    color: white !important;
    text-decoration: underline;
}

/* Icono home */
.glyphicon-home:before {
    content: "\f015"; /* Icono de casa de Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: white;
}

/* Estilos para los dropdowns */
.breadcrumb .dropdown-menu {
    border: 1px solid #ab0000;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.breadcrumb .dropdown-menu li a {
    color: #333 !important;
    padding: 8px 16px;
}

.breadcrumb .dropdown-menu li a:hover {
    background-color: #f5f5f5;
    color: #ab0000 !important;
}

/* Caret (triángulo) de los dropdowns */
.breadcrumb .caret {
    border-top-color: white;
    border-bottom-color: white;
}

/* Separador de breadcrumb */
.breadcrumb > li + li:before {
    color: rgba(255,255,255,0.7);
    content: "/";
    padding: 0 8px;
}


/* ==================== BOTÓN ELIMINAR SELECCIONADOS ==================== */
[data-itemtype="delete"] .btn-default,
#delete_selected1 {
    background-color: #F44336 !important;  /* Rojo */
    color: white !important;               /* Texto blanco */
    border: 1px solid #d32f2f !important;  /* Borde rojo oscuro */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px !important;
    transition: all 0.3s ease;
}

/* Icono de eliminar (papelera) */
[data-itemtype="delete"] .btn-default::before,
#delete_selected1::before {
    content: "\f1f8";  /* Icono de papelera de Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
}

/* Efecto hover */
[data-itemtype="delete"] .btn-default:hover,
#delete_selected1:hover {
    background-color: #d32f2f !important;  /* Rojo más oscuro al pasar mouse */
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Estado deshabilitado */
[data-itemtype="delete"] .btn-default:disabled,
#delete_selected1:disabled {
    background-color: #ffcdd2 !important;  /* Rojo claro */
    color: #b71c1c !important;            /* Texto rojo oscuro */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Versión alternativa si mantienes la estructura actual con <a> */
[data-itemtype="delete"] a.btn {
    text-decoration: none !important;
}

/* ==================== BOTONES ADICIONALES ==================== */

/* Botón Aprobar */
.btn_aprobar, [data-itemtype="btn_aprobar"] .btn {
    background-color: #4CAF50 !important; /* Verde */
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn_aprobar:hover, [data-itemtype="btn_aprobar"] .btn:hover {
    background-color: #3e8e41 !important; /* Verde oscuro */
}

.btn_aprobar::before, [data-itemtype="btn_aprobar"] .btn::before {
    content: "\f00c"; /* Icono de check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Edición */
.btn_edicion, [data-itemtype="btn_edicion"] .btn {
    background-color: #FFC107 !important; /* Amarillo/naranja */
    color: #212529 !important; /* Color de texto oscuro para mejor contraste */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn_edicion:hover, [data-itemtype="btn_edicion"] .btn:hover {
    background-color: #E0A800 !important; /* Amarillo/naranja oscuro */
}

.btn_edicion::before, [data-itemtype="btn_edicion"] .btn::before {
    content: "\f303"; /* Icono de lápiz */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Avanzar */
.btn_avanzar, [data-itemtype="btn_avanzar"] .btn {
    background-color: #2196F3 !important; /* Azul */
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn_avanzar:hover, [data-itemtype="btn_avanzar"] .btn:hover {
    background-color: #0b7dda !important; /* Azul oscuro */
}

.btn_avanzar::before, [data-itemtype="btn_avanzar"] .btn::before {
    content: "\f061"; /* Icono de flecha derecha */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Rechazar */
.btn_rechazar, [data-itemtype="btn_rechazar"] .btn {
    background-color: #F44336 !important; /* Rojo */
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn_rechazar:hover, [data-itemtype="btn_rechazar"] .btn:hover {
    background-color: #d32f2f !important; /* Rojo oscuro */
}

.btn_rechazar::before, [data-itemtype="btn_rechazar"] .btn::before {
    content: "\f00d"; /* Icono de X */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Suspender */
.btn_suspender, [data-itemtype="btn_suspender"] .btn {
    background-color: #FF9800 !important; /* Naranja */
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn_suspender:hover, [data-itemtype="btn_suspender"] .btn:hover {
    background-color: #F57C00 !important; /* Naranja oscuro */
}

.btn_suspender::before, [data-itemtype="btn_suspender"] .btn::before {
    content: "\f28b"; /* Icono de pausa */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Botón Volver */
.btn_volver, [data-itemtype="btn_volver"] .btn {
    background-color: #757575 !important; /* Gris */
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn_volver:hover, [data-itemtype="btn_volver"] .btn:hover {
    background-color: #616161 !important; /* Gris oscuro */
}

.btn_volver::before, [data-itemtype="btn_volver"] .btn::before {
    content: "\f060"; /* Icono de flecha izquierda */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Efectos comunes para todos los botones */
.btn_aprobar, .btn_avanzar, .btn_rechazar, 
.btn_suspender, .btn_volver, .btn_edicion,
[data-itemtype^="btn_"] .btn {
    transition: all 0.3s ease;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

.btn_aprobar:hover, .btn_avanzar:hover, .btn_rechazar:hover, 
.btn_suspender:hover, .btn_volver:hover, .btn_edicion:hover,
[data-itemtype^="btn_"] .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Estilos para estado deshabilitado */
.btn_aprobar:disabled, .btn_avanzar:disabled, 
.btn_rechazar:disabled, .btn_suspender:disabled, 
.btn_volver:disabled, .btn_edicion:disabled,
[data-itemtype^="btn_"] .btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}


/* Estilos para SweetAlert */
.swal2-popup {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 10px !important;
}

.swal2-title {
    font-size: 1.4em !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: uppercase;
}

.swal2-confirm {
    background-color: #28a745 !important;
    padding: 8px 25px !important;
    font-weight: 500 !important;
}

.swal2-cancel {
    padding: 8px 25px !important;
    font-weight: 500 !important;
}

/* Animaciones */
.animate__animated {
    animation-duration: 0.5s;
}

/* Estilos para iconos */
.fas {
    margin-right: 8px;
}


/* ==================== BOTONES ALTA/BAJA ALUMNO ==================== */

/* Estilos base comunes */
[data-itemtype="btn_alta_alumno"] .btn,
[data-itemtype="btn_baja_alumno"] .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px 8px 40px !important;
    border-radius: 4px !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    position: relative !important;
    min-width: 100px !important;
    text-decoration: none !important;
}

/* Iconos usando pseudo-elementos */
[data-itemtype="btn_alta_alumno"] .btn::before,
[data-itemtype="btn_baja_alumno"] .btn::before {
    content: "";
    position: absolute !important;
    left: 15px !important;
    width: 18px !important;
    height: 18px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Botón ALTA ALUMNO - Verde */
[data-itemtype="btn_alta_alumno"] .btn {
    background-color: #28a745 !important;
    color: white !important;
}

[data-itemtype="btn_alta_alumno"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E");
}

[data-itemtype="btn_alta_alumno"] .btn:hover {
    background-color: #218838 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Botón BAJA ALUMNO - Rojo */
[data-itemtype="btn_baja_alumno"] .btn {
    background-color: #dc3545 !important;
    color: white !important;
}

[data-itemtype="btn_baja_alumno"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32H48c-17.7 0-32-14.3-32-32s14.3-32 32-32H400c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
}

[data-itemtype="btn_baja_alumno"] .btn:hover {
    background-color: #c82333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Efecto activo para ambos botones */
[data-itemtype="btn_alta_alumno"] .btn:active,
[data-itemtype="btn_baja_alumno"] .btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) !important;
}

/* Estilos para estado deshabilitado */
[data-itemtype="btn_alta_alumno"] .btn:disabled,
[data-itemtype="btn_baja_alumno"] .btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ==================== BOTONES VALIDAR/ANULAR ==================== */

/* Estilos base comunes */
[data-itemtype="btn_validar_espe"] .btn,
[data-itemtype="btn_anular_espe"] .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px 8px 40px !important;
    border-radius: 4px !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    position: relative !important;
    min-width: 100px !important;
    text-decoration: none !important;
}

/* Iconos usando pseudo-elementos */
[data-itemtype="btn_validar_espe"] .btn::before,
[data-itemtype="btn_anular_espe"] .btn::before {
    content: "";
    position: absolute !important;
    left: 15px !important;
    width: 18px !important;
    height: 18px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Botón VALIDAR - Azul */
[data-itemtype="btn_validar_espe"] .btn {
    background-color: #007bff !important;
    color: white !important;
}

[data-itemtype="btn_validar_espe"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

[data-itemtype="btn_validar_espe"] .btn:hover {
    background-color: #0069d9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Botón ANULAR - Rojo oscuro */
[data-itemtype="btn_anular_espe"] .btn {
    background-color: #6c757d !important;
    color: white !important;
}

[data-itemtype="btn_anular_espe"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='white'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
}

[data-itemtype="btn_anular_espe"] .btn:hover {
    background-color: #5a6268 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Efecto activo para ambos botones */
[data-itemtype="btn_validar_espe"] .btn:active,
[data-itemtype="btn_anular_espe"] .btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) !important;
}

/* Estilos para estado deshabilitado */
[data-itemtype="btn_validar_espe"] .btn:disabled,
[data-itemtype="btn_anular_espe"] .btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==================== BOTONES IMPRIMIR PD ==================== */

/* Estilos base comunes para todos los botones */
[data-itemtype^="btn_imprimir_pd"] .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px 8px 40px !important;
    border-radius: 4px !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    position: relative !important;
    min-width: 100px !important;
    text-decoration: none !important;
}

/* Iconos usando pseudo-elementos */
[data-itemtype^="btn_imprimir_pd"] .btn::before {
    content: "";
    position: absolute !important;
    left: 15px !important;
    width: 18px !important;
    height: 18px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
}

/* Botón IMPRIMIR PD2 - Color verde */
[data-itemtype="btn_imprimir_pd2"] .btn {
    background-color: #28a745 !important;
    color: white !important;
}

[data-itemtype="btn_imprimir_pd2"] .btn:hover {
    background-color: #218838 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Botón IMPRIMIR PD3 - Color naranja */
[data-itemtype="btn_imprimir_pd3"] .btn {
    background-color: #fd7e14 !important;
    color: white !important;
}

[data-itemtype="btn_imprimir_pd3"] .btn:hover {
    background-color: #e06c0c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Botón IMPRIMIR PD4 - Color morado */
[data-itemtype="btn_imprimir_pd4"] .btn {
    background-color: #6f42c1 !important;
    color: white !important;
}

[data-itemtype="btn_imprimir_pd4"] .btn:hover {
    background-color: #5e36b1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Efecto activo para todos los botones */
[data-itemtype^="btn_imprimir_pd"] .btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) !important;
}

/* Estilos para estado deshabilitado */
[data-itemtype^="btn_imprimir_pd"] .btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}


/* Put  your custom CSS code here */

/* Estilos base comunes para todos los botones */
[data-itemtype="btn_alta_penintenciario"] .btn,
[data-itemtype="btn_alta_corderz"] .btn,
[data-itemtype="btn_alta_sumar"] .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px 8px 40px !important;
    border-radius: 4px !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    position: relative !important;
    min-width: 100px !important;
    text-decoration: none !important;
    color: white !important;
}

/* Iconos usando pseudo-elementos */
[data-itemtype="btn_alta_penintenciario"] .btn::before,
[data-itemtype="btn_alta_corderz"] .btn::before,
[data-itemtype="btn_alta_sumar"] .btn::before {
    content: "";
    position: absolute !important;
    left: 15px !important;
    width: 18px !important;
    height: 18px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Botón ALTA PENITENCIARIO - Azul oscuro */
[data-itemtype="btn_alta_penintenciario"] .btn {
    background-color: #343a40 !important;
}

[data-itemtype="btn_alta_penintenciario"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' fill='white'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3zM528 240c17.7 0 32 14.3 32 32v48H496V272c0-17.7 14.3-32 32-32zm-80 32v48c-17.7 0-32 14.3-32 32V480c0 17.7 14.3 32 32 32H608c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32V272c0-44.2-35.8-80-80-80s-80 35.8-80 80z'/%3E%3C/svg%3E");
}

[data-itemtype="btn_alta_penintenciario"] .btn:hover {
    background-color: #23272b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Botón ALTA CODERZ - Morado */
[data-itemtype="btn_alta_corderz"] .btn {
    background-color: #6f42c1 !important;
}

[data-itemtype="btn_alta_corderz"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' fill='white'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/svg%3E");
}

[data-itemtype="btn_alta_corderz"] .btn:hover {
    background-color: #5a32a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Botón ALTA SUMAR - Verde azulado */
[data-itemtype="btn_alta_sumar"] .btn {
    background-color: #20c997 !important;
}

[data-itemtype="btn_alta_sumar"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E");
}

[data-itemtype="btn_alta_sumar"] .btn:hover {
    background-color: #17a07b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Efecto activo para todos los botones */
[data-itemtype="btn_alta_penintenciario"] .btn:active,
[data-itemtype="btn_alta_corderz"] .btn:active,
[data-itemtype="btn_alta_sumar"] .btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) !important;
}

/* Estilos para estado deshabilitado */
[data-itemtype="btn_alta_penintenciario"] .btn:disabled,
[data-itemtype="btn_alta_corderz"] .btn:disabled,
[data-itemtype="btn_alta_sumar"] .btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}


/* Estilos base para ambos botones */
[data-itemtype^="btn_"] .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 140px;
    position: relative;
}

/* Botón Avanzar PD4 */
[data-itemtype="btn_avanzar_programacion"] .btn {
    background-color: #2c7be5; /* Azul */
    color: white;
}

[data-itemtype="btn_avanzar_programacion"] .btn::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Botón Generar Agenda */
[data-itemtype="btn_generar_agenda"] .btn {
    background-color: #4CAF50; /* Verde */
    color: white;
}

[data-itemtype="btn_generar_agenda"] .btn::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 448 512'%3E%3Cpath d='M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Efectos hover */
[data-itemtype="btn_avanzar_programacion"] .btn:hover {
    background-color: #1a68d1;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(44, 123, 229, 0.4);
}

[data-itemtype="btn_generar_agenda"] .btn:hover {
    background-color: #3e8e41;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
}

/* Efectos active */
[data-itemtype^="btn_"] .btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

[data-itemtype="btn_avanzar_programacion"] .btn:active {
    background-color: #1557b7;
}

[data-itemtype="btn_generar_agenda"] .btn:active {
    background-color: #2d6a30;
}

/* Estado deshabilitado */
[data-itemtype^="btn_"] .btn:disabled {
    background-color: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Versión pequeña (con data-small) */
[data-itemtype^="btn_"][data-small] .btn {
    padding: 8px 15px;
    font-size: 13px;
    min-width: 120px;
    gap: 8px;
}

[data-itemtype^="btn_"][data-small] .btn::before {
    width: 16px;
    height: 16px;
}

/* Versión con Font Awesome (alternativa) */
/*
[data-itemtype="btn_avanzar_programacion"] .btn::before {
    content: "\f061";  Icono flecha derecha 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

[data-itemtype="btn_generar_agenda"] .btn::before {
    content: "\f073";  Icono calendario 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
*/





/* Estilo base para el botón de imprimir - Azul característico */
[data-itemtype="btn_imprimir_cer_lot"] .btn {
    background-color: #2c7be5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px 8px 40px !important;
    border-radius: 4px !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(44, 123, 229, 0.3) !important;
    position: relative !important;
    min-width: 100px !important;
    text-decoration: none !important;
    color: white !important;
}

/* Icono de impresora usando pseudo-elemento */
[data-itemtype="btn_imprimir_cer_lot"] .btn::before {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Efecto hover */
[data-itemtype="btn_imprimir_cer_lot"] .btn:hover {
    background-color: #1a68d1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(44, 123, 229, 0.4) !important;
}

/* Efecto active */
[data-itemtype="btn_imprimir_cer_lot"] .btn:active {
    background-color: #1557b7 !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 3px rgba(44, 123, 229, 0.3) !important;
}

/* Estado deshabilitado */
[data-itemtype="btn_imprimir_cer_lot"] .btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: #e9ecef !important;
    color: #adb5bd !important;
}



/* Estilos base comunes para todos los botones */
[data-itemtype^="aprobar_cpi"],
[data-itemtype^="inscribir_cpi"],
[data-itemtype^="Generar_materias_cpi"],
[data-itemtype^="avanzar_cpi"],
[data-itemtype^="rechazar_cpi"],
[data-itemtype^="volver_cpi"],
[data-itemtype^="actualizar_notas_cpi"] {
    .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 8px 16px 8px 40px !important;
        border-radius: 4px !important;
        border: none !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        min-width: 100px !important;
        text-decoration: none !important;
        color: white !important;
        margin-right: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .btn::before {
        content: "" !important;
        position: absolute !important;
        left: 15px !important;
        width: 18px !important;
        height: 18px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    
    .btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    .btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    .btn:disabled {
        opacity: 0.65 !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
        background-color: #e9ecef !important;
        color: #adb5bd !important;
    }
}

/* Botón Aprobar - Verde de éxito */
[data-itemtype="aprobar_cpi"] .btn {
    background-color: #00a854 !important;
    box-shadow: 0 2px 5px rgba(0, 168, 84, 0.3) !important;
}

[data-itemtype="aprobar_cpi"] .btn:hover {
    background-color: #008f47 !important;
    box-shadow: 0 4px 8px rgba(0, 168, 84, 0.4) !important;
}

[data-itemtype="aprobar_cpi"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

/* Botón Inscribir - Azul información */
[data-itemtype="inscribir_cpi"] .btn {
    background-color: #1890ff !important;
    box-shadow: 0 2px 5px rgba(24, 144, 255, 0.3) !important;
}

[data-itemtype="inscribir_cpi"] .btn:hover {
    background-color: #1478d6 !important;
    box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4) !important;
}

[data-itemtype="inscribir_cpi"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E");
}

/* Botón Generar Materias - Morado creativo */
[data-itemtype="Generar_materias_cpi"] .btn {
    background-color: #722ed1 !important;
    box-shadow: 0 2px 5px rgba(114, 46, 209, 0.3) !important;
}

[data-itemtype="Generar_materias_cpi"] .btn:hover {
    background-color: #5f25b3 !important;
    box-shadow: 0 4px 8px rgba(114, 46, 209, 0.4) !important;
}

[data-itemtype="Generar_materias_cpi"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z'/%3E%3C/svg%3E");
}

/* Botón Avanzar - Naranja progreso */
[data-itemtype="avanzar_cpi"] .btn {
    background-color: #fa8c16 !important;
    box-shadow: 0 2px 5px rgba(250, 140, 22, 0.3) !important;
}

[data-itemtype="avanzar_cpi"] .btn:hover {
    background-color: #d97512 !important;
    box-shadow: 0 4px 8px rgba(250, 140, 22, 0.4) !important;
}

[data-itemtype="avanzar_cpi"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
}

/* Botón Rechazar - Rojo peligro */
[data-itemtype="rechazar_cpi"] .btn {
    background-color: #f5222d !important;
    box-shadow: 0 2px 5px rgba(245, 34, 45, 0.3) !important;
}

[data-itemtype="rechazar_cpi"] .btn:hover {
    background-color: #cf1322 !important;
    box-shadow: 0 4px 8px rgba(245, 34, 45, 0.4) !important;
}

[data-itemtype="rechazar_cpi"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='white'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
}

/* Botón Volver - Gris neutral */
[data-itemtype="volver_cpi"] .btn {
    background-color: #8c8c8c !important;
    box-shadow: 0 2px 5px rgba(140, 140, 140, 0.3) !important;
}

[data-itemtype="volver_cpi"] .btn:hover {
    background-color: #737373 !important;
    box-shadow: 0 4px 8px rgba(140, 140, 140, 0.4) !important;
}

[data-itemtype="volver_cpi"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");
}

/* Botón Actualizar Notas - Cyan actualización */
[data-itemtype="actualizar_notas_cpi"] .btn {
    background-color: #13c2c2 !important;
    box-shadow: 0 2px 5px rgba(19, 194, 194, 0.3) !important;
}

[data-itemtype="actualizar_notas_cpi"] .btn:hover {
    background-color: #0fa3a3 !important;
    box-shadow: 0 4px 8px rgba(19, 194, 194, 0.4) !important;
}

[data-itemtype="actualizar_notas_cpi"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M142.9 142.9c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5c0 0 0 0 0 0H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5c7.7-21.8 20.2-42.3 37.8-59.8zM16 312v7.6 .7V440c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l41.6-41.6c87.6 86.5 228.7 86.2 315.8-1c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.2 62.2-162.7 62.5-225.3 1L185 329c6.9-6.9 8.9-17.2 5.2-26.2s-12.5-14.8-22.2-14.8H48.4h-.7H40c-13.3 0-24 10.7-24 24z'/%3E%3C/svg%3E");
}



/* Estilos base comunes para todos los botones */
[data-itemtype^="aprobar_fasciculo"],
[data-itemtype^="avanzar_fasciculo"],
[data-itemtype^="rechazar_fasciculo"],
[data-itemtype^="volver_fasciculo"] {
    .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 8px 16px 8px 40px !important;
        border-radius: 4px !important;
        border: none !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        min-width: 100px !important;
        text-decoration: none !important;
        color: white !important;
        margin-right: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .btn::before {
        content: "" !important;
        position: absolute !important;
        left: 15px !important;
        width: 18px !important;
        height: 18px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    
    .btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    .btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    .btn:disabled {
        opacity: 0.65 !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
        background-color: #e9ecef !important;
        color: #adb5bd !important;
    }
}

/* Botón Aprobar - Verde de éxito */
[data-itemtype="aprobar_fasciculo"] .btn {
    background-color: #00a854 !important;
    box-shadow: 0 2px 5px rgba(0, 168, 84, 0.3) !important;
}

[data-itemtype="aprobar_fasciculo"] .btn:hover {
    background-color: #008f47 !important;
    box-shadow: 0 4px 8px rgba(0, 168, 84, 0.4) !important;
}

[data-itemtype="aprobar_fasciculo"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

/* Botón Avanzar - Naranja progreso */
[data-itemtype="avanzar_fasciculo"] .btn {
    background-color: #fa8c16 !important;
    box-shadow: 0 2px 5px rgba(250, 140, 22, 0.3) !important;
}

[data-itemtype="avanzar_fasciculo"] .btn:hover {
    background-color: #d97512 !important;
    box-shadow: 0 4px 8px rgba(250, 140, 22, 0.4) !important;
}

[data-itemtype="avanzar_fasciculo"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
}

/* Botón Rechazar - Rojo peligro */
[data-itemtype="rechazar_fasciculo"] .btn {
    background-color: #f5222d !important;
    box-shadow: 0 2px 5px rgba(245, 34, 45, 0.3) !important;
}

[data-itemtype="rechazar_fasciculo"] .btn:hover {
    background-color: #cf1322 !important;
    box-shadow: 0 4px 8px rgba(245, 34, 45, 0.4) !important;
}

[data-itemtype="rechazar_fasciculo"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='white'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
}

/* Botón Volver - Gris neutral */
[data-itemtype="volver_fasciculo"] .btn {
    background-color: #8c8c8c !important;
    box-shadow: 0 2px 5px rgba(140, 140, 140, 0.3) !important;
}

[data-itemtype="volver_fasciculo"] .btn:hover {
    background-color: #737373 !important;
    box-shadow: 0 4px 8px rgba(140, 140, 140, 0.4) !important;
}

[data-itemtype="volver_fasciculo"] .btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");
}