/* CSS personalizado para sistema PHPRunner 10.91 - Color #7c0000 con iconos */

/* 1. Títulos con color del menú (#7c0000) y letras blancas */
.r-topbar-page .r-topheader,
.r-topbar-page .navbar-default,
.r-topbar-page .navbar-nav > li > a,
.r-topbar-page .navbar-brand {
    background-color: #7c0000 !important;
    color: white !important;
}

/* Estados hover para elementos del menú */
.r-topbar-page .navbar-nav > li > a:hover,
.r-topbar-page .navbar-nav > li > a:focus {
    background-color: #5a0000 !important;
    color: white !important;
}

/* Menú desplegable */
.r-topbar-page .navbar-nav .dropdown-menu {
    background-color: #7c0000 !important;
    border-color: #5a0000 !important;
}

.r-topbar-page .navbar-nav .dropdown-menu > li > a {
    color: white !important;
}

.r-topbar-page .navbar-nav .dropdown-menu > li > a:hover {
    background-color: #5a0000 !important;
}

/* 2. BOTONES CON ICONOS Y COLORES CARACTERÍSTICOS */

/* Botón Añadir nuevo - Verde con icono + */
[data-itemtype="add"] .btn-primary::before,
[data-itemtype="inline_add"] .btn-primary::before {
    content: "➕ ";
    margin-right: 5px;
}

[data-itemtype="add"] .btn-primary,
[data-itemtype="inline_add"] .btn-primary {
    background-color: #28a745 !important;
    border-color: #1e7e34 !important;
    color: white !important;
}

[data-itemtype="add"] .btn-primary:hover,
[data-itemtype="inline_add"] .btn-primary:hover {
    background-color: #218838 !important;
    border-color: #1c7430 !important;
}

/* Botón Editar - Azul con icono ✏️ */
[data-itemtype="grid_edit"] a::before {
    content: "✏️ ";
    margin-right: 3px;
}

[data-itemtype="grid_edit"] a {
    color: #007bff !important;
    text-decoration: none;
}

[data-itemtype="grid_edit"] a:hover {
    color: #0056b3 !important;
    text-decoration: underline;
}

/* Botón Ver - Verde azulado con icono 👁️ */
[data-itemtype="grid_view"] a::before {
    content: "👁️ ";
    margin-right: 3px;
}

[data-itemtype="grid_view"] a {
    color: #17a2b8 !important;
    text-decoration: none;
}

[data-itemtype="grid_view"] a:hover {
    color: #117a8b !important;
    text-decoration: underline;
}

/* Botón Copiar - Naranja con icono 📋 */
[data-itemtype="grid_copy"] a::before {
    content: "📋 ";
    margin-right: 3px;
}

[data-itemtype="grid_copy"] a {
    color: #fd7e14 !important;
    text-decoration: none;
}

[data-itemtype="grid_copy"] a:hover {
    color: #e55c00 !important;
    text-decoration: underline;
}

/* Botón Cancelar edición inline - Rojo con icono ❌ */
[data-itemtype="grid_inline_cancel"] a::before {
    content: "❌ ";
    margin-right: 3px;
}

[data-itemtype="grid_inline_cancel"] a {
    color: #dc3545 !important;
    text-decoration: none;
}

[data-itemtype="grid_inline_cancel"] a:hover {
    color: #bd2130 !important;
    text-decoration: underline;
}

/* Botón Borrar seleccionados - Rojo con icono 🗑️ */
[data-itemtype="delete"] .btn-default::before,
[data-itemtype="delete_selected"] .btn-default::before {
    content: "🗑️ ";
    margin-right: 5px;
}

[data-itemtype="delete"] .btn-default,
[data-itemtype="delete_selected"] .btn-default {
    background-color: #dc3545 !important;
    border-color: #c82333 !important;
    color: white !important;
}

[data-itemtype="delete"] .btn-default:hover,
[data-itemtype="delete_selected"] .btn-default:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Botón Exportar seleccionados - Morado con icono 📤 */
[data-itemtype="export_selected"] a::before {
    content: "📤 ";
    margin-right: 5px;
}

[data-itemtype="export_selected"] a {
    color: #6f42c1 !important;
}

[data-itemtype="export_selected"] a:hover {
    color: #563d7c !important;
}

/* Botón Exportar resultados - Azul con icono 📊 */
[data-itemtype="export"] a::before {
    content: "📊 ";
    margin-right: 5px;
}

[data-itemtype="export"] a {
    color: #20c997 !important;
}

[data-itemtype="export"] a:hover {
    color: #17a589 !important;
}

/* Botón Búsqueda avanzada - Azul oscuro con icono 🔍 */
[data-itemtype="advsearch_link"] a::before {
    content: "🔍 ";
    margin-right: 5px;
}

[data-itemtype="advsearch_link"] a {
    color: #0056b3 !important;
}

[data-itemtype="advsearch_link"] a:hover {
    color: #004085 !important;
}

/* Botones Mostrar/Ocultar panel búsqueda - Gris con iconos */
[data-itemtype="show_search_panel"] a::before {
    content: "📂 ";
    margin-right: 5px;
}

[data-itemtype="hide_search_panel"] a::before {
    content: "📁 ";
    margin-right: 5px;
}

/* Botón Conectar/Login - Verde con icono 🔑 */
[data-itemtype="loginform_login"] .btn-primary::before {
    content: "🔑 ";
    margin-right: 5px;
}

[data-itemtype="loginform_login"] .btn-primary {
    background-color: #28a745 !important;
    border-color: #1e7e34 !important;
}

[data-itemtype="loginform_login"] .btn-primary:hover {
    background-color: #218838 !important;
    border-color: #1c7430 !important;
}

/* Botón Desconectarse - Rojo con icono 🚪 */
[data-itemtype="logout_link"] a::before {
    content: "🚪 ";
    margin-right: 5px;
}

[data-itemtype="logout_link"] a {
    color: #dc3545 !important;
}

[data-itemtype="logout_link"] a:hover {
    color: #bd2130 !important;
}

/* Botón Perfil usuario - Azul con icono 👤 */
[data-itemtype="userinfo_link"] a::before {
    content: "👤 ";
    margin-right: 5px;
}

[data-itemtype="userinfo_link"] a {
    color: #17a2b8 !important;
}

[data-itemtype="userinfo_link"] a:hover {
    color: #117a8b !important;
}

/* 3. Títulos de secciones principales */
.r-form[data-location="top"] .breadcrumb,
.r-form[data-location="top"] .breadcrumb a,
.r-form[data-location="above-grid"] h1,
.r-form[data-location="above-grid"] h2,
.r-form[data-location="above-grid"] h3,
.r-form[data-location="above-grid"] h4,
.r-form[data-location="above-grid"] .btn,
.r-form[data-location="below-grid"] .pagination {
    background-color: #7c0000 !important;
    color: white !important;
}

/* Breadcrumb con icono de casa */
.breadcrumb > li:first-child a::before {
    content: "🏠 ";
    margin-right: 5px;
}

.breadcrumb > .active {
    color: #f8f9fa !important;
}

