.fl-container {
     max-width: 480px;
     margin: 40px auto;
     padding: 25px;
     background: #fafafa;
     border-radius: 12px;
     border-color: #bfbfbf;
     border-width: 1px;
     border-style: solid;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     text-align: center;
 }

 .fl-container h2 {
     color: #0073aa;
     margin-bottom: 18px;
     font-size: 22px;
 }

 .fl-title-small {
     font-size: 18px;
     color: #000;
     letter-spacing: 1px;
     font-weight: bold;
     margin-bottom: 0px;
 }

 .fl-title-name {
     font-size: 22px;
     color: #0073aa;
     font-weight: bolder;
     margin-top: 0;
 }

 .fl-container input {
     width: 100%;
     padding: 12px;
     margin: 10px 0 20px 0;
     border-radius: 6px;
     font-size: 16px;
 }

.fl-container .fl-input-wrapper input{
    border: 1px solid #bfbfbf;
    outline: none;
}


 .fl-container .fl-input-wrapper input:focus {
    border: 1px solid #898989;
    outline: none;
}



 .fl2-btn {
     background: #0073aa;
     color: #fff;
     padding: 10px 20px 9px 20px;
     border-radius: 6px;
     font-size: 18px;
     cursor: pointer;
     border: none;
     transition: 0.15s;
     font-weight: bolder;
     letter-spacing: 1px;
 }

 .fl2-btn:hover {
     background: #005f8a;
 }

 .fl2-btn:hover,
 .fl2-btn:focus,
 .fl2-btn:active {
     color: #ffffff !important;
     text-decoration: none;
 }

 a.fl2-btn {
     padding: 12px 20px 10px 20px;
     line-height: 1;
 }

 .fl-btn {
     background: #ffffff00;
     color: #0073aa;
     padding: 10px 20px;
     border-radius: 6px;
     font-size: 18px;
     cursor: pointer;
     border: none;
     transition: 0.15s;
     font-weight: bolder;
     letter-spacing: 1px;
 }

 .fl-btn:hover {
     background: #005f8a;
     color: #ffffff;
 }



 .fl-table-container {
     max-width: 960px !important;
     margin: 20px auto;
     overflow-x: auto;
 }

 .summary {
     max-width: 960px !important;
     margin: 18px auto;
     padding: 12px;
     border-radius: 8px;
     background: #fafafa;
     border: 1px solid #eee;
     font-size: 15px;
 }

 table.fl-table {
     width: 100%;
     border-collapse: collapse;
     min-width: 500px;
     font-size: 15px;
     text-align: center;
 }

 table.fl-table th {
     background: #5c5c5c;
     color: #fff;
     padding: 10px;
     position: sticky;
     top: 0;
     z-index: 2;
 }

 table.fl-table td {
     padding: 8px;
     border-bottom: 1px solid #eee;
     color: #000;
 }

 table.fl-table tr:nth-child(even) {
     background: #f8f8f8;
 }

 .small {
     font-size: 13px;
     color: #666;
 }

 @media(max-width:700px) {
     table.fl-table {
         font-size: 13px;
         min-width: 420px;
     }

     .fl-container {
         padding: 18px;
     }
 }



 .fl2-btn {
     background: #0073aa;
     color: #fff !important;
     padding: 10px 20px;
     border-radius: 6px;
     font-size: 18px;
     cursor: pointer;
     border: none;
     transition: 0.15s;
     font-weight: bolder;
     letter-spacing: 1px;
     display: inline-block;
 }

 .fl2-btn:hover {
     background: #005f8a;
     color: #fff !important;
 }

 /* SOLO BACKEND — aumentar espacio entre título y nombre del empleado */
 body.wp-admin .fl-title-name {
     margin-top: 14px !important;
     margin-bottom: 16px !important;
     display: block;
 }


 /* SOLO BACKEND — igualar anchura visual de resumenes y tablas */
 body.wp-admin .summary {
     padding-left: 0px !important;
     padding-right: 0px !important;


 }

 /* Evitar salto de línea en backend para los totales */
 body.wp-admin .summary {
     padding-top: 6px !important;
     padding-bottom: 6px !important;
 }



 /* Dar padding interno SIN forzar block */
 body.wp-admin .summary>* {
     padding-left: 18px !important;
     padding-right: 18px !important;
 }



 /* SOLO BACKEND — más padding interno en el selector de empleado */
 body.wp-admin select[name="rbn_admin_employee"] {
     padding-left: 14px !important;
 }


 /* Negrita total en alertas SOLO en backend */
 body.wp-admin .fl-alert,
 body.wp-admin .fl-alert * {
     font-weight: bold !important;
     font-size: 16px !important;
 }



 /* ================================
 * SOLO BACKEND — mejorar legibilidad en móvil
 * ================================ */

 /* Más aire entre líneas en resúmenes */
 body.wp-admin .summary {
     line-height: 1.6 !important;
 }

 /* Separación vertical entre bloques de texto */
 body.wp-admin .summary>div,
 body.wp-admin .summary>strong,
 body.wp-admin .summary>span {
     display: block;
     margin-bottom: 6px;
 }

 /* Ajuste específico para móviles */
 @media (max-width: 782px) {
     body.wp-admin .summary {
         line-height: 1.8 !important;
         font-size: 15px;
     }
 }


 /* =====================================
 * BACKEND — strong inline en resúmenes
 * ===================================== */

 body.wp-admin .summary strong {
     display: inline !important;
     white-space: nowrap;
 }



 /* ============================
   TABS — DÍA / SEM / MES / AÑO
=============================== */

 /* CONTENEDOR FLEX */

 .rbn-tabs form {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 18px;
     flex-wrap: nowrap;
     width: 100%;
 }

 /* BOTONES BASE */
 .rbn-tabs .fl2-btn {
     background: #0073aa !important;
     color: #fff !important;
     padding: 8px 16px 6px 16px !important;
     font-size: 18px !important;
     font-weight: bold !important;
     letter-spacing: 1px !important;
     border-radius: 6px !important;
     border: none !important;
     cursor: pointer !important;
     white-space: nowrap !important;
     transition: .15s ease-in-out !important;
     text-transform: uppercase !important;
     min-width: 75px !important;
     max-width: 75px !important;
 }


 /* HOVER */
 .rbn-tabs .fl2-btn:hover {
     background: #005f8a !important;
 }

 /* ACTIVO */
 .rbn-tabs .fl2-btn.active-tab {
     background: black !important;
     color: white !important;
 }

 /* RESPONSIVE MOVIL */
 @media(max-width:700px) {
     .rbn-tabs form {
         gap: 10px;
     }

     .rbn-tabs .fl2-btn {
         padding: 6px 10px !important;
         font-size: 15px !important;
         min-width: 60px !important;
         max-width: 60px !important;
     }
 }




 /* FLECHAS DEL SELECTOR DE FECHAS INACTIVAS - DIA NO SELECCIONABLE */
 .fl-btn-disabled {
     pointer-events: none;
     background: transparent !important;
     color: #000 !important;
     opacity: 0.35 !important;
     cursor: default !important;
 }

 .fl-btn-disabled:hover {
     background: transparent !important;
     color: #000 !important;
     opacity: 0.35 !important;
 }



 /* ICONOS EN LOGIN DE INFORMES */

 .fl-input-wrapper {
     position: relative;
     width: 100%;
 }

 .fl-input-wrapper input {
     width: 100%;
     padding-left: 48px !important;
     box-sizing: border-box;
 }

 .fl-input-icon {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-50%);
     width: 22px;
     height: 22px;
     pointer-events: none;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .fl-input-icon svg {
     width: 20px;
     height: 20px;
     fill: #000;
     transform: translateY(-6px);
 }




 /* ESPACIO ENTRE TABS Y SELECTOR DE FECHAS */
 .rbn-tabs {
     margin-bottom: 30px !important;
 }


 /* ================================
   Selector día estilo texto
   ================================ */

 .rbn-day-picker {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background: transparent;
     border: none;
     box-shadow: none;
     padding: 0;
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     line-height: 1.4;
     color: #1e1e1e;
     text-align: center;
     cursor: pointer;
 }

 /* eliminar borde al foco */
 .rbn-day-picker:focus {
     outline: none;
     box-shadow: none;
 }

 /* icono calendario (Chrome / Edge) */
 .rbn-day-picker::-webkit-calendar-picker-indicator {
     opacity: 0.4;
     cursor: pointer;
     filter: grayscale(100%);
 }

 /* Firefox */
 .rbn-day-picker::-moz-focus-inner {
     border: 0;
 }

 /* Hover sutil */
 .rbn-day-picker:hover {
     color: #0073aa;
 }

 .rbn-date-wrapper {
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     padding: 2px 4px;
 }

 .rbn-date-text {
     pointer-events: none;
     /* deja pasar el click */
 }


 /* Fecha principal (selector camuflado) */
 .rbn-date-click {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.4;
     color: #1e1e1e;
     cursor: pointer;
 }

 /* Input invisible pero activo */
 .rbn-date-click input[type="date"] {
     position: absolute;
     inset: 0;
     opacity: 0;
     cursor: pointer;
     width: 100%;
     height: 100%;
 }

 /* Eliminar cualquier estilo visual del input */
 .rbn-day-picker {
     background: transparent;
     border: none;
     box-shadow: none;
     padding: 0;
     margin: 0;
 }

 .rbn-day-picker:focus {
     outline: none;
 }



 /* ======================================
 * Selector calendario — ICONO SVG UNIFICADO
 * ====================================== */

 .rbn-date-click {
     position: relative;
     width: 24px;
     height: 24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transform: translateY(-2px);
 }


 /* Input real: invisible pero clicable */
 .rbn-day-picker {
     position: absolute;
     inset: 0;
     opacity: 0;
     cursor: pointer;
     z-index: 2;
     padding: 0 !important;
     margin: 0 !important;
     box-sizing: border-box;
 }

 /* Icono visible */
 .rbn-date-click::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: url("/wp-content/uploads/2025/12/calendar-ico.svg");
     background-repeat: no-repeat;
     background-position: center;
     background-size: 18px 18px;
     background-color: #f5f5f500;
     color: #000;
     pointer-events: none;
 }

 /* Agrupa fecha + calendario para ignorar el gap del form */
 .rbn-day-group {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     /* separación pequeña entre fecha e icono */
 }

 /* Texto de la fecha */
 .rbn-day-label {
     white-space: nowrap;
 }



 /* ===============================
 * MODAL EXPORT CSV
 * =============================== */

 .rbn-modal {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     z-index: 9999;
     align-items: center;
     justify-content: center;
 }

 .rbn-modal-content {
     background: #fff;
     padding: 20px;
     border-radius: 6px;
     width: 92%;
     max-width: 420px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
 }

 .rbn-modal-content h3 {
     margin-top: 10px;
     margin-bottom: 20px;
     text-align: center;
     font-size: 18px !important;
     line-height: 26px !important;
 }

 @media (max-width: 700px) {
     .rbn-modal-content h3 {
         font-size: 16px;
         line-height: 24px;
     }
 }

 .rbn-modal-fields {
     display: flex;
     gap: 12px;
     margin-bottom: 16px;
 }

 .rbn-modal-fields label {
     flex: 1;
     font-size: 13px;
 }

 .rbn-modal-fields input[type="date"] {
     width: 100%;
     margin-top: 4px;
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 4px;
     background: #fff;
     color: #000;
 }

 .rbn-modal-actions {
     display: flex;
     justify-content: space-between;
     margin-top: 20px;
     margin-bottom: 10px;
     gap: 10px;
 }

 @media (max-width: 500px) {
     .rbn-modal-fields {
         flex-direction: column;
     }
 }



 /* ==========================================================
   BOTONES EXPORTAR CSV (ACCIÓN SECUNDARIA)
   ========================================================== */

 .rbn-export-actions {
     display: flex;
     justify-content: center;
     gap: 32px;
     margin-top: 80px;
     margin-bottom: 12px;
     flex-wrap: wrap;
 }

 .rbn-export-btn {
     width: 160px;
     min-height: 42px;
     padding: 8px 0px 6px 0px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     font-weight: 400;
     line-height: 17px !important;
     text-align: center;
     white-space: normal;
     background: #fafafa;
     color: #0c0c0c;
     border: 1px solid #0c0c0c;
     border-radius: 6px;
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease;
 }

 .rbn-export-btn:hover {
     background: #F2F3F5;
 }


 @media (max-width: 800px) {

     .rbn-export-actions {
         gap: 40px;
         margin-top: 80px;
     }

     .rbn-export-btn {
         width: 36%;
         min-height: 40px;
         font-size: 12px;
     }
 }




 /* Vacaciones admin — mes en mayúsculas */
 .rbn-vacations-month,
 .rbn-vacations-month h3,
 .wrap h3 {
     text-transform: uppercase;
 }



 /* Cabecera del calendario centrada */
 .rbn-vacations-calendar th {
     text-align: center !important;
 }


 /* Rangos de vacaciones en negrita */
 .rbn-vacations-ranges td:first-child,
 .rbn-vacations-ranges td:nth-child(2) {
     font-weight: 700;
 }



 /* Navegación meses vacaciones */
 .rbn-vac-nav {
     display: flex;
     gap: 12px;
     max-width: 700px;
     margin: 10px 0px 20px 0px;
     /* centrado exacto */
 }

 .rbn-vac-nav form {
     flex: 1;
 }

 .rbn-vac-nav-btn {
     width: 100%;
     box-sizing: border-box;
     text-align: center;
 }


 /* Formulario marcar vacaciones */
 .rbn-vac-form {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     align-items: flex-end;
 }

 .rbn-vac-field {
     display: flex;
     flex-direction: column;
 }

 /* Escritorio: en una sola línea */
 @media (min-width: 768px) {
     .rbn-vac-field {
         flex: 0 0 auto;
     }
 }

 /* Móvil: cada campo en su línea */
 @media (max-width: 767px) {
     .rbn-vac-field {
         width: 100%;
     }

     .rbn-vac-field input {
         width: 100%;
     }
 }



 /* Alertas vacaciones admin */
 .rbn-vac-alert {
     max-width: 700px;
     margin: 10px 0 20px 0;
     padding: 14px 16px;
     border-radius: 6px;
     font-size: 15px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .rbn-vac-alert::before {
     font-size: 18px;
 }

 .rbn-vac-alert-error {
     background: #ffecec;
     color: #8a1f11;
     border-left: 5px solid #d63638;
 }

 .rbn-vac-alert-error::before {
     content: "⚠";
 }

 .rbn-vac-alert-success {
     background: #ecf9f1;
     color: #0a5d2a;
     border-left: 5px solid #00a32a;
 }

 .rbn-vac-alert-success::before {
     content: "✓";
 }



 /* Resumen anual de vacaciones */
 .rbn-vac-year-summary {
     max-width: 700px;
     margin-top: 15px;
     font-size: 14.5px;
     /* un poco más grande */
     line-height: 1.4;
 }

 .rbn-vac-year-summary div {
     font-weight: 600;
 }



 /* ===============================
   VACACIONES – FRONTEND
   =============================== */

 /* Contenedor general */
 .rbn-vac-calendar-wrapper {
     max-width: 700px;
     margin: 0 auto;
     text-align: center;
 }

 /* ---------- CALENDARIO ---------- */

 .rbn-vac-calendar {
     border-collapse: collapse;
     margin: 0 auto 25px auto;
     font-size: 15px;
 }

 .rbn-vac-calendar td {
     width: 38px;
     height: 38px;
     text-align: center;
     vertical-align: middle;
     border-radius: 6px;
     font-weight: 500;
 }

 .rbn-vac-calendar td:not(:empty) {
     cursor: default;
 }



 /* Día con vacaciones */
 .rbn-vac-calendar td[style*="background"] {
     background: #b7f5c3 !important;
     font-weight: 700;
     color: #1f6b2c;
 }

 /* ---------- TÍTULOS ---------- */

 .rbn-vac-title {
     font-size: 15px;
     font-weight: 700;
     margin: 30px 0 15px;
     text-align: center;
 }

 /* ---------- TABLA DE RANGOS ---------- */

 .rbn-vac-ranges {
     border-collapse: collapse;
     width: 100%;
     max-width: 500px;
     margin: 0 auto 20px auto;
     font-size: 15px;
 }

 .rbn-vac-ranges th {
     background: #f6f7f7;
     padding: 10px;
     text-align: center;
     font-weight: 600;
     border-bottom: 1px solid #ddd;
 }

 .rbn-vac-ranges td {
     padding: 8px;
     text-align: center;
     border-bottom: 1px solid #eee;
 }

 /* ---------- RESUMEN ANUAL ---------- */

 .rbn-vac-summary {
     margin-top: 20px;
     font-size: 15px;
     color: #333;
 }

 .rbn-vac-summary div {
     margin-bottom: 4px;
     font-weight: 600;
 }




 /* css calendario frontend */
 .rbn-vac-calendar th,
 .rbn-vac-calendar td {
     text-align: center;
     width: 38px;
     height: 38px;
 }

 .rbn-vac-weekdays th {
     font-weight: 600;
     opacity: 0.7;
     padding-bottom: 6px;
 }



 /* ==============================
   VACACIONES – NAV IGUAL QUE RESTO
   ============================== */

 .rbn-vac-calendar-wrapper>form {
     width: auto !important;
 }

 .rbn-vac-calendar-wrapper>form>strong {
     white-space: nowrap;
 }

 .rbn-vac-calendar-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
 }



