.fl-container {
     max-width: 480px;
     margin: 0px 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;
      display: inline-flex;
    align-items: center;   /* ← clave */
    justify-content: center;
    gap: 2px; 
 }


.rbn-employee-icon {
    background: none;
    border: none;
    padding: 0;
    color: inherit;        /* mismo azul */
    font-weight: 700;      /* negrita */
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;        /* elimina desfases */
    margin-left: 4px;      /* lo pega más al nombre */
    cursor: pointer;
}


 .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;
 }






 /* 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, #rbn-employee-modal-body > 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, #rbn-employee-modal-body > 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: flex-start;
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 0;
    flex-wrap: wrap;
 }

 .rbn-export-wrapper {
    display: block !important;
    max-width: 960px;
    clear: both;
    margin: 20px auto;
}

 .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 {
     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: 15px;
        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;
}

/* calendario HOY FRONTEND */
.rbn-vac-calendar .rbn-vac-day.rbn-vac-today::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid #0073aa;
    border-radius: 6px;
    pointer-events: none;
}
/* calendario HOY BACKEND */
.rbn-vacations-calendar .rbn-vac-day.rbn-vac-today::after {
    content: '';
    position: absolute;
    width: 24px;
height: 24px;

transform: translate(-50%, -50%);
    border: 2px solid #2271b1;
    border-radius: 6px;
    pointer-events: none;
}


/* Día del calendario vacaciones */
.rbn-vac-calendar td.rbn-vac-day {
    width: 42px;
    height: 42px;
    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-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;
}




/* css para aviso de incidencias que ponga fecha furuta */

.rbn-notice-error {
    background: #f8d7da;
    border-left: 4px solid #d63638;
    padding: 12px 16px;
    margin: 15px 0;
    color: #842029;
}




/* Botón info del trabajador */
.rbn-employee-info {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    position: relative;
    top: -1.5px;   /* ⬅ ajuste fino vertical */
    margin-top: -10px !important;
    margin-bottom: 16px !important;
}

@media (max-width: 1024px) {
.rbn-employee-info {
    font-size: 22px;
    top: -0.8px;   /* ⬅ ajuste fino vertical */
}
}





/* Ficha trabajador – espaciado compacto */
.rbn-employee-modal .rbn-emp-row {
    margin: 0px;
    line-height: 1.4;
}



/* Modal ficha trabajador – reducir espaciado entre líneas */
#rbn-employee-modal p,
#rbn-employee-modal .rbn-emp-row {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 13px !important;
}



.rbn-employee-name {
    max-width: 100%;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}











/* ================================
   DECLARACIÓN DIARIA
================================ */

/* Contenedor principal */
#rbn-render-area .rbn-declaration-box {
    margin-top: 40px;
    padding: 18px;
    background: #f6f7f8;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
}

/* Título */
#rbn-render-area .rbn-declaration-title {
    font-size: 17px;
    font-weight: 600;
    margin: 6px 0 14px 0;
}

#rbn-render-area .rbn-declaration-box strong {
    font-weight: 600;  
    letter-spacing: 0.2px;
}


/* Grupos */
#rbn-render-area .rbn-declaration-group {
    margin-bottom: 16px;
}

/* Radios (modalidad) */
#rbn-render-area .rbn-declaration-radios label {
    display: block;
    margin-top: 6px;
}

#rbn-render-area .rbn-declaration-radios {
    padding-bottom: 6px;
}

/* Línea separadora */
#rbn-render-area .rbn-declaration-box hr {
     display: none;
}

/* Bloques de cada medida */
#rbn-render-area .rbn-declaration-measure {
    padding: 10px;
    background: #ffffff;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
}

#rbn-render-area .rbn-declaration-measure:not(:last-child) {
    margin-bottom: 10px;
}

/* Textareas */
#rbn-render-area .rbn-declaration-measure textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccd0d4;
    margin-top: 8px;
    font-size: 14px;
}

/* Error */
#rbn-render-area .rbn-error {
    color: #b00000;
    font-size: 13px;
    margin-top: 6px;
}

#rbn-render-area .rbn-declaration-measure:last-of-type {
    margin-bottom: 22px;
}

#rbn-render-area .rbn-declaration-box button.fl2-btn {
    margin-top: 0px;
}




/* ===========================
   ESTADO BLOQUEADO (locked)
   =========================== */

/* Fondo uniforme de todo el bloque */
#rbn-render-area .rbn-declaration-box.locked {
    background: #f4f7fb;
}

/* Las cajas internas dejan de verse blancas */
#rbn-render-area .rbn-declaration-box.locked .rbn-declaration-measure {
    background: transparent;
    border-color: #e0e6ef;
}