.breadcrumb a {
    color: #f8f9fa !important;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* 4. Títulos de columnas de la tabla */
.table thead th {
    background-color: #7c0000 !important;
    color: white !important;
    border-color: #5a0000 !important;
    position: sticky;
    top: 0;
}

/* 5. Tabla con scroll horizontal */
.r-grid {
    overflow-x: auto;
    width: 100%;
    max-height: 70vh;
    border: 1px solid #dee2e6;
}

.r-grid table {
    min-width: 100%;
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

/* Asegurar que las celdas no se rompan */
.r-grid table td,
.r-grid table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Estilo adicional para mejor visualización */
.r-grid table {
    border-collapse: collapse;
}

.r-grid table th,
.r-grid table td {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
}

/* Filas alternas para mejor legibilidad */
.r-grid table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.r-grid table tbody tr:hover {
    background-color: #e9ecef;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .r-grid {
        font-size: 12px;
    }
    
    .r-grid table th,
    .r-grid table td {
        padding: 6px 8px;
    }
    
    .r-topbar-page .navbar-brand {
        font-size: 16px;
    }
    
    /* Iconos más pequeños en móviles */
    [data-itemtype] a::before,
    [data-itemtype] .btn::before {
        font-size: 14px;
        margin-right: 3px;
    }
}

/* Estilo para el scrollbar personalizado */
.r-grid::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.r-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.r-grid::-webkit-scrollbar-thumb {
    background: #7c0000;
    border-radius: 10px;
}

.r-grid::-webkit-scrollbar-thumb:hover {
    background: #5a0000;
}

/* Paginación con iconos */
.pagination > li:first-child > a::before {
    content: "⏪ ";
    margin-right: 5px;
}

.pagination > li:last-child > a::after {
    content: " ⏩";
    margin-left: 5px;
}

.pagination > li > a,
.pagination > li > span {
    background-color: #7c0000 !important;
    border-color: #5a0000 !important;
    color: white !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: #5a0000 !important;
    border-color: #3d0000 !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: #5a0000 !important;
    border-color: #3d0000 !important;
}

/* Panel de búsqueda con icono */
.searchOptions .panel-heading::before {
    content: "🔎 ";
    margin-right: 8px;
}

.searchOptions .panel-heading {
    background-color: #7c0000 !important;
    color: white !important;
    border-color: #5a0000 !important;
}

.searchOptions .panel-heading .btn-default {
    background-color: transparent;
    border-color: rgba(255,255,255,0.3);
    color: white;
}

.searchOptions .panel-heading .btn-default:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
}

/* Botón Buscar en panel de búsqueda */
#searchButton::before {
    content: "🔍 ";
    margin-right: 5px;
}

/* Botón Mostrar todo en panel de búsqueda */
[data-itemtype="showAll"] .btn-default::before {
    content: "📄 ";
    margin-right: 5px;
}

/* Checkbox con estilo mejorado */
[data-itemtype="grid_checkbox"] input[type="checkbox"] {
    transform: scale(1.2);
    margin: 0 5px;
}

/* Efectos de hover para todos los botones con iconos */
[data-itemtype] a:hover::before,
[data-itemtype] .btn:hover::before {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}




/* CSS personalizado para formularios Add y Edit - Color #7c0000 con iconos */