/* ===============================
   Toggle EXPORTAR DATOS
   =============================== */

.rbn-export-wrapper {
    margin-top: 40px; /* separa de la tabla */
}


.rbn-export-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #0073aa;
    cursor: pointer;
    padding-bottom: 4px;          /* espacio para la línea */
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}




/* Flecha */
#rbn-export-arrow {
    font-size: 24px;    
    line-height: 1;
    margin-left: 0px;
    transition: transform 0.2s ease;
}


/* Cuando está abierto (opcional, mejora visual) */
.rbn-export-actions {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    justify-content: flex-start; /* alineación izquierda */
    flex-wrap: wrap;
}






/* =========================================
   EXPORTAR — BOTONES EN UNA SOLA FILA (MÓVIL)
   ========================================= */

@media (max-width: 1024px) {

    .rbn-export-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 4%;                
        width: 100%;
    }

    .rbn-export-actions .rbn-export-btn {
        flex: 1 1 0;           
        max-width: none;
        padding: 8px 4px;
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }
}




/* ===============================
 * Calendario vacaciones – HOY
 * =============================== */

.rbn-vac-day {
    position: relative;
    text-align: center;
    padding: 6px 0;
}

.rbn-vac-day-vacation {
    background: #b7f5c3;
    font-weight: 600;
}

