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

 @media (max-width: 768px) {

     body.wp-admin .fl-alert .rbn-alert-subtext,
     .fl-alert .rbn-alert-subtext {
         font-size: 11px !important;
         line-height: 1.4;
     }

 }


 /* 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;
 }





 /* css del boton mostrar 10 regularizaciones o mostrarlas todas */
 .rbn-link-toggle {
     font-size: 12px;
     color: #2271b1;
     text-decoration: none;
     font-weight: 500;
     padding: 0;
     background: none;
     border: none;
 }

 .rbn-link-toggle:hover {
     text-decoration: underline;
     color: #135e96;
 }