/* 1. ESTRUCTURA GENERAL Y COLORES PRINCIPALES */
.r-small-page .r-form[data-location="top"],
.r-small-page .r-form[data-location="above-grid"],
.r-small-page .r-form[data-location="below-grid"] {
    background-color: #7c0000 !important;
    color: white !important;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Títulos principales */
[data-itemtype="add_header"] h2,
[data-itemtype="edit_header"] h2 {
    color: white !important;
    text-align: center;
    margin: 15px 0;
    font-weight: bold;
}

/* 2. PANELES DE SECCIÓN CON ICONOS */
.panel-default .panel-heading {
    background-color: #7c0000 !important;
    color: white !important;
    border-color: #5a0000 !important;
}

/* Iconos para cada sección del formulario */
.panel[data-page="reporte_avances_pei_2024_2027_add"] .panel-heading[role="tab"]:nth-of-type(1) h4::before,
.panel[data-page="reporte_avances_pei_2024_2027_edit"] .panel-heading[role="tab"]:nth-of-type(1) h4::before {
    content: "📊 ";
    margin-right: 8px;
}

.panel[data-page="reporte_avances_pei_2024_2027_add"] .panel-heading[role="tab"]:nth-of-type(2) h4::before,
.panel[data-page="reporte_avances_pei_2024_2027_edit"] .panel-heading[role="tab"]:nth-of-type(2) h4::before {
    content: "💰 ";
    margin-right: 8px;
}

.panel[data-page="reporte_avances_pei_2024_2027_add"] .panel-heading[role="tab"]:nth-of-type(3) h4::before,
.panel[data-page="reporte_avances_pei_2024_2027_edit"] .panel-heading[role="tab"]:nth-of-type(3) h4::before {
    content: "📅 ";
    margin-right: 8px;
}

.panel[data-page="reporte_avances_pei_2024_2027_add"] .panel-heading[role="tab"]:nth-of-type(4) h4::before,
.panel[data-page="reporte_avances_pei_2024_2027_edit"] .panel-heading[role="tab"]:nth-of-type(4) h4::before {
    content: "👤 ";
    margin-right: 8px;
}

.panel[data-page="reporte_avances_pei_2024_2027_add"] .panel-heading[role="tab"]:nth-of-type(5) h4::before,
.panel[data-page="reporte_avances_pei_2024_2027_edit"] .panel-heading[role="tab"]:nth-of-type(5) h4::before {
    content: "📈 ";
    margin-right: 8px;
}

/* 3. BOTONES PRINCIPALES CON ICONOS Y COLORES */

/* Botón GUARDAR - Verde con icono 💾 */
[data-itemtype="add_save"] .btn-primary::before,
[data-itemtype="edit_save"] .btn-primary::before {
    content: "💾 ";
    margin-right: 8px;
}

[data-itemtype="add_save"] .btn-primary,
[data-itemtype="edit_save"] .btn-primary {
    background-color: #28a745 !important;
    border-color: #1e7e34 !important;
    color: white !important;
    font-weight: bold;
    padding: 10px 20px;
    margin: 5px;
}

[data-itemtype="add_save"] .btn-primary:hover,
[data-itemtype="edit_save"] .btn-primary:hover {
    background-color: #218838 !important;
    border-color: #1c7430 !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Botón REINICIAR - Naranja con icono 🔄 */
[data-itemtype="add_reset"] .btn-default::before,
[data-itemtype="edit_reset"] .btn-default::before {
    content: "🔄 ";
    margin-right: 8px;
}

[data-itemtype="add_reset"] .btn-default,
[data-itemtype="edit_reset"] .btn-default {
    background-color: #fd7e14 !important;
    border-color: #e55c00 !important;
    color: white !important;
    padding: 10px 20px;
    margin: 5px;
}

[data-itemtype="add_reset"] .btn-default:hover,
[data-itemtype="edit_reset"] .btn-default:hover {
    background-color: #e55c00 !important;
    border-color: #cc4c00 !important;
}

/* Botón VOLVER A LA LISTA - Azul con icono 📋 */
[data-itemtype="add_back_list"] .btn-default::before,
[data-itemtype="edit_back_list"] .btn-default::before {
    content: "📋 ";
    margin-right: 8px;
}

[data-itemtype="add_back_list"] .btn-default,
[data-itemtype="edit_back_list"] .btn-default {
    background-color: #007bff !important;
    border-color: #0056b3 !important;
    color: white !important;
    padding: 10px 20px;
    margin: 5px;
}

[data-itemtype="add_back_list"] .btn-default:hover,
[data-itemtype="edit_back_list"] .btn-default:hover {
    background-color: #0056b3 !important;
    border-color: #004085 !important;
}

/* Botón CANCELAR - Rojo con icono ❌ */
[data-itemtype="add_cancel"] .btn-default::before,
[data-itemtype="edit_close"] .btn-default::before {
    content: "❌ ";
    margin-right: 8px;
}

[data-itemtype="add_cancel"] .btn-default,
[data-itemtype="edit_close"] .btn-default {
    background-color: #dc3545 !important;
    border-color: #c82333 !important;
    color: white !important;
    padding: 10px 20px;
    margin: 5px;
}

[data-itemtype="add_cancel"] .btn-default:hover,
[data-itemtype="edit_close"] .btn-default:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Botones de navegación PREV/NEXT */
[data-itemtype="prev"] .btn-default::before {
    content: "⬅️ ";
    margin-right: 5px;
}

[data-itemtype="next"] .btn-default::before {
    content: "➡️ ";
    margin-left: 5px;
}

[data-itemtype="prev"] .btn-default,
[data-itemtype="next"] .btn-default {
    background-color: #6c757d !important;
    border-color: #545b62 !important;
    color: white !important;
    margin: 5px;
}

[data-itemtype="prev"] .btn-default:hover,
[data-itemtype="next"] .btn-default:hover {
    background-color: #545b62 !important;
    border-color: #4e555b !important;
}

/* 4. BOTONES DEL MENÚ HAMBURGUESA */
[data-itemtype="hamburger"] .btn-default {
    background-color: #6c757d !important;
    border-color: #545b62 !important;
    color: white !important;
    margin: 5px;
}

/* Botón VER en menú hamburguesa - Azul claro con icono 👁️ */
[data-itemtype="edit_view"] a::before {
    content: "👁️ ";
    margin-right: 8px;
}

[data-itemtype="edit_view"] a {
    color: #17a2b8 !important;
    text-decoration: none;
    display: block;
    padding: 8px 15px;
}

[data-itemtype="edit_view"] a:hover {
    color: #117a8b !important;
    background-color: #f8f9fa;
}

/* 5. BOTONES DEL MENSAJE DE ALERTA */

/* Botón VOLVER A LA LISTA en mensaje */
.message_back_button::before {
    content: "📋 ";
    margin-right: 8px;
}

.message_back_button {
    background-color: #007bff !important;
    border-color: #0056b3 !important;
    color: white !important;
    margin: 5px;
}

.message_back_button:hover {
    background-color: #0056b3 !important;
    border-color: #004085 !important;
}

/* Botón VER en mensaje - Verde azulado con icono 👁️ */
.view_page_button::before {
    content: "👁️ ";
    margin-right: 8px;
}

.view_page_button {
    background-color: #17a2b8 !important;
    border-color: #117a8b !important;
    color: white !important;
    margin: 5px;
}

.view_page_button:hover {
    background-color: #117a8b !important;
    border-color: #0f6674 !important;
}

/* Botón EDITAR en mensaje - Azul con icono ✏️ */
.edit_page_button::before {
    content: "✏️ ";
    margin-right: 8px;
}

.edit_page_button {
    background-color: #007bff !important;
    border-color: #0056b3 !important;
    color: white !important;
    margin: 5px;
}

.edit_page_button:hover {
    background-color: #0056b3 !important;
    border-color: #004085 !important;
}

/* 6. ESTILOS PARA FORMULARIOS Y CAMPOS */
.r-edit-form .form-group {
    margin-bottom: 20px;
}

.r-edit-label {
    color: #7c0000 !important;
    font-weight: bold;
    font-size: 14px;
}

.r-edit-field .form-control {
    border: 2px solid #e9ecef;
    border-radius: 4px;
    padding: 10px;
    transition: all 0.3s ease;
}

.r-edit-field .form-control:focus {
    border-color: #7c0000;
    box-shadow: 0 0 0 0.2rem rgba(124, 0, 0, 0.25);
}

/* Icono de campo requerido */
.icon-required::before {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* 7. MENSAJES DE ALERTA */
.alert {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-left: 4px solid #28a745;
}

.alert-danger {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-left: 4px solid #dc3545;
}

.alert-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-left: 4px solid #ffc107;
}

.alert-info {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
    border-left: 4px solid #17a2b8;
}

/* 8. MEJORAS VISUALES Y EFECTOS */
.btn {
    transition: all 0.3s ease;
    border-radius: 6px;
    font-weight: 500;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Contenedor de botones centrados */
.r-align-center {
    text-align: center;
    padding: 15px 0;
}

/* 9. RESPONSIVE PARA DISPOSITIVOS MÓVILES */
@media (max-width: 768px) {
    .r-small-page {
        padding: 10px;
    }
    
    .btn {
        display: block;
        width: 100%;
        margin: 10px 0;
        padding: 12px;
    }
    
    .r-align-center .btn {
        display: inline-block;
        width: auto;
        margin: 5px;
    }
    
    .panel-heading h4 {
        font-size: 16px;
    }
    
    /* Iconos más pequeños en móviles */
    .btn::before,
    .panel-heading h4::before {
        font-size: 14px;
        margin-right: 5px;
    }
}

/* 10. EFECTOS ESPECIALES PARA ICONOS */
.btn::before,
.panel-heading h4::before {
    display: inline-block;
    transition: transform 0.2s ease;
}

.btn:hover::before,
.panel-heading:hover h4::before {
    transform: scale(1.2);
}

/* 11. ESTILOS PARA EL MENÚ DESPLEGABLE HAMBURGUESA */
.dropdown-menu {
    border: 1px solid #7c0000;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(124, 0, 0, 0.2);
}

.dropdown-menu > li > a {
    padding: 8px 15px;
    transition: all 0.2s ease;
}

.dropdown-menu > li > a:hover {
    background-color: #7c0000;
    color: white !important;
}

/* 12. ESTILOS PARA CAMPOS DE FORMULARIO ESPECÍFICOS */
.r-integrated-field {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #7c0000;
    margin-bottom: 15px;
}

.r-edit-tooltip .text-muted {
    color: #6c757d !important;
    font-size: 12px;
    font-style: italic;
}

/* 13. ANIMACIONES SUAVES */
.panel-collapse {
    transition: all 0.3s ease;
}

.r-integrated-field {
    transition: all 0.3s ease;
}

.r-integrated-field:hover {
    background-color: #e9ecef;
    transform: translateX(5px);
}

/* CSS personalizado para formulario View - Color #7c0000 con iconos */

/* 1. ESTRUCTURA GENERAL Y COLORES PRINCIPALES */
.r-small-page .r-form[data-location="top"],
.r-small-page .r-form[data-location="above-grid"],
.r-small-page .r-form[data-location="below-grid"] {
    background-color: #7c0000 !important;
    color: white !important;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Título principal del View */
[data-itemtype="view_header"] h2 {
    color: white !important;
    text-align: center;
    margin: 15px 0;
    font-weight: bold;
    padding: 10px;
}

/* 2. PANELES DE SECCIÓN CON ICONOS */
.panel-default .panel-heading {
    background-color: #7c0000 !important;
    color: white !important;
    border-color: #5a0000 !important;
    border-radius: 8px 8px 0 0;
}

/* Iconos para cada sección del formulario View */
.panel[data-page="reporte_avances_pei_2024_2027_view"] .panel-heading[role="tab"]:nth-of-type(1) h4::before {
    content: "📊 ";
    margin-right: 8px;
}

.panel[data-page="reporte_avances_pei_2024_2027_view"] .panel-heading[role="tab"]:nth-of-type(2) h4::before {
    content: "💰 ";
    margin-right: 8px;
}

.panel[data-page="reporte_avances_pei_2024_2027_view"] .panel-heading[role="tab"]:nth-of-type(3) h4::before {
    content: "📅 ";
    margin-right: 8px;
}

.panel[data-page="reporte_avances_pei_2024_2027_view"] .panel-heading[role="tab"]:nth-of-type(4) h4::before {
    content: "👤 ";
    margin-right: 8px;
}

.panel[data-page="reporte_avances_pei_2024_2027_view"] .panel-heading[role="tab"]:nth-of-type(5) h4::before {
    content: "📈 ";
    margin-right: 8px;
}

/* 3. BOTONES PRINCIPALES CON ICONOS Y COLORES */

/* Botón VOLVER A LA LISTA - Azul con icono 📋 */
[data-itemtype="view_back_list"] .btn-default::before {
    content: "📋 ";
    margin-right: 8px;
}

[data-itemtype="view_back_list"] .btn-default {
    background-color: #007bff !important;
    border-color: #0056b3 !important;
    color: white !important;
    font-weight: bold;
    padding: 10px 20px;
    margin: 5px;
}

[data-itemtype="view_back_list"] .btn-default:hover {
    background-color: #0056b3 !important;
    border-color: #004085 !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Botón CERRAR VENTANA - Rojo con icono ❌ */
[data-itemtype="view_close"] .btn-default::before {
    content: "❌ ";
    margin-right: 8px;
}

[data-itemtype="view_close"] .btn-default {
    background-color: #dc3545 !important;
    border-color: #c82333 !important;
    color: white !important;
    padding: 10px 20px;
    margin: 5px;
}

[data-itemtype="view_close"] .btn-default:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Botones de navegación PREV/NEXT */
[data-itemtype="prev"] .btn-default::before {
    content: "⬅️ ";
    margin-right: 5px;
}

[data-itemtype="next"] .btn-default::before {
    content: "➡️ ";
    margin-left: 5px;
}

[data-itemtype="prev"] .btn-default,
[data-itemtype="next"] .btn-default {
    background-color: #6c757d !important;
    border-color: #545b62 !important;
    color: white !important;
    margin: 5px;
}

[data-itemtype="prev"] .btn-default:hover,
[data-itemtype="next"] .btn-default:hover {
    background-color: #545b62 !important;
    border-color: #4e555b !important;
}

/* 4. BOTÓN EDITAR EN MENÚ HAMBURGUESA */
[data-itemtype="hamburger"] .btn-default {
    background-color: #6c757d !important;
    border-color: #545b62 !important;
    color: white !important;
    margin: 5px;
}

/* Botón EDITAR en menú hamburguesa - Azul con icono ✏️ */
[data-itemtype="view_edit"] a::before {
    content: "✏️ ";
    margin-right: 8px;
}

[data-itemtype="view_edit"] a {
    color: #007bff !important;
    text-decoration: none;
    display: block;
    padding: 8px 15px;
    font-weight: 500;
}

[data-itemtype="view_edit"] a:hover {
    color: #0056b3 !important;
    background-color: #f8f9fa;
    border-radius: 4px;
}

/* 5. ESTILOS PARA CAMPOS DE VISUALIZACIÓN (VIEW) */

/* Campos de visualización con mejor estilo */
.r-integrated-field {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #7c0000;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.r-integrated-field:hover {
    background-color: #e9ecef;
    transform: translateX(3px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Etiquetas de campos */
.bs-view-label {
    color: #7c0000 !important;
    font-weight: bold;
    font-size: 14px;
    padding-top: 8px;
}

/* Valores de campos */
.col-md-6 {
    color: #495057 !important;
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: white;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding-left: 12px;
}

/* 6. ESTILOS ESPECIALES PARA CAMPOS DE AVANCE */

/* Campos de avance cuantitativo */
[data-fieldname="avance_cuantitativo_2024"] .col-md-6,
[data-fieldname="avance_cuantitativo_2025"] .col-md-6 {
    background-color: #e8f5e8 !important;
    border-left: 3px solid #28a745;
    font-weight: 500;
}

/* Campos de avance porcentual */
[data-fieldname="avance_porcentual_2024"] .col-md-6,
[data-fieldname="avance_porcentual_2025"] .col-md-6 {
    background-color: #e3f2fd !important;
    border-left: 3px solid #007bff;
    font-weight: 500;
}

/* Campo estado semáforo con colores según valor */
[data-fieldname="estado_semaforo"] .col-md-6 {
    font-weight: bold;
    text-transform: uppercase;
}

/* 7. MEJORAS VISUALES PARA EL PANEL BODY */
.panel-body {
    background-color: #ffffff;
    border-radius: 0 0 8px 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 8. ESTILOS PARA EL MENÚ DESPLEGABLE HAMBURGUESA */
.dropdown-menu {
    border: 1px solid #7c0000;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(124, 0, 0, 0.2);
}

.dropdown-menu > li > a {
    padding: 8px 15px;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f8f9fa;
}

.dropdown-menu > li > a:hover {
    background-color: #7c0000;
    color: white !important;
    transform: translateX(5px);
}

.dropdown-menu > li:last-child > a {
    border-bottom: none;
}

/* 9. CONTENEDORES DE BOTONES */
.below-grid_c1 {
    text-align: left;
    padding: 15px 0;
}

.below-grid_c2 {
    text-align: right;
    padding: 15px 0;
}

/* 10. EFECTOS Y ANIMACIONES */
.btn {
    transition: all 0.3s ease;
    border-radius: 6px;
    font-weight: 500;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Efectos para iconos */
.btn::before,
.panel-heading h4::before {
    display: inline-block;
    transition: transform 0.2s ease;
}

.btn:hover::before,
.panel-heading:hover h4::before {
    transform: scale(1.2);
}

/* 11. RESPONSIVE PARA DISPOSITIVOS MÓVILES */
@media (max-width: 768px) {
    .r-small-page {
        padding: 10px;
    }
    
    .btn {
        display: block;
        width: 100%;
        margin: 10px 0;
        padding: 12px;
    }
    
    .below-grid_c1 .btn,
    .below-grid_c2 .btn {
        display: inline-block;
        width: auto;
        margin: 5px;
    }
    
    .panel-heading h4 {
        font-size: 16px;
    }
    
    /* Ajustes para campos en móviles */
    .bs-view-label {
        text-align: left !important;
        margin-bottom: 5px;
    }
    
    .col-md-6 {
        margin-bottom: 10px;
    }
    
    /* Iconos más pequeños en móviles */
    .btn::before,
    .panel-heading h4::before {
        font-size: 14px;
        margin-right: 5px;
    }
    
    /* Botones apilados en móviles */
    .below-grid_c1,
    .below-grid_c2 {
        text-align: center !important;
    }
}

/* 12. ESTILOS ESPECIALES PARA CAMPOS DE FECHA Y USUARIO */

/* Campos de auditoría (fecha y usuario) */
[data-fieldname="fecha_alta"] .col-md-6,
[data-fieldname="fecha_edit"] .col-md-6,
[data-fieldname="id_usuario_alta"] .col-md-6,
[data-fieldname="id_usuario_edicion"] .col-md-6 {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    font-style: italic;
    font-size: 13px;
    border-left: 3px solid #6c757d;
}

/* 13. MEJORAS DE LEGIBILIDAD */

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

/* Mejor contraste para texto */
.r-integrated-field .col-md-6 {
    color: #212529 !important;
}

/* 14. ESTADOS DE CAMPOS ESPECIALES */

/* Campo estado semáforo con colores dinámicos */
[data-fieldname="estado_semaforo"] .col-md-6[style*="green"],
[data-fieldname="estado_semaforo"] .col-md-6:contains("Verde"),
[data-fieldname="estado_semaforo"] .col-md-6:contains("verde") {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-left: 3px solid #28a745;
}

[data-fieldname="estado_semaforo"] .col-md-6[style*="yellow"],
[data-fieldname="estado_semaforo"] .col-md-6:contains("Amarillo"),
[data-fieldname="estado_semaforo"] .col-md-6:contains("amarillo") {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-left: 3px solid #ffc107;
}

[data-fieldname="estado_semaforo"] .col-md-6[style*="red"],
[data-fieldname="estado_semaforo"] .col-md-6:contains("Rojo"),
[data-fieldname="estado_semaforo"] .col-md-6:contains("rojo") {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-left: 3px solid #dc3545;
}

/* 15. ANIMACIONES SUAVES */
.panel-collapse {
    transition: all 0.3s ease;
}

.r-integrated-field {
    transition: all 0.3s ease;
}

/* 16. ESTILOS PARA EL SCROLL EN PANELES */
.panel-body {
    max-height: none;
    overflow: visible;
}

/* 17. MEJORAS DE ACCESIBILIDAD */
.btn:focus {
    outline: 2px solid #7c0000;
    outline-offset: 2px;
}

.panel-heading:focus {
    outline: 2px solid #7c0000;
    outline-offset: 2px;
}

/* 18. ESTILOS PARA EL LAYOUT DE BOTONES INFERIORES */
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 19. EFECTO DE ELEVACIÓN EN PANELES */
.panel {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.panel:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: box-shadow 0.3s ease;
}

/* 20. ESTILOS PARA CAMPOS LARGOS (TEXTOS EXTENSOS) */
[data-fieldname="objetivo_institucional"] .col-md-6,
[data-fieldname="linea_estrategicas_accion"] .col-md-6,
[data-fieldname="metas"] .col-md-6,
[data-fieldname="indicadores"] .col-md-6 {
    min-height: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
}


/* CSS para agregar iconos al menú principal - Sin afectar estilos existentes */

/* 1. ICONO PARA EL NOMBRE DEL PROYECTO/LOGO */
.navbar-brand::before {
    content: "🏢 ";
    margin-right: 8px;
    display: inline-block;
}

/* 2. ICONOS PARA LOS ITEMS DEL MENÚ PRINCIPAL */

/* Ícono para Reportes de Avances PEI */
.r-menu.navbar-nav > li > a[href*="reporte_avances"]::before {
    content: "📊 ";
    margin-right: 8px;
    display: inline-block;
}

/* Ícono para Dashboard/Inicio */
.r-menu.navbar-nav > li > a[href*="dashboard"]::before,
.r-menu.navbar-nav > li > a[href*="inicio"]::before,
.r-menu.navbar-nav > li > a[href*="home"]::before {
    content: "📈 ";
    margin-right: 8px;
    display: inline-block;
}

/* Ícono para Configuración */
.r-menu.navbar-nav > li > a[href*="configuracion"]::before,
.r-menu.navbar-nav > li > a[href*="settings"]::before {
    content: "⚙️ ";
    margin-right: 8px;
    display: inline-block;
}

/* Ícono para Reportes Generales */
.r-menu.navbar-nav > li > a[href*="reportes"]::before {
    content: "📋 ";
    margin-right: 8px;
    display: inline-block;
}

/* Ícono para Gestión de Usuarios */
.r-menu.navbar-nav > li > a[href*="usuarios"]::before,
.r-menu.navbar-nav > li > a[href*="users"]::before {
    content: "👥 ";
    margin-right: 8px;
    display: inline-block;
}

/* Ícono para Ayuda */
.r-menu.navbar-nav > li > a[href*="help"]::before,
.r-menu.navbar-nav > li > a[href*="ayuda"]::before {
    content: "❓ ";
    margin-right: 8px;
    display: inline-block;
}

/* Ícono para Administración */
.r-menu.navbar-nav > li > a[href*="admin"]::before,
.r-menu.navbar-nav > li > a[href*="administracion"]::before {
    content: "🔧 ";
    margin-right: 8px;
    display: inline-block;
}

/* Ícono para Auditoría */
.r-menu.navbar-nav > li > a[href*="auditoria"]::before,
.r-menu.navbar-nav > li > a[href*="audit"]::before {
    content: "📝 ";
    margin-right: 8px;
    display: inline-block;
}

/* 3. ICONOS PARA SUBMENÚS Y ACCIONES */

/* Agregar nuevo */
.dropdown-menu > li > a[href*="add"]::before,
.dropdown-menu > li > a[href*="nuevo"]::before {
    content: "➕ ";
    margin-right: 8px;
    display: inline-block;
}

/* Editar */
.dropdown-menu > li > a[href*="edit"]::before,
.dropdown-menu > li > a[href*="editar"]::before {
    content: "✏️ ";
    margin-right: 8px;
    display: inline-block;
}

/* Ver/Consultar */
.dropdown-menu > li > a[href*="view"]::before,
.dropdown-menu > li > a[href*="ver"]::before {
    content: "👁️ ";
    margin-right: 8px;
    display: inline-block;
}

/* Listar */
.dropdown-menu > li > a[href*="list"]::before,
.dropdown-menu > li > a[href*="lista"]::before {
    content: "📄 ";
    margin-right: 8px;
    display: inline-block;
}

/* Exportar */
.dropdown-menu > li > a[href*="export"]::before,
.dropdown-menu > li > a[href*="exportar"]::before {
    content: "📤 ";
    margin-right: 8px;
    display: inline-block;
}

/* Importar */
.dropdown-menu > li > a[href*="import"]::before,
.dropdown-menu > li > a[href*="importar"]::before {
    content: "📥 ";
    margin-right: 8px;
    display: inline-block;
}

/* 4. FONDO BLANCO PARA EL CUERPO DEL MENÚ */
.r-body,
.r-content {
    background-color: white !important;
}

.r-welcome-align {
    background-color: white !important;
    color: #495057;
    text-align: center;
    padding: 40px 20px;
}

/* 5. EFECTOS SUAVES PARA LOS ICONOS */
.r-menu.navbar-nav > li > a::before,
.dropdown-menu > li > a::before,
.navbar-brand::before {
    transition: transform 0.2s ease;
}

.r-menu.navbar-nav > li > a:hover::before,
.dropdown-menu > li > a:hover::before,
.navbar-brand:hover::before {
    transform: scale(1.2);
}

/* 6. RESPONSIVE PARA MÓVILES */
@media (max-width: 768px) {
    .r-menu.navbar-nav > li > a::before,
    .dropdown-menu > li > a::before,
    .navbar-brand::before {
        font-size: 14px;
        margin-right: 6px;
    }
}

/* 7. ICONOS ESPECÍFICOS PARA EL SISTEMA PEI SNPP */

/* Planificación Estratégica */
.r-menu.navbar-nav > li > a[href*="planificacion"]::before,
.r-menu.navbar-nav > li > a[href*="estrategia"]::before {
    content: "🎯 ";
    margin-right: 8px;
    display: inline-block;
}

/* Metas y Objetivos */
.r-menu.navbar-nav > li > a[href*="metas"]::before,
.r-menu.navbar-nav > li > a[href*="objetivos"]::before {
    content: "🏆 ";
    margin-right: 8px;
    display: inline-block;
}

/* Indicadores */
.r-menu.navbar-nav > li > a[href*="indicadores"]::before {
    content: "📊 ";
    margin-right: 8px;
    display: inline-block;
}

/* Seguimiento */
.r-menu.navbar-nav > li > a[href*="seguimiento"]::before {
    content: "🔍 ";
    margin-right: 8px;
    display: inline-block;
}

/* Evaluación */
.r-menu.navbar-nav > li > a[href*="evaluacion"]::before {
    content: "📝 ";
    margin-right: 8px;
    display: inline-block;
}

/* 8. ICONOS PARA EL MENÚ DE USUARIO */

/* Perfil de usuario */
[data-itemtype="userinfo_link"] a::before {
    content: "👤 ";
    margin-right: 8px;
    display: inline-block;
}

/* Cerrar sesión */
[data-itemtype="logout_link"] a::before {
    content: "🚪 ";
    margin-right: 8px;
    display: inline-block;
}

/* 9. ANIMACIÓN DE ENTRADA PARA LOS ICONOS */
@keyframes iconFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.r-menu.navbar-nav > li > a::before,
.navbar-brand::before {
    animation: iconFadeIn 0.5s ease forwards;
}

/* 10. ESTILOS PARA ELEMENTOS ACTIVOS CON ICONOS */
.r-menu.navbar-nav > li.active > a::before {
    transform: scale(1.1);
    filter: brightness(1.2);
}



/* CSS COMPLETO ACTUALIZADO PARA FORMULARIO DE LOGIN - TABLERO PEI SNPP */

/* ===== RESET Y ESTILOS GENERALES ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f8f9fa !important; /* Gris claro moderno */
    min-height: 100vh;
}

/* ===== ESTRUCTURA PRINCIPAL DEL LOGIN ===== */
.r-pretty-login-page {
    background: #f8f9fa !important; /* Gris claro */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.r-pretty-login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(124, 0, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(124, 0, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(124, 0, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Contenedor principal del formulario */
.r-pretty-login-page > .r-controls {
    background: white !important;
    border-radius: 20px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: 60px 50px;
    margin: 20px;
    border: 1px solid #e9ecef;
    width: 100%;
    max-width: 500px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 2;
}

.r-pretty-login-page > .r-controls::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #7c0000, #a30000, #7c0000);
    border-radius: 20px 20px 0 0;
}

.r-pretty-login-page > .r-controls::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #7c0000, #5a0000);
    border-radius: 22px;
    z-index: -1;
    opacity: 0.03;
}

.r-pretty-login-page > .r-controls:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.12),
        0 3px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: #dee2e6;
}

/* Contenedor de imagen lateral */
.r-pretty-login-page > .r-sideimage {
    background: white !important;
    border-radius: 20px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9ecef;
    overflow: hidden;
    max-width: 600px;
    min-height: 600px;
    position: relative;
    z-index: 2;
    padding: 0;
    transition: all 0.3s ease;
}

.r-pretty-login-page > .r-sideimage:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.12),
        0 3px 6px rgba(0, 0, 0, 0.08);
    border-color: #dee2e6;
}

.r-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.r-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.r-image:hover img {
    transform: scale(1.03);
}

/* ===== LOGO Y ENCABEZADO ACTUALIZADO ===== */

/* Logo principal - TABLERO PEI SNPP */
[data-itemtype="login-logo"] {
    font-size: 28px;
    font-weight: 700;
    color: #7c0000 !important;
    text-align: center;
    display: block;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.3;
    padding: 15px 0;
    border-bottom: 3px solid #7c0000;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-itemtype="login-logo"]::before {
    content: "📊 ";
    margin-right: 15px;
    font-size: 36px;
    vertical-align: middle;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* Mensaje de bienvenida */
[data-itemtype="login_welcome"] {
    font-size: 24px;
    font-weight: 600;
    color: #495057 !important; /* Gris más suave */
    text-align: center;
    display: block;
    margin: 30px 0 40px;
    padding: 20px 0;
    position: relative;
    line-height: 1.4;
}

[data-itemtype="login_welcome"]::before {
    content: "🔐 ";
    margin-right: 15px;
    color: #7c0000;
    font-size: 28px;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

[data-itemtype="login_welcome"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #7c0000, transparent);
}

/* ===== CAMPOS DE FORMULARIO MEJORADOS ===== */
.r-fluid.r-form {
    margin: 40px 0 30px;
}

.r-fluid.r-form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 20px;
}

[data-itemtype="username_label"],
[data-itemtype="password_label"] {
    color: #495057 !important; /* Gris más suave */
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 5px;
}

[data-itemtype="username_label"]::before {
    content: "👤 ";
    margin-right: 12px;
    color: #7c0000;
    font-size: 18px;
}

[data-itemtype="password_label"]::before {
    content: "🔒 ";
    margin-right: 12px;
    color: #7c0000;
    font-size: 18px;
}

.r-edit-field {
    position: relative;
    margin-bottom: 30px;
}

.r-edit-field input[type="text"],
.r-edit-field input[type="password"] {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 16px 25px 16px 60px;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    font-weight: 500;
    color: #495057;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03);
}

.r-edit-field input[type="text"]:focus,
.r-edit-field input[type="password"]:focus {
    border-color: #7c0000;
    box-shadow: 
        0 0 0 3px rgba(124, 0, 0, 0.1),
        inset 0 2px 4px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    outline: none;
    transform: translateY(-1px);
}

.r-edit-field input[type="text"]:hover,
.r-edit-field input[type="password"]:hover {
    border-color: #ced4da;
    background-color: #fdfdfd;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.05);
}

.r-edit-field input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237c0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 25px center;
    background-size: 22px;
}

.r-edit-field input[type="password"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237c0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 25px center;
    background-size: 22px;
}

/* ===== CHECKBOX RECORDARME ACTUALIZADO ===== */
[data-itemtype="remember_password"] {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 2px solid #f1f3f4;
    border-bottom: 2px solid #f1f3f4;
    background: #fafbfc;
    border-radius: 10px;
    padding: 20px;
}

[data-itemtype="remember_password"] label {
    color: #6c757d;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px;
    transition: all 0.3s ease;
}

[data-itemtype="remember_password"] label:hover {
    color: #495057;
}

[data-itemtype="remember_password"] label::before {
    content: "💾 ";
    margin-right: 12px;
    color: #7c0000;
    font-size: 18px;
}

[data-itemtype="remember_password"] input[type="checkbox"] {
    transform: scale(1.3);
    margin-right: 12px;
    accent-color: #7c0000;
    cursor: pointer;
}

/* ===== BOTONES PRINCIPALES ACTUALIZADOS ===== */

/* Botón ACEPTAR/LOGIN */
[data-itemtype="login_button"] .btn-primary::before {
    content: "🔑 ";
    margin-right: 12px;
    font-size: 18px;
    vertical-align: middle;
}

[data-itemtype="login_button"] .btn-primary {
    background: linear-gradient(135deg, #7c0000 0%, #a30000 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    padding: 18px 35px;
    border-radius: 12px;
    font-size: 17px;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(124, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: 25px 0 15px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

[data-itemtype="login_button"] .btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

[data-itemtype="login_button"] .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(124, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #a30000 0%, #7c0000 100%) !important;
}

[data-itemtype="login_button"] .btn-primary:hover::after {
    left: 100%;
}

[data-itemtype="login_button"] .btn-primary:active {
    transform: translateY(0);
    box-shadow: 
        0 3px 10px rgba(124, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Botón CONECTAR COMO INVITADO */
[data-itemtype="guest_login"] a::before {
    content: "👤 ";
    margin-right: 10px;
    font-size: 16px;
    vertical-align: middle;
}

[data-itemtype="guest_login"] a {
    color: #6c757d !important;
    text-decoration: none;
    font-weight: 500;
    padding: 14px 25px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: inline-block;
    background: #ffffff;
    font-size: 15px;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-itemtype="guest_login"] a:hover {
    background-color: #7c0000;
    color: white !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(124, 0, 0, 0.2);
    border-color: #7c0000;
}

/* ===== MENSAJES DE ALERTA MEJORADOS ===== */
[data-itemtype="login_message"] .alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 18px 22px;
    margin: 20px 0;
    font-weight: 500;
    border-left: 6px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 15px;
    line-height: 1.5;
    background: white;
}

[data-itemtype="login_message"] .alert-success {
    border-color: #d4edda;
    color: #155724 !important;
    border-left-color: #28a745;
}

[data-itemtype="login_message"] .alert-danger {
    border-color: #f8d7da;
    color: #721c24 !important;
    border-left-color: #dc3545;
}

[data-itemtype="login_message"] .alert-warning {
    border-color: #fff3cd;
    color: #856404 !important;
    border-left-color: #ffc107;
}

[data-itemtype="login_message"] .alert-info {
    border-color: #d1ecf1;
    color: #0c5460 !important;
    border-left-color: #17a2b8;
}

/* ===== ANIMACIONES Y EFECTOS MEJORADOS ===== */
.r-pretty-login-page > .r-controls {
    animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.r-pretty-login-page > .r-sideimage {
    animation: imageSlideIn 0.6s ease-out 0.1s both;
}

@keyframes imageSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(124, 0, 0, 0.3),
            0 1px 3px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 
            0 4px 18px rgba(124, 0, 0, 0.4),
            0 1px 3px rgba(0, 0, 0, 0.1);
    }
}

[data-itemtype="login_button"] .btn-primary {
    animation: pulse 3s infinite;
}

/* ===== RESPONSIVE DESIGN ACTUALIZADO ===== */
@media (max-width: 1200px) {
    .r-pretty-login-page > .r-controls {
        max-width: 450px;
        padding: 50px 40px;
    }
    
    .r-pretty-login-page > .r-sideimage {
        max-width: 550px;
        min-height: 550px;
    }
}

@media (max-width: 1024px) {
    .r-pretty-login-page {
        flex-direction: column;
        padding: 30px 20px;
    }
    
    .r-pretty-login-page > .r-controls,
    .r-pretty-login-page > .r-sideimage {
        margin: 15px 0;
        width: 100%;
        max-width: 500px;
    }
    
    .r-pretty-login-page > .r-controls {
        padding: 40px 35px;
    }
}

@media (max-width: 768px) {
    .r-pretty-login-page {
        padding: 20px 15px;
        background: #f8f9fa;
    }
    
    .r-pretty-login-page > .r-controls {
        padding: 35px 30px;
        margin: 10px 0;
        border-radius: 16px;
    }
    
    .r-pretty-login-page > .r-sideimage {
        min-height: 400px;
        border-radius: 16px;
    }
    
    [data-itemtype="login_button"] .btn-primary {
        padding: 16px 30px;
        font-size: 16px;
    }
    
    [data-itemtype="login_welcome"] {
        font-size: 22px;
        margin: 25px 0 35px;
    }
    
    [data-itemtype="login-logo"] {
        font-size: 26px;
    }
    
    .r-edit-field input[type="text"],
    .r-edit-field input[type="password"] {
        padding-left: 55px;
        background-position: 20px center;
    }
}

@media (max-width: 480px) {
    .r-pretty-login-page > .r-controls {
        padding: 30px 25px;
        border-radius: 14px;
    }
    
    .r-pretty-login-page > .r-sideimage {
        min-height: 350px;
        border-radius: 14px;
    }
    
    [data-itemtype="login_welcome"] {
        font-size: 20px;
        margin: 20px 0 30px;
        padding: 15px 0;
    }
    
    [data-itemtype="login-logo"] {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .r-edit-field input[type="text"],
    .r-edit-field input[type="password"] {
        padding: 14px 20px 14px 50px;
        font-size: 15px;
    }
    
    [data-itemtype="login_button"] .btn-primary {
        padding: 16px 25px;
        font-size: 16px;
    }
    
    [data-itemtype="guest_login"] a {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ===== MEJORAS ESPECÍFICAS PARA LA IMAGEN ===== */
.r-pretty-login-page > .r-sideimage::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgba(124, 0, 0, 0.08);
    border-radius: 16px;
    pointer-events: none;
    z-index: 1;
}

.r-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    z-index: 1;
    border-radius: 20px;
}

/* ===== EFECTO DE PARTÍCULAS DECORATIVAS SUAVES ===== */
.r-pretty-login-page::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 15% 70%, rgba(124, 0, 0, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(124, 0, 0, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}



/* ===== BOTÓN IMPRIMIR PEI ===== */

/* Estilo base del botón Imprimir PEI */
[data-itemtype="imprimir_pei"] .btn-default {
    background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%) !important;
    border: 2px solid #1e3a8a !important;
    color: white !important;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(44, 90, 160, 0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    position: relative;
    overflow: hidden;
}

/* Icono de impresión antes del texto */
[data-itemtype="imprimir_pei"] .btn-default::before {
    content: "🖨️ ";
    margin-right: 8px;
    font-size: 16px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Efecto hover mejorado */
[data-itemtype="imprimir_pei"] .btn-default:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #2c5aa0 100%) !important;
    border-color: #172554 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(44, 90, 160, 0.4);
    text-decoration: none;
}

/* Efecto de brillo al hacer hover */
[data-itemtype="imprimir_pei"] .btn-default:hover::before {
    transform: scale(1.2) rotate(-5deg);
}

/* Efecto activo/presionado */
[data-itemtype="imprimir_pei"] .btn-default:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(44, 90, 160, 0.3);
}

/* Efecto de carga/deshabilitado */
[data-itemtype="imprimir_pei"] .btn-default:disabled,
[data-itemtype="imprimir_pei"] .btn-default.loading {
    background: #94a3b8 !important;
    border-color: #64748b !important;
    color: #cbd5e1 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

[data-itemtype="imprimir_pei"] .btn-default.loading::before {
    content: "⏳ ";
    animation: spin 1s linear infinite;
}

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

/* Estado de foco para accesibilidad */
[data-itemtype="imprimir_pei"] .btn-default:focus {
    outline: 3px solid rgba(44, 90, 160, 0.5);
    outline-offset: 2px;
}

/* ===== VARIANTES ALTERNATIVAS DE COLOR ===== */

/* Variante Success (Verde) */
[data-itemtype="imprimir_pei"].success .btn-default {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: #047857 !important;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.3);
}

[data-itemtype="imprimir_pei"].success .btn-default:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    border-color: #065f46 !important;
    box-shadow: 0 5px 15px rgba(5, 150, 105, 0.4);
}

/* Variante Warning (Naranja) */
[data-itemtype="imprimir_pei"].warning .btn-default {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    border-color: #c2410c !important;
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.3);
}

[data-itemtype="imprimir_pei"].warning .btn-default:hover {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%) !important;
    border-color: #9a3412 !important;
    box-shadow: 0 5px 15px rgba(234, 88, 12, 0.4);
}

/* ===== ESTILOS PARA DIFERENTES TAMAÑOS ===== */

/* Botón pequeño */
[data-itemtype="imprimir_pei"].small .btn-default {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 30px;
}

[data-itemtype="imprimir_pei"].small .btn-default::before {
    font-size: 14px;
    margin-right: 6px;
}

/* Botón grande */
[data-itemtype="imprimir_pei"].large .btn-default {
    padding: 14px 28px;
    font-size: 16px;
    min-height: 48px;
    border-radius: 10px;
}

[data-itemtype="imprimir_pei"].large .btn-default::before {
    font-size: 18px;
    margin-right: 10px;
}

/* ===== ESTILOS PARA ESTADOS ESPECIALES ===== */

/* Botón outline/transparente */
[data-itemtype="imprimir_pei"].outline .btn-default {
    background: transparent !important;
    border: 2px solid #2c5aa0 !important;
    color: #2c5aa0 !important;
    box-shadow: none;
}

[data-itemtype="imprimir_pei"].outline .btn-default:hover {
    background: #2c5aa0 !important;
    color: white !important;
}

/* Botón con efecto de impresión animado */
[data-itemtype="imprimir_pei"].print-effect .btn-default::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

[data-itemtype="imprimir_pei"].print-effect .btn-default:hover::after {
    left: 100%;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    [data-itemtype="imprimir_pei"] .btn-default {
        padding: 8px 16px;
        font-size: 13px;
        min-height: 36px;
    }
    
    [data-itemtype="imprimir_pei"] .btn-default::before {
        font-size: 14px;
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    [data-itemtype="imprimir_pei"] .btn-default {
        width: 100%;
        justify-content: center;
        margin: 5px 0;
    }
}

/* ===== COMPATIBILIDAD CON MODO OSCURO ===== */
@media (prefers-color-scheme: dark) {
    [data-itemtype="imprimir_pei"] .btn-default {
        box-shadow: 0 3px 10px rgba(44, 90, 160, 0.5);
    }
    
    [data-itemtype="imprimir_pei"] .btn-default:hover {
        box-shadow: 0 5px 15px rgba(44, 90, 160, 0.6);
    }
}

/* ===== ANIMACIÓN DE PULSO PARA LLAMAR LA ATENCIÓN ===== */
[data-itemtype="imprimir_pei"].pulse .btn-default {
    animation: pulse-print 2s infinite;
}

@keyframes pulse-print {
    0%, 100% {
        box-shadow: 0 3px 10px rgba(44, 90, 160, 0.3);
    }
    50% {
        box-shadow: 0 3px 20px rgba(44, 90, 160, 0.6);
    }
}

/* ===== ESTILOS PARA GRUPOS DE BOTONES ===== */
/* Cuando el botón está dentro de un grupo de botones */
.btn-group [data-itemtype="imprimir_pei"] .btn-default {
    border-radius: 0;
    margin: 0;
}

.btn-group [data-itemtype="imprimir_pei"]:first-child .btn-default {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.btn-group [data-itemtype="imprimir_pei"]:last-child .btn-default {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}


/* Semáforo para porcentaje de avance */
.porcentaje-semaforo {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    min-width: 60px;
}

/* 0% - 59%: ROJO */
.porcentaje-semaforo.rojo {
    background-color: #ff4d4d;
    color: white;
    border: 1px solid #cc0000;
}

/* 60% - 79%: AMARILLO */
.porcentaje-semaforo.amarillo {
    background-color: #ffeb3b;
    color: #333;
    border: 1px solid #ffc107;
}

/* 80% - 100%: VERDE */
.porcentaje-semaforo.verde {
    background-color: #4caf50;
    color: white;
    border: 1px solid #2e7d32;
}

/* Estilos para la celda de la tabla */
td[data-field="porcentaje_avance"] .porcentaje-semaforo {
    width: 80px;
    margin: 0 auto;
}

/* Para el formulario de edición/visualización */
.form-porcentaje-semaforo {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    min-width: 80px;
    margin: 5px 0;
}