/* Día actual */
.rbn-vac-day.rbn-vac-today {
    position: relative;
    box-sizing: border-box;
}

.rbn-vac-day.rbn-vac-today::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    border: 2px solid #0073aa;
    border-radius: 6px;
    pointer-events: none;
}




/* Día del calendario vacaciones */
.rbn-vac-calendar td.rbn-vac-day {
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    /* clave para el centrado perfecto */
    padding: 0px 0px 0px 0px !important;
    line-height: 32px;
    box-sizing: border-box;
     border-radius: 0px !important; 
}



/* =====================================================
 * FICHAJES MANUALES — TRAZABILIDAD VISUAL
 * ===================================================== */

.rbn-manual-row {
    background-color: #fff6e5 !important;
}

.rbn-manual-tag {
    font-size: 11px;
    font-weight: 600;
    color: #a45a00;
    margin-left: 6px;
}



/* Fichajes manuales — presentación limpia */

.rbn-manual-cell {
    line-height: 1.25;
}



.rbn-manual-meta {
    font-size: 13px;
    color: #b35c00;
    margin-top: 2px;
}

.rbn-manual-date {
    font-size: 12px;
     color: #b35c00;
}







/* ===============================
 * MODAL INCIDENCIAS (DINÁMICO)
 * =============================== */