/* Textareas readonly sin fondo blanco */
#rbn-render-area .rbn-declaration-box.locked textarea {
    background: transparent !important;
    border-color: #d5dbe3;
    color: #2b2b2b;
}

/* Radios y checks más visibles aunque estén disabled */
#rbn-render-area .rbn-declaration-box.locked input[type="checkbox"],
#rbn-render-area .rbn-declaration-box.locked input[type="radio"] {
    opacity: 1 !important;
    filter: none !important;
}

/* Si están marcados, que se vean bien */
#rbn-render-area .rbn-declaration-box.locked input[type="checkbox"]:checked,
#rbn-render-area .rbn-declaration-box.locked input[type="radio"]:checked {
    accent-color: #000; /* hace el check/radio negro en navegadores modernos */
}


/* Forzar checks y radios visibles en modo bloqueado */
#rbn-render-area .rbn-declaration-box.locked input[type="checkbox"],
#rbn-render-area .rbn-declaration-box.locked input[type="radio"] {
    pointer-events: none;
}

#rbn-render-area .rbn-declaration-box.locked input[type="checkbox"]:checked::after,
#rbn-render-area .rbn-declaration-box.locked input[type="radio"]:checked::after {
    content: '';
    display: block;
}






/* flecha desplegable para encuesta de medidas aplicadas - frontend*/
/* Toggle cabecera */
#rbn-render-area .rbn-declaration-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 600;
    margin: 12px 0 10px 0;
    user-select: none;
}


/* Flecha */
#rbn-render-area .rbn-toggle-arrow {
    transition: transform 0.2s ease;
    font-size: 12px;
}

/* Flecha girada cuando está abierto */
#rbn-render-area .rbn-toggle-arrow.open {
    transform: rotate(180deg);
}

/* Contenedor cerrado */
#rbn-render-area .rbn-measures-wrapper {
    display: none;
    margin-bottom: 22px; /* separación con botón guardar */
}

/* Contenedor abierto */
#rbn-render-area .rbn-measures-wrapper.open {
    display: block;
}

#rbn-render-area .rbn-declaration-box button.fl2-btn {
    margin-top: 16px;
}









/* form - alerta falta finalizar - margen */
.fl-alert {
    margin-bottom: 20px !important;
}


/* informe - boton prev-next */
.fl-btn{
	margin-top:-4px !important;
}













/* turnos en vacaciones */
/* =============================
   CELDA BASE
============================= */
.rbn-vac-calendar td{
    position:relative;
    height:64px;
    padding:0;
    text-align:center;
    vertical-align:middle;
}

/* =============================
   NUMERO DIA (SIEMPRE CENTRADO)
============================= */
.rbn-day-number{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-55%);
    font-size:14px;
    font-weight:600;
    z-index:2;
}

/* =============================
   TURNO ABAJO
============================= */
.rbn-day-shift{
    position:absolute;
    bottom:6px;
    left:0;
    right:0;
    font-size:8px;
    line-height:1;
    text-transform:uppercase;
    opacity:.75;
    text-align:center;
    white-space:nowrap;

}

/* opcional: mejora visual en vacaciones */
.rbn-vac-day-vacation .rbn-day-shift{
    font-weight:500;
}






/* ===== CALENDARIO BACKEND TURNOS ===== */
/* ===== CALENDARIO BACKEND TURNOS — LAYOUT REAL ===== */

.rbn-vacations-calendar td{
    padding:0 !important;
    height:66px;
    vertical-align:middle;
    text-align:center;
}

/* contenedor interno del día */
.rbn-vacations-calendar td.rbn-vac-day{
    position:relative;
}

/* wrapper centrado */
.rbn-vacations-calendar td.rbn-vac-day::before{
    content:"";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* bloque vertical número + turno */
.rbn-vacations-calendar .rbn-day-number{
    display:block;
    font-size:14px;
    font-weight:600;
    line-height:1.1;
}

.rbn-vacations-calendar .rbn-day-shift{
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
    opacity:.75;
    margin-top:3px;
}


/* ===== FORMULARIO TURNOS estilo VACACIONES ===== */
.rbn-shift-inline{
    display:flex;
    align-items:flex-end;
    gap:18px;
    flex-wrap:wrap;
}

.rbn-shift-inline .button{
    margin-top:22px;
}




/* linea separadora */
.rbn-section-separator {
    border-top: 1px solid #dcdcde;
    margin: 25px 0 15px 0;
}




/* =====================================
   LAYOUT ADMIN — DOS COLUMNAS
===================================== */

.rbn-admin-layout {
    display: flex;
    gap: 36px; /* espacio real entre columnas */
    align-items: flex-start;
    position: relative;
}


/* SIDEBAR */
.rbn-admin-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 10px;   
    align-self: flex-start;
}

/* CONTENIDO */
.rbn-admin-content {
    flex: 1;
    min-width: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .rbn-admin-layout {
        flex-direction: column;
        gap: 20px;
    }

    .rbn-admin-layout::before {
        display: none;
    }

    .rbn-admin-sidebar {
        width: 100%;
        position: relative;
        top: 0;
    }
}








/* Alertas cerrables */
.rbn-vac-alert {
    display: flex;
    align-items: center;
}

.rbn-alert-text {
    flex: 1;
}

.rbn-alert-close {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    opacity: .7;
    padding: 0 4px;
    margin-left: 12px;
}

.rbn-alert-close:hover {
    opacity: 1;
}










/* TABLA DE HORAS EXTRA EN BACKEND */
.rbn-table-wrapper {
    width: 100%;
    max-width: 900px;
    overflow-x: auto;
    margin-top: 20px;
}

.rbn-extra-table {
    width: 100%;
    min-width: 900px; /* mantiene estructura en desktop */
    border-collapse: collapse;
}










/* Formulario incidencias más compacto */
/* Ajuste fino alineación labels */
.rbn-compact-form .form-table th {
    vertical-align: top;
    padding-top: 12px;   /* ajusta aquí */
}
.rbn-compact-form .form-table td {
    padding-top: 0px;
    padding-bottom: 8px;
}

.rbn-compact-form .form-table tr {
    margin-bottom: 0;
}

/* Ajuste textarea para que no quede tan separado */
.rbn-compact-form textarea {
    margin-top: 4px;
}

/* Ajuste nota inferior */
.rbn-compact-form p {
    margin-top: 8px;
    margin-bottom: 18px;
}



/* Ocultar spacing extra br en móvil, para ajustar posicion de seleccionar trabajador en backend */
@media (max-width: 800px) {
    .rbn-desktop-spacing {
        display: none;
    }
}




/* =========================================
   BACKEND — Layout flex correcto
========================================= */

body.wp-admin .rbn-admin-content {
    flex: 1;
    min-width: 0; /* CLAVE en flex */
}

body.wp-admin .rbn-admin-content-inner {
    width: 100%;
}

/* =========================================
   BACKEND — Scroll tablas
========================================= */

body.wp-admin .rbn-admin-table-scroll,
body.wp-admin .rbn-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Solo forzar ancho mínimo a tablas realmente anchas */
@media (max-width: 1000px) {

    body.wp-admin .rbn-admin-table-scroll table,
    body.wp-admin .rbn-extra-table {
        min-width: 900px;
    }

}


/* =========================================
   BACKEND — Layout responsive real
========================================= */

@media (max-width: 960px) {

    body.wp-admin .rbn-admin-layout {
        display: block; /* romper el flex */
    }

    body.wp-admin .rbn-admin-sidebar {
        width: 100%;
        margin-bottom: 20px;
    }

    body.wp-admin .rbn-admin-content {
        width: 100%;
    }

}



/* ajusta espacio de marcar vacaciones en backend moviles */
@media (max-width: 800px) {
.rbn-tit-marc-vac{
     margin-bottom: 10px !important;
}
}










/* texto informacion de que es cada seccion en moviles */
@media (max-width:800px){

.rbn-section-help{
font-size:11.5px;
line-height:1.25;
margin:4px 0;
}

}






/* Subtexto de alertas LOS TOTALES SON PROVISIONALES... */
body.wp-admin .fl-alert .rbn-alert-subtext,
.fl-alert .rbn-alert-subtext {
    font-size: 14px !important;
    font-weight: 400 !important;
    opacity: 0.9;
    display: block;
    margin-top: 4px;
}


/* SEPARACION ENTRE ALERTAS DE FICHAJES AUN NO FINALIZADOS */
.rbn-alert-line {
    margin-bottom: 6px !important;
}










/* COLORES AMARILLOS - Incidencias dentro del listado total */
.widefat.striped tbody tr.rbn-manual-row {
    background-color: #fff8e1 !important;
}
/* LINEA FINA GRIS DIVISORIA - Incidencias dentro del listado total */
#rbn-historico table.widefat td {
    border-bottom: 1px solid #eee;
}

/* COLOR AMARILLO - Incidencias dentro del DIA */
.rbn-manual-row {
    background-color: #fff8e1 !important;
}




/* TEXTO ROJO DE FICHAJES SIN EMPAREJAR - EN BACKEND */
.rbn-row-open td {
    color: #b30000 !important;
    font-weight: 600;
}