/* =====================================================
   ESTILOS GENERALES — Sistema Identidad SNPP
   Incluye: tablas, paneles, botones, formularios popup
   ===================================================== */

:root {
    --violeta:        #580e4c;
    --violeta-oscuro: #3d0935;
    --violeta-medio:  #7a1469;
    --violeta-suave:  #f5eaf3;
    --violeta-claro:  #ead0e6;
    --dorado:         #c9922a;
    --dorado-claro:   #f9ca6a;
    --gris-fondo:     #f6f3f6;
    --texto:          #2d1a2b;
    --texto-suave:    #7a6878;
    --borde:          #e0d4de;
    --success:        #1a7a4a;
    --danger:         #b83232;
}

/* ── TABLA ── */
.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: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 2px solid #fff;
}
.table td {
    background-color: #f7f7f7;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.table tr:nth-child(even) { background-color: #f2f2f2; }
.table tr:hover { background-color: #e5e5e5; cursor: pointer; }

/* ── PANELES ── */
.panel-info, .panel-default {
    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 {
    color: #ffffff;
    background-color: #ab0000;
    border-color: #ab0000;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border-bottom: 2px solid #fff;
}
.panel-info > .panel-body,
.panel-default > .panel-body {
    background-color: #f7f7f7;
    padding: 15px;
}
.panel-body .row {
    padding: 8px 0;
    margin: 0 -15px;
    border-bottom: 1px solid #ddd;
}
.panel-body .row:last-child { border-bottom: none; }
.panel-body .row:nth-child(even) { background-color: #f2f2f2; }
.panel-body .row:hover { background-color: #e5e5e5; cursor: pointer; }
.panel-body h4 { color: #ab0000; margin-top: 0; font-size: 15px; }
.panel-body p { margin: 5px 0; line-height: 1.4; font-size: 14px; }


/* =====================================================
   FORMULARIO POPUP / MODAL — detalle_exa_add / edit
   PHPRunner abre estos formularios en un modal propio,
   por lo que los estilos deben vivir en el CSS global.
   ===================================================== */

/* ── MODAL CONTAINER (Bootstrap modal que usa PHPRunner) ── */
.modal-content {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(61,9,53,0.25) !important;
}

/* ── HEADER DEL MODAL ── */
.modal-header {
    background: linear-gradient(135deg, var(--violeta-oscuro), var(--violeta)) !important;
    border-bottom: none !important;
    padding: 18px 24px !important;
    border-radius: 14px 14px 0 0 !important;
}
.modal-header .modal-title,
.modal-header h4,
.modal-header h3 {
    color: white !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.modal-header .modal-title::before {
    content: '\f15c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--dorado-claro);
    font-size: 15px;
}
.modal-header .close {
    color: rgba(255,255,255,0.8) !important;
    opacity: 1 !important;
    font-size: 22px !important;
    text-shadow: none !important;
    transition: color 0.2s !important;
}
.modal-header .close:hover { color: white !important; }

/* ── BODY DEL MODAL ── */
.modal-body {
    padding: 0 !important;
    background: #fafafa !important;
}

/* ── FOOTER DEL MODAL ── */
.modal-footer {
    background: var(--violeta-suave) !important;
    border-top: 2px solid var(--violeta-claro) !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* ── PANEL DE SECCIÓN DENTRO DEL POPUP ── */
.r-small-page .panel.form-section,
.modal-body .panel.form-section,
.modal-body .panel.panel-default,
.r-small-page .panel.panel-default,
.panel.form-section {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Panel heading — franja con borde violeta superior */
.r-small-page .panel.form-section > .panel-heading,
.modal-body .panel.form-section > .panel-heading,
.r-small-page .panel.panel-default > .panel-heading,
.modal-body .panel.panel-default > .panel-heading,
.panel.form-section > .panel-heading {
    background: linear-gradient(90deg, var(--violeta-suave), #f9f0f7) !important;
    border-top: 3px solid var(--violeta) !important;
    border-bottom: 2px solid var(--violeta-claro) !important;
    color: var(--violeta) !important;
    padding: 12px 22px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;
    cursor: pointer !important;
}

.panel.form-section > .panel-heading .panel-title,
.panel.form-section > .panel-heading .panel-title a,
.r-small-page .panel.form-section > .panel-heading .panel-title,
.modal-body .panel.form-section > .panel-heading .panel-title,
.modal-body .panel.panel-default > .panel-heading .panel-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--violeta) !important;
    text-decoration: none !important;
}

/* Panel body */
.r-small-page .panel.form-section > .panel-body,
.modal-body .panel.form-section > .panel-body,
.r-small-page .panel.panel-default > .panel-body,
.modal-body .panel.panel-default > .panel-body,
.panel.form-section > .panel-body {
    background: white !important;
    padding: 20px 22px 16px !important;
}

/* Ocultar el h2 del add_header dentro del popup
   (PHPRunner ya muestra el título en la barra del modal) */
h2[data-itemtype="add_header"] {
    display: none !important;
}

/* =====================================================
   FIX LAYOUT HORIZONTAL → VERTICAL (popup PHPRunner)
   PHPRunner usa .r-horizontal-field.form-horizontal que
   divide label / campo / tooltip en columnas Bootstrap.
   Forzamos layout de bloque completo en todo contexto.
   ===================================================== */

/* Convertir el form-group en bloque vertical */
.r-integrated-field.form-group,
.r-horizontal-field.form-group,
.form-horizontal .r-integrated-field.form-group {
    display: block !important;
    margin-bottom: 16px !important;
    padding: 14px 16px !important;
    background: #fdfbfc !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--borde) !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}

.r-integrated-field.form-group:hover,
.r-horizontal-field.form-group:hover {
    border-color: var(--violeta-claro) !important;
    background: var(--violeta-suave) !important;
}

.r-integrated-field.form-group:focus-within,
.r-horizontal-field.form-group:focus-within {
    border-color: var(--violeta) !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(88,14,76,0.08) !important;
}

/* ── LABELS — anular columna Bootstrap, hacer bloque ── */
.r-integrated-field .r-edit-label.control-label,
.r-horizontal-field .r-edit-label.control-label,
.form-horizontal .r-edit-label.control-label,
.r-edit-label.control-label {
    display: block !important;
    float: none !important;          /* cancela float de form-horizontal */
    width: auto !important;          /* cancela col-sm-X de Bootstrap     */
    text-align: left !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--texto) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 7px !important;
    padding: 0 !important;
}

/* ── CAMPO — anular columna Bootstrap ── */
.r-integrated-field .r-edit-field,
.r-horizontal-field .r-edit-field,
.form-horizontal .r-edit-field {
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── TOOLTIP — convertirlo en ayuda bajo el campo ── */
.r-integrated-field .r-edit-tooltip,
.r-horizontal-field .r-edit-tooltip,
.form-horizontal .r-edit-tooltip {
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 6px !important;
}
.r-edit-tooltip .text-muted,
.r-integrated-field .text-muted {
    font-size: 12px !important;
    color: var(--texto-suave) !important;
    font-style: italic !important;
    line-height: 1.4 !important;
    display: block !important;
    padding: 5px 10px !important;
    background: rgba(88,14,76,0.04) !important;
    border-left: 3px solid var(--violeta-claro) !important;
    border-radius: 0 6px 6px 0 !important;
    margin: 0 !important;
}
/* Ocultar tooltip si está vacío */
.r-edit-tooltip .text-muted:empty { display: none !important; }

/* Asterisco requerido */
.icon-required::after {
    content: ' *' !important;
    color: var(--danger) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
}

/* ── CONTROLES (inputs, select, textarea) ── */
.r-edit-field .form-control,
.r-edit-field input[type="text"],
.r-edit-field input[type="number"],
.r-edit-field input[type="date"],
.r-edit-field input[type="email"],
.r-edit-field select,
.r-edit-field textarea {
    border: 1.5px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    height: 38px !important;
    padding: 7px 12px !important;
    width: 100% !important;
    color: var(--texto) !important;
    background: white !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    display: block !important;
}
.r-edit-field textarea {
    height: auto !important;
    min-height: 80px !important;
    resize: vertical !important;
}
.r-edit-field .form-control:focus,
.r-edit-field input:focus,
.r-edit-field select:focus,
.r-edit-field textarea:focus {
    border-color: var(--violeta) !important;
    box-shadow: 0 0 0 3px rgba(88,14,76,0.10) !important;
    outline: none !important;
}

/* ── SELECTORES DE FECHA (día/mes/año) ── */
/* PHPRunner renderiza 3 <select> + botón calendario en línea */
.r-edit-field .rnr-date-wrap,
.r-edit-field [class*="date"] {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}
.r-edit-field select.rnr-date-part,
.r-edit-field .rnr-datepicker select,
.r-edit-field select[name*="day"],
.r-edit-field select[name*="month"],
.r-edit-field select[name*="year"] {
    height: 38px !important;
    border-radius: 8px !important;
    border: 1.5px solid #ddd !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    width: auto !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Botón calendario */
.r-edit-field .btn.btn-default,
.r-edit-field button[data-toggle="datepicker"],
.r-edit-field .input-group-btn .btn,
.r-edit-field .rnr-cal-btn {
    background: var(--violeta-suave) !important;
    border: 1.5px solid var(--violeta-claro) !important;
    border-radius: 8px !important;
    color: var(--violeta) !important;
    height: 38px !important;
    width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
}
.r-edit-field .btn.btn-default:hover {
    background: var(--violeta-claro) !important;
    border-color: var(--violeta) !important;
}

/* ── BARRA BOTONES — dentro del popup (r-form below-grid) ── */
.r-small-page .r-form[data-location="below-grid"],
.modal-footer {
    background: var(--violeta-suave) !important;
    border-top: 2px solid var(--violeta-claro) !important;
    padding: 16px 24px !important;
    text-align: center !important;
}
.r-small-page .r-form[data-location="below-grid"] .col-md-12 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Botón Guardar */
.r-small-page [data-itemtype="add_save"] a,
.modal-body [data-itemtype="add_save"] a,
[data-itemtype="add_save"] a,
.r-small-page .btn-primary,
.modal-body .btn.btn-primary,
.modal-footer .btn.btn-primary {
    background: linear-gradient(135deg, var(--violeta-oscuro), var(--violeta)) !important;
    border: none !important;
    border-radius: 999px !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(88,14,76,0.40) !important;
    transition: all 0.25s !important;
    min-width: 130px !important;
    justify-content: center !important;
}
.r-small-page [data-itemtype="add_save"] a:hover,
.modal-body [data-itemtype="add_save"] a:hover,
.modal-footer .btn.btn-primary:hover {
    background: linear-gradient(135deg, #2e0520, var(--violeta-oscuro)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(88,14,76,0.50) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Botones secundarios (Reiniciar / Volver / Cancelar) */
.r-small-page [data-itemtype="add_reset"] a,
.r-small-page [data-itemtype="add_back_list"] a,
.r-small-page [data-itemtype="add_cancel"] a,
.modal-body [data-itemtype="add_reset"] a,
.modal-body [data-itemtype="add_back_list"] a,
.modal-body [data-itemtype="add_cancel"] a,
[data-itemtype="add_reset"] a,
[data-itemtype="add_back_list"] a,
[data-itemtype="add_cancel"] a,
.r-small-page .btn-default,
.modal-footer .btn.btn-default {
    background: white !important;
    border: 2px solid var(--borde) !important;
    border-radius: 999px !important;
    color: var(--texto) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.22s !important;
    min-width: 110px !important;
    justify-content: center !important;
}
.r-small-page [data-itemtype="add_reset"] a:hover,
.r-small-page [data-itemtype="add_back_list"] a:hover,
.r-small-page [data-itemtype="add_cancel"] a:hover,
.modal-footer .btn.btn-default:hover {
    border-color: var(--violeta) !important;
    color: var(--violeta) !important;
    background: var(--violeta-suave) !important;
    text-decoration: none !important;
}


/* =====================================================
   BOTONES CUSTOM GRID (Registrar / Ver / Baja)
   ===================================================== */

.rnr-gridtable [data-itemtype^="custom_button"] a,
.rnr-gridtable [data-itemtype="Registrar_Asistencia1"] a,
.rnr-gridtable [data-itemtype="ver_asistencia"] a,
.rnr-gridtable [data-itemtype="baja_alumnos"] a,
.rnr-gridtable a#Registrar_Asistencia1,
.rnr-gridtable a#ver_asistencia,
.rnr-gridtable a#baja_alumnos,
.rnr-gridtable [data-itemid="custom_button"] a,
.rnr-gridtable [data-itemid="custom_button1"] a,
.rnr-gridtable [data-itemid="custom_button2"] a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
    cursor: pointer !important;
    transition: all 0.23s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-width: 115px !important;
    line-height: 1.1 !important;
}
.rnr-gridtable [data-itemtype^="custom_button"] a:hover,
.rnr-gridtable a#Registrar_Asistencia1:hover,
.rnr-gridtable a#ver_asistencia:hover,
.rnr-gridtable a#baja_alumnos:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
}
.rnr-gridtable [data-itemtype^="custom_button"] a .ab-ico,
.rnr-gridtable a#Registrar_Asistencia1 .ab-ico,
.rnr-gridtable a#ver_asistencia .ab-ico,
.rnr-gridtable a#baja_alumnos .ab-ico {
    width: 22px !important; height: 22px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.35) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 11px !important;
}

.rnr-gridtable a#Registrar_Asistencia1,
.rnr-gridtable [data-itemtype="Registrar_Asistencia1"] a {
    background: linear-gradient(135deg, #1565c0, #1e88e5) !important;
    color: white !important; border: 1px solid #1e88e5 !important;
}
.rnr-gridtable a#Registrar_Asistencia1:hover,
.rnr-gridtable [data-itemtype="Registrar_Asistencia1"] a:hover {
    background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
}

.rnr-gridtable a#ver_asistencia,
.rnr-gridtable [data-itemtype="ver_asistencia"] a {
    background: linear-gradient(135deg, #00897b, #26a69a) !important;
    color: white !important; border: 1px solid #26a69a !important;
}
.rnr-gridtable a#ver_asistencia:hover,
.rnr-gridtable [data-itemtype="ver_asistencia"] a:hover {
    background: linear-gradient(135deg, #00695c, #00897b) !important;
}

.rnr-gridtable a#baja_alumnos,
.rnr-gridtable [data-itemtype="baja_alumnos"] a {
    background: linear-gradient(135deg, #c62828, #ef5350) !important;
    color: white !important; border: 1px solid #ef5350 !important;
}
.rnr-gridtable a#baja_alumnos:hover,
.rnr-gridtable [data-itemtype="baja_alumnos"] a:hover {
    background: linear-gradient(135deg, #b71c1c, #c62828) !important;
}

.rnr-gridtable [data-itemtype^="custom_button"] .btn,
.rnr-gridtable [data-itemtype^="custom_button"] .btn-info,
.rnr-gridtable [data-itemtype^="custom_button"] .btn-default,
.rnr-gridtable .btn-info.action-btn {
    border-radius: 9999px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    background: inherit !important;
    border: none !important;
}

/* ── BADGE EXAMEN ── */
.badge.detalle_exa_badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #c9922a, #e6b74e) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.25s !important;
    box-shadow: 0 3px 10px rgba(201,146,42,0.4) !important;
    min-width: 115px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}
.badge.detalle_exa_badge:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 8px 22px rgba(201,146,42,0.6) !important;
    text-decoration: none !important;
}
.badge.detalle_exa_badge .exa-icon {
    width: 22px !important; height: 22px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.30) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 11px !important; flex-shrink: 0 !important;
}
.exa-count {
    background: rgba(255,255,255,0.35) !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-size: 11px !important; font-weight: 800 !important;
    min-width: 22px !important; text-align: center !important;
    color: white !important;
}

/* ── BOTÓN AÑADIR ── */
.btn-pill.btn-add, a.btn-add {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px 18px !important; border-radius: 999px !important;
    font-size: 12.5px !important; font-weight: 700 !important;
    background: linear-gradient(135deg, #2e7d32, #43a047) !important;
    color: white !important; border: none !important;
    box-shadow: 0 3px 10px rgba(46,125,50,0.4) !important;
    transition: all 0.25s !important; text-decoration: none !important;
    min-width: 140px !important; justify-content: center !important;
}
.btn-pill.btn-add:hover, a.btn-add:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(46,125,50,0.6) !important;
}

/* ── BOTÓN EDITAR ── */
a.btn-edit, .btn-pill.btn-edit,
[data-itemtype="grid_edit"] a,
a[href*="detalle_exa_edit.php"] {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px 16px !important; border-radius: 999px !important;
    font-size: 12.5px !important; font-weight: 700 !important;
    background: linear-gradient(135deg, #f57c00, #fb8c00) !important;
    color: white !important; border: none !important;
    box-shadow: 0 3px 10px rgba(245,124,0,0.4) !important;
    transition: all 0.25s !important; text-decoration: none !important;
    min-width: 100px !important; justify-content: center !important;
}
a.btn-edit:hover, .btn-pill.btn-edit:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(245,124,0,0.6) !important;
}

/* ── CENTRADO CELDAS ── */
.rnr-gridtable tbody td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* ── BADGE EXAMEN ── */
.badge.detalle_exats_badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #c9922a, #e6b74e) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.25s !important;
    box-shadow: 0 3px 10px rgba(201,146,42,0.4) !important;
    min-width: 115px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}
.badge.detalle_exats_badge:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 8px 22px rgba(201,146,42,0.6) !important;
    text-decoration: none !important;
}
.badge.detalle_exats_badge .exa-icon {
    width: 22px !important; height: 22px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.30) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 11px !important; flex-shrink: 0 !important;
}
.exa-count {
    background: rgba(255,255,255,0.35) !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-size: 11px !important; font-weight: 800 !important;
    min-width: 22px !important; text-align: center !important;
    color: white !important;
}

/* =====================================================
   BOTÓN CUSTOM — Imprimir Ficha (instructor_list)
   ===================================================== */
[data-itemtype="Imprimir_Ficha"] a,
[data-itemid="Imprimir_Ficha"] a,
a#Imprimir_Ficha {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.23s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-width: 115px !important;
    line-height: 1.1 !important;

    /* Color: violeta SNPP */
    background: linear-gradient(135deg, #3d0935, #580e4c) !important;
    color: white !important;
    border: 1px solid #580e4c !important;
    box-shadow: 0 3px 10px rgba(88,14,76,0.38) !important;
}

[data-itemtype="Imprimir_Ficha"] a:hover,
[data-itemid="Imprimir_Ficha"] a:hover,
a#Imprimir_Ficha:hover {
    background: linear-gradient(135deg, #2c0620, #3d0935) !important;
    color: white !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(88,14,76,0.52) !important;
    text-decoration: none !important;
}

[data-itemtype="Imprimir_Ficha"] a:active,
a#Imprimir_Ficha:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(88,14,76,0.35) !important;
}

/* Ícono FA dentro del botón */
[data-itemtype="Imprimir_Ficha"] a i,
[data-itemid="Imprimir_Ficha"] a i,
a#Imprimir_Ficha i {
    font-size: 13px !important;
    transition: transform 0.2s !important;
}

[data-itemtype="Imprimir_Ficha"] a:hover i,
a#Imprimir_Ficha:hover i {
    transform: scale(1.2) rotate(-8deg) !important;
}