.rbn-modal.rbn-modal-incidence {
    display: flex !important;
}


/* Icono información incidencia */
.rbn-info-icon {
    cursor: pointer;
    transition: opacity 0.15s ease;
}




/* ===============================
 * POPUP TRAZABILIDAD INCIDENCIA
 * =============================== */

/* Separación clara entre frase inicial y metadatos */

.rbn-trace-body {
    margin-top: 12px;
    line-height: 1.55;
    font-size: 15px;
}

/* Convertir los saltos en bloques reales */
.rbn-trace-body br {
    display: block;
    content: "";
    margin-top: 6px;
}


/* Dar entidad propia a los campos de trazabilidad */
.rbn-trace-body strong {
    margin-top: 10px;
}


/* Botón cerrar centrado y estilo primario */
.rbn-trace-actions {
    margin-top: 22px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.rbn-btn-primary {
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.rbn-btn-primary:hover {
    background: #006399;
}


.rbn-trace-modal h3 {
    font-size: 20px;     
    line-height: 26px;
    margin-bottom: 14px; 
}




/* Avisos de éxito personalizados */
.rbn-notice-success {
    background: #ecf9f1;
    border-left: 4px solid #2ecc71;
    padding: 10px 14px;
}

.rbn-notice-success p {
    margin: 0;
    font-size: 14px;
}




/* Separación respecto al botón CONTINUAR */
.rbn-notice-success {
    margin-top: 16px;
    position: relative;
}

/* Botón cerrar (X) */
.rbn-notice-close {
    position: absolute;
    top: 6px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #2ecc71;
}

.rbn-notice-close:hover {
    opacity: 0.7;
}