/**
 * Kontify - Estilos Profesionales del Frontend
 *
 * @since 2.0.0
 * @version 3.0.0 - Rediseño Profesional
 */

/* ===== Variables de Diseño Profesional ===== */
:root {
    /* Colores primarios */
    --scwp-primary: #2563eb;
    --scwp-primary-dark: #1d4ed8;
    --scwp-primary-light: #3b82f6;
    --scwp-primary-soft: rgba(37, 99, 235, 0.1);
    
    /* Colores de estado */
    --scwp-success: #10b981;
    --scwp-success-soft: rgba(16, 185, 129, 0.1);
    --scwp-warning: #f59e0b;
    --scwp-warning-soft: rgba(245, 158, 11, 0.1);
    --scwp-danger: #ef4444;
    --scwp-danger-soft: rgba(239, 68, 68, 0.1);
    --scwp-info: #0ea5e9;
    --scwp-info-soft: rgba(14, 165, 233, 0.1);
    
    /* Escala de verdes */
    --scwp-green-500: #22c55e;
    --scwp-green-600: #16a34a;
    
    /* Escala de rojos */
    --scwp-red-500: #ef4444;
    --scwp-red-600: #dc2626;
    
    /* Escala de grises */
    --scwp-gray-50: #f9fafb;
    --scwp-gray-100: #f3f4f6;
    --scwp-gray-200: #e5e7eb;
    --scwp-gray-300: #d1d5db;
    --scwp-gray-400: #9ca3af;
    --scwp-gray-500: #6b7280;
    --scwp-gray-600: #4b5563;
    --scwp-gray-700: #374151;
    --scwp-gray-800: #1f2937;
    --scwp-gray-900: #111827;
    
    /* Colores base */
    --scwp-white: #ffffff;
    --scwp-black: #000000;
    
    /* Sombras profesionales */
    --scwp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --scwp-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --scwp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --scwp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --scwp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --scwp-shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.35);
    --scwp-shadow-success: 0 4px 14px rgba(16, 185, 129, 0.35);
    --scwp-shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.35);
    
    /* Bordes redondeados */
    --scwp-radius-sm: 6px;
    --scwp-radius: 10px;
    --scwp-radius-md: 12px;
    --scwp-radius-lg: 16px;
    --scwp-radius-xl: 20px;
    --scwp-radius-full: 9999px;
    
    /* Transiciones */
    --scwp-transition-fast: 150ms ease;
    --scwp-transition: 200ms ease;
    --scwp-transition-slow: 300ms ease;
    
    /* Tipografía */
    --scwp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --scwp-font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

/* Reset de box-sizing para TODOS los módulos del plugin (clima laboral, tareas,
   mensajería, flujos de trabajo, notificaciones, formularios, switch-user, etc.):
   sus anchos/paddings fijos asumen "box-sizing: border-box", que hasta ahora
   dependía de que lo pusiera el tema activo (Astra lo hace globalmente). Al
   declararlo aquí, con selector de atributo por prefijo de clase, el plugin
   deja de depender de que el tema active ese reset. Este archivo (scwp-frontend.css)
   se carga en casi todos los módulos del frontend del plugin. */
[class*="scwp-"],
[class*="scwp-"]::before,
[class*="scwp-"]::after {
    box-sizing: border-box;
}

/* ===== Reset y Base ===== */
.scwp-frontend-container,
.scwp-container,
.scwp-reporte-container {
    font-family: var(--scwp-font-sans);
    color: var(--scwp-gray-700);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reset propio de box-sizing: la mayoría de los anchos/paddings de este archivo
   asumen "box-sizing: border-box", que normalmente lo pone el tema (Astra lo
   aplica globalmente). Se declara aquí para que el layout no dependa de que el
   tema activo lo haga. */
.scwp-frontend-container,
.scwp-frontend-container *,
.scwp-frontend-container *::before,
.scwp-frontend-container *::after,
.scwp-container,
.scwp-container *,
.scwp-container *::before,
.scwp-container *::after,
.scwp-reporte-container,
.scwp-reporte-container *,
.scwp-reporte-container *::before,
.scwp-reporte-container *::after {
    box-sizing: border-box;
}

/* ===== Layout Principal =====
   Ancho completo (igual que el módulo Empleados) en vez del tope de 1280px que
   tenía antes: la vista de Empleados sobreescribía este mismo límite con su
   propio <style> (max-width:100% en public/views/empleados-list.php) para verse
   ancha; el resto de los módulos, sin ese override, se quedaban centrados y más
   angostos. Al quitar el tope acá, todos los módulos que usan
   ".scwp-frontend-container" (~94 vistas) quedan anchos por igual, sin tener
   que repetir el override en cada vista. */
.scwp-frontend-container {
    max-width: 100%;
    margin: 0;
    padding: 24px;
    box-sizing: border-box;
}

/* ===== Header Profesional ===== */
.scwp-frontend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--scwp-gray-900) 0%, var(--scwp-gray-800) 100%);
    border-radius: var(--scwp-radius-lg);
    box-shadow: var(--scwp-shadow-lg);
    position: relative;
    overflow: hidden;
}

.scwp-frontend-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03));
    pointer-events: none;
}

.scwp-frontend-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--scwp-white);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
}

.scwp-frontend-header h1 .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: var(--scwp-primary);
}

.scwp-header-subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--scwp-gray-400);
    font-weight: 500;
}

.scwp-empresa-info {
    text-align: right;
}

.scwp-empresa-nombre {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--scwp-white);
    margin-bottom: 4px;
}

.scwp-empresa-nit {
    display: block;
    font-size: 13px;
    color: var(--scwp-gray-400);
}

/* ===== Selector de Empresa ===== */
.scwp-empresa-selector {
    background: var(--scwp-white);
    padding: 20px 24px;
    border-radius: var(--scwp-radius);
    margin-bottom: 24px;
    border: 1px solid var(--scwp-gray-200);
    box-shadow: var(--scwp-shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
}

.scwp-empresa-selector label {
    font-weight: 600;
    color: var(--scwp-gray-700);
    font-size: 14px;
}

.scwp-empresa-selector select {
    padding: 12px 16px;
    border: 2px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius-sm);
    min-width: 280px;
    height: 44px;
    line-height: 1.4;
    font-size: 14px;
    background: var(--scwp-white);
    color: var(--scwp-gray-700);
    cursor: pointer;
    transition: all var(--scwp-transition);
}

.scwp-empresa-selector select:hover,
.scwp-empresa-selector select:focus {
    border-color: var(--scwp-primary);
    box-shadow: 0 0 0 3px var(--scwp-primary-soft);
    outline: none;
}

/* ===== Login Moderno ===== */
.scwp-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--scwp-gray-100) 0%, var(--scwp-gray-200) 100%);
    border-radius: var(--scwp-radius-xl);
}

.scwp-login-box {
    background: var(--scwp-white);
    border: none;
    border-radius: var(--scwp-radius-lg);
    box-shadow: var(--scwp-shadow-xl);
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    position: relative;
    overflow: hidden;
}

.scwp-login-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--scwp-primary), var(--scwp-primary-light));
}

.scwp-login-box h2 {
    margin: 0 0 8px;
    text-align: center;
    color: var(--scwp-gray-900);
    font-size: 26px;
    font-weight: 700;
}

.scwp-login-subtitle {
    text-align: center;
    color: var(--scwp-gray-500);
    margin-bottom: 32px;
    font-size: 15px;
}

.scwp-login-form .scwp-form-group {
    margin-bottom: 20px;
}

.scwp-login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--scwp-gray-700);
    font-size: 14px;
}

.scwp-login-form input[type="text"],
.scwp-login-form input[type="password"],
.scwp-login-form input[type="email"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius-sm);
    font-size: 15px;
    transition: all var(--scwp-transition);
    background: var(--scwp-gray-50);
}

.scwp-login-form input:focus {
    outline: none;
    border-color: var(--scwp-primary);
    background: var(--scwp-white);
    box-shadow: 0 0 0 4px var(--scwp-primary-soft);
}

.scwp-login-links {
    text-align: center;
    margin-top: 24px;
}

.scwp-login-links a {
    color: var(--scwp-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color var(--scwp-transition);
}

.scwp-login-links a:hover {
    color: var(--scwp-primary-dark);
    text-decoration: underline;
}

/* ===== Cards Profesionales ===== */
.scwp-cards-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 32px;
}

.scwp-cards-4 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.scwp-cards-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.scwp-cards-2 {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.scwp-card {
    background: var(--scwp-white);
    border: 1px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius);
    box-shadow: var(--scwp-shadow-sm);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all var(--scwp-transition);
    position: relative;
    overflow: hidden;
}

.scwp-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--scwp-primary);
    opacity: 0;
    transition: opacity var(--scwp-transition);
}

.scwp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--scwp-shadow-lg);
}

.scwp-card:hover::before {
    opacity: 1;
}

.scwp-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--scwp-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    transition: transform var(--scwp-transition);
}

.scwp-card:hover .scwp-card-icon {
    transform: scale(1.1);
}

/* Tarjetas de estadística sin icono (KPI): borde superior + fondo tintado */
.scwp-card:has(> .scwp-card-value) {
    flex-direction: column;
    align-items: flex-start;
}

.scwp-card-value {
    order: 2;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.scwp-card-label {
    order: 1;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--scwp-gray-500);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.scwp-card-primary:not(:has(.scwp-card-icon)) {
    background: linear-gradient(180deg, var(--scwp-primary-soft) 0%, var(--scwp-white) 70%);
    border-top: 3px solid var(--scwp-primary);
}
.scwp-card-primary:not(:has(.scwp-card-icon)) .scwp-card-value { color: var(--scwp-primary); }

.scwp-card-success:not(:has(.scwp-card-icon)) {
    background: linear-gradient(180deg, var(--scwp-success-soft) 0%, var(--scwp-white) 70%);
    border-top: 3px solid var(--scwp-success);
}
.scwp-card-success:not(:has(.scwp-card-icon)) .scwp-card-value { color: var(--scwp-success); }

.scwp-card-warning:not(:has(.scwp-card-icon)) {
    background: linear-gradient(180deg, var(--scwp-warning-soft) 0%, var(--scwp-white) 70%);
    border-top: 3px solid var(--scwp-warning);
}
.scwp-card-warning:not(:has(.scwp-card-icon)) .scwp-card-value { color: var(--scwp-warning); }

.scwp-card-info:not(:has(.scwp-card-icon)) {
    background: linear-gradient(180deg, var(--scwp-info-soft) 0%, var(--scwp-white) 70%);
    border-top: 3px solid var(--scwp-info);
}
.scwp-card-info:not(:has(.scwp-card-icon)) .scwp-card-value { color: var(--scwp-info); }

.scwp-card-danger:not(:has(.scwp-card-icon)) {
    background: linear-gradient(135deg, #f43f5e 0%, #f97316 100%);
    border-top: 3px solid transparent;
}
.scwp-card-danger:not(:has(.scwp-card-icon)) .scwp-card-value,
.scwp-card-danger:not(:has(.scwp-card-icon)) .scwp-card-label {
    color: #fff;
}
.scwp-card-danger:not(:has(.scwp-card-icon)) .scwp-card-label {
    color: rgba(255,255,255,0.85);
}

.scwp-card-primary .scwp-card-icon {
    background: var(--scwp-primary-soft);
    color: var(--scwp-primary);
}

.scwp-card-success .scwp-card-icon {
    background: var(--scwp-success-soft);
    color: var(--scwp-success);
}

.scwp-card-warning .scwp-card-icon {
    background: var(--scwp-warning-soft);
    color: var(--scwp-warning);
}

.scwp-card-info .scwp-card-icon {
    background: var(--scwp-info-soft);
    color: var(--scwp-info);
}

.scwp-card-danger .scwp-card-icon {
    background: var(--scwp-danger-soft);
    color: var(--scwp-danger);
}

.scwp-card-content h3 {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 700;
    color: var(--scwp-gray-900);
    line-height: 1.2;
}

.scwp-card-content p {
    margin: 0;
    color: var(--scwp-gray-500);
    font-size: 14px;
    font-weight: 500;
}

/* ===== Secciones ===== */
.scwp-section {
    background: var(--scwp-white);
    border: 1px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--scwp-shadow-sm);
}

.scwp-section h2 {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 600;
    color: var(--scwp-gray-900);
    padding-bottom: 16px;
    border-bottom: 2px solid var(--scwp-gray-100);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Menú Grid ===== */
.scwp-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}



/* ===== Tablas Profesionales ===== */
.scwp-table-responsive {
    overflow-x: auto;
    border-radius: var(--scwp-radius-sm);
    border: 1px solid var(--scwp-gray-200);
}

.scwp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.scwp-table th,
.scwp-table td {
    padding: 14px 18px;
    text-align: left;
}

.scwp-table th {
    background: var(--scwp-gray-50);
    font-weight: 600;
    color: var(--scwp-gray-700);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--scwp-gray-200);
    white-space: nowrap;
}

.scwp-table tbody tr {
    transition: background var(--scwp-transition-fast);
}

.scwp-table tbody tr:hover {
    background: var(--scwp-primary-soft);
}

.scwp-table td {
    border-bottom: 1px solid var(--scwp-gray-100);
    color: var(--scwp-gray-600);
}

.scwp-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== Badges Profesionales ===== */
.scwp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--scwp-radius-full);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.scwp-badge-activo,
.scwp-badge-abierto,
.scwp-badge-aprobado,
.scwp-badge-pagada {
    background: var(--scwp-success-soft);
    color: var(--scwp-success);
}

.scwp-badge-inactivo,
.scwp-badge-cerrado,
.scwp-badge-anulado {
    background: var(--scwp-gray-100);
    color: var(--scwp-gray-600);
}

.scwp-badge-pendiente {
    background: var(--scwp-warning-soft);
    color: var(--scwp-warning);
}

.scwp-badge-pagado {
    background: var(--scwp-primary-soft);
    color: var(--scwp-primary);
}

.scwp-badge-suspendido {
    background: var(--scwp-danger-soft);
    color: var(--scwp-danger);
}

/* ===== Clases de utilidad para tablas ===== */
.scwp-col-narrow { width: 80px; }
.scwp-col-currency { width: 120px; text-align: right; }
.scwp-col-actions { width: 100px; text-align: center; }

/* ===== Status Badges (para tablas y reportes) ===== */
.scwp-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--scwp-radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.scwp-status-info {
    background: var(--scwp-info-soft);
    color: var(--scwp-info);
}

.scwp-status-success,
.scwp-status-ingresos {
    background: var(--scwp-success-soft);
    color: var(--scwp-success);
}

.scwp-status-danger,
.scwp-status-gastos {
    background: var(--scwp-danger-soft);
    color: var(--scwp-danger);
}

.scwp-status-warning {
    background: var(--scwp-warning-soft);
    color: var(--scwp-warning);
}

/* Badges de acciones para auditoría */
.scwp-accion-insert { background: #dcfce7; color: #15803d; }
.scwp-accion-update { background: #ffedd5; color: #c2410c; }
.scwp-accion-delete { background: #fee2e2; color: #b91c1c; }
.scwp-accion-login { background: #dbeafe; color: #1e40af; }
.scwp-accion-logout { background: #f3f4f6; color: #4b5563; }
.scwp-accion-view { background: #e0e7ff; color: #4338ca; }

/* ===== Botones Profesionales ===== */
.scwp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: var(--scwp-radius-sm);
    background: var(--scwp-gray-100);
    color: var(--scwp-gray-700);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--scwp-transition);
    white-space: nowrap;
}

.scwp-button:hover {
    background: var(--scwp-gray-200);
    transform: translateY(-1px);
    text-decoration: none;
}

.scwp-button-icon-only {
    padding: 10px;
    width: 40px;
    height: 40px;
    gap: 0;
}

.scwp-button-icon-only .dashicons {
    margin: 0;
}

.scwp-button-primary {
    background: var(--scwp-primary);
    color: var(--scwp-white);
    box-shadow: var(--scwp-shadow-primary);
}

.scwp-button-primary:hover {
    background: var(--scwp-primary-dark);
    color: var(--scwp-white);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.scwp-button-success {
    background: var(--scwp-success);
    color: var(--scwp-white);
    box-shadow: var(--scwp-shadow-success);
}

.scwp-button-success:hover {
    background: #059669;
    color: var(--scwp-white);
}

.scwp-button-danger {
    background: var(--scwp-danger);
    color: var(--scwp-white);
    box-shadow: var(--scwp-shadow-danger);
}

.scwp-button-danger:hover {
    background: #dc2626;
    color: var(--scwp-white);
}

.scwp-button-secondary {
    background: var(--scwp-white);
    border-color: var(--scwp-gray-300);
    color: var(--scwp-gray-700);
}

.scwp-button-secondary:hover {
    background: var(--scwp-gray-50);
    border-color: var(--scwp-gray-400);
}

.scwp-button-small {
    padding: 6px 14px;
    font-size: 13px;
}

.scwp-button-block {
    display: flex;
    width: 100%;
}

/* ===== Iconos de Acción Compactos y Unificados ===== */
.scwp-actions-group {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.scwp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--scwp-gray-500);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.scwp-icon-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.scwp-icon-btn:hover {
    background: var(--scwp-gray-100);
    color: var(--scwp-gray-700);
    transform: scale(1.1);
}

/* Variantes de iconos */
.scwp-icon-btn-primary {
    background: var(--wp-primary-soft, rgba(37, 99, 235, 0.1));
    color: var(--scwp-primary);
}

.scwp-icon-btn-primary:hover {
    background: var(--scwp-primary);
    color: var(--scwp-white);
}

.scwp-icon-btn-success {
    background: var(--scwp-success-soft);
    color: var(--scwp-success);
}

.scwp-icon-btn-success:hover {
    background: var(--scwp-success);
    color: var(--scwp-white);
}

.scwp-icon-btn-danger {
    background: var(--scwp-danger-soft);
    color: var(--scwp-danger);
}

.scwp-icon-btn-danger:hover {
    background: var(--scwp-danger);
    color: var(--scwp-white);
}

.scwp-icon-btn-warning {
    background: var(--scwp-warning-soft);
    color: var(--scwp-warning);
}

.scwp-icon-btn-warning:hover {
    background: var(--scwp-warning);
    color: var(--scwp-white);
}

/* Iconos específicos de estado */
.scwp-adjunto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 14px;
}

.scwp-adjunto-icon.ok {
    background: var(--scwp-success-soft);
    color: var(--scwp-success);
}

.scwp-adjunto-icon.missing {
    background: var(--scwp-warning-soft);
    color: var(--scwp-warning);
}

.scwp-adjunto-icon .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.scwp-revisado-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--scwp-success);
    border-radius: 50%;
    margin-left: 4px;
}

.scwp-revisado-badge .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    color: var(--scwp-white);
}

/* ===== Mensajes/Alertas Profesionales ===== */
.scwp-message {
    padding: 16px 20px;
    border-radius: var(--scwp-radius);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.scwp-message::before {
    font-family: 'dashicons';
    font-size: 20px;
}

.scwp-message-error {
    background: var(--scwp-danger-soft);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--scwp-danger);
}

.scwp-message-error::before {
    content: '\f534';
}

.scwp-message-success {
    background: var(--scwp-success-soft);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--scwp-success);
}

.scwp-message-success::before {
    content: '\f147';
}

.scwp-message-info {
    background: var(--scwp-info-soft);
    border: 1px solid rgba(14, 165, 233, 0.2);
    color: var(--scwp-info);
}

.scwp-message-info::before {
    content: '\f348';
}

.scwp-message-warning {
    background: var(--scwp-warning-soft);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--scwp-warning);
}

.scwp-message-warning::before {
    content: '\f534';
}

/* ===== Estado Vacío ===== */
.scwp-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--scwp-gray-400);
}

.scwp-empty-state .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
}

.scwp-empty-state h3 {
    margin: 0 0 10px;
    color: var(--scwp-gray-600);
    font-size: 18px;
}

.scwp-empty-state p {
    margin: 0;
    font-size: 14px;
}

/* ===== Formularios Profesionales ===== */
.scwp-form-group {
    margin-bottom: 20px;
}

.scwp-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--scwp-gray-700);
    font-size: 13px;
}

.scwp-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--scwp-gray-700);
    font-size: 14px;
}

.scwp-form-group input[type="text"],
.scwp-form-group input[type="email"],
.scwp-form-group input[type="number"],
.scwp-form-group input[type="date"],
.scwp-form-group input[type="time"],
.scwp-form-group input[type="password"],
.scwp-form-group select,
.scwp-form-group textarea,
.scwp-input,
.scwp-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius-sm);
    font-size: 14px;
    color: var(--scwp-gray-700);
    background: var(--scwp-white);
    transition: all var(--scwp-transition);
}

.scwp-form-group input:focus,
.scwp-form-group select:focus,
.scwp-form-group textarea:focus,
.scwp-input:focus,
.scwp-select:focus {
    outline: none;
    border-color: var(--scwp-primary);
    box-shadow: 0 0 0 4px var(--scwp-primary-soft);
}

.scwp-form-group input::placeholder,
.scwp-form-group textarea::placeholder {
    color: var(--scwp-gray-400);
}

.scwp-form-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
}

.scwp-form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--scwp-gray-300);
    border-radius: 4px;
    cursor: pointer;
}

/* ===== Filtros Profesionales ===== */
.scwp-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.scwp-filters input,
.scwp-filters select {
    padding: 12px 16px;
    border: 2px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius-sm);
    height: 44px;
    line-height: 1.4;
    font-size: 14px;
    background: var(--scwp-white);
    transition: all var(--scwp-transition);
}

.scwp-filters input:focus,
.scwp-filters select:focus {
    outline: none;
    border-color: var(--scwp-primary);
    box-shadow: 0 0 0 3px var(--scwp-primary-soft);
}

/* ===== Paginación ===== */
.scwp-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.scwp-pagination a,
.scwp-pagination span {
    padding: 10px 16px;
    border: 1px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius-sm);
    text-decoration: none;
    color: var(--scwp-gray-600);
    font-weight: 500;
    transition: all var(--scwp-transition);
}

.scwp-pagination a:hover {
    background: var(--scwp-gray-100);
    border-color: var(--scwp-gray-300);
}

.scwp-pagination .current {
    background: var(--scwp-primary);
    border-color: var(--scwp-primary);
    color: var(--scwp-white);
}

/* ===== Loading ===== */
.scwp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.scwp-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--scwp-gray-200);
    border-top-color: var(--scwp-primary);
    border-radius: 50%;
    animation: scwp-spin 1s linear infinite;
}

@keyframes scwp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Totales Cards ===== */
.scwp-totales-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 28px;
}

/* Responsive: en pantallas medianas, 3x2 */
@media (max-width: 1200px) {
    .scwp-totales-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Responsive: en pantallas pequeñas, 2x3 */
@media (max-width: 768px) {
    .scwp-totales-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Responsive: en móviles, 1 columna */
@media (max-width: 480px) {
    .scwp-totales-grid {
        grid-template-columns: 1fr !important;
    }
}

.scwp-total-card {
    background: var(--scwp-white);
    border: 1px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius);
    padding: 12px 8px;
    text-align: center;
    box-shadow: var(--scwp-shadow-sm);
    transition: all var(--scwp-transition);
    min-width: 0;
    overflow: hidden;
}

.scwp-total-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--scwp-shadow-md);
}

.scwp-total-label {
    display: block;
    font-size: 10px;
    color: var(--scwp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    font-weight: 600;
}

.scwp-total-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--scwp-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scwp-total-card.ingresos .scwp-total-value {
    color: var(--scwp-success);
}

.scwp-total-card.deducciones .scwp-total-value {
    color: var(--scwp-danger);
}

.scwp-total-card.neto .scwp-total-value {
    color: var(--scwp-primary);
}

/* ===== Modal Profesional ===== */
/* ===== Modal Profesional Mejorado ===== */
.scwp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.scwp-modal-overlay.active {
    display: flex !important;
    opacity: 1;
}

.scwp-modal-content {
    background: var(--scwp-white);
    border-radius: var(--scwp-radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s ease;
}

.scwp-modal-overlay.active .scwp-modal-content {
    transform: scale(1) translateY(0);
}

.scwp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--scwp-gray-50), var(--scwp-white));
    border-bottom: 1px solid var(--scwp-gray-200);
    position: sticky;
    top: 0;
    z-index: 10;
}

.scwp-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--scwp-gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
}

.scwp-modal-close {
    background: var(--scwp-gray-100);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 20px;
    color: var(--scwp-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.scwp-modal-close:hover {
    background: var(--scwp-danger-soft);
    color: var(--scwp-danger);
}

.scwp-modal-body {
    padding: 24px;
}

.scwp-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--scwp-gray-200);
}

/* Modal grande para formularios complejos */
.scwp-modal-content.scwp-modal-lg {
    max-width: 800px;
}

.scwp-modal-content.scwp-modal-sm {
    max-width: 450px;
}

/* ===== Utilidades ===== */
.scwp-text-right {
    text-align: right !important;
}

.scwp-text-center {
    text-align: center !important;
}

.scwp-text-left {
    text-align: left !important;
}

.scwp-mb-0 { margin-bottom: 0 !important; }
.scwp-mb-1 { margin-bottom: 8px !important; }
.scwp-mb-2 { margin-bottom: 16px !important; }
.scwp-mb-3 { margin-bottom: 24px !important; }

.scwp-mt-0 { margin-top: 0 !important; }
.scwp-mt-1 { margin-top: 8px !important; }
.scwp-mt-2 { margin-top: 16px !important; }
.scwp-mt-3 { margin-top: 24px !important; }

.scwp-hidden {
    display: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .scwp-frontend-container {
        padding: 16px;
    }
    
    .scwp-frontend-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 20px;
    }
    
    .scwp-frontend-header h1 {
        font-size: 22px;
    }
    
    .scwp-empresa-info {
        text-align: center;
    }
    
    .scwp-cards-4,
    .scwp-cards-3,
    .scwp-cards-2 {
        grid-template-columns: 1fr;
    }
    
    .scwp-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .scwp-filters {
        flex-direction: column;
    }
    
    .scwp-filters input,
    .scwp-filters select {
        width: 100%;
    }
    
    .scwp-section {
        padding: 20px;
    }
    
    .scwp-table th,
    .scwp-table td {
        padding: 12px;
    }
}

/* ===== Estilos para filtros de listados ===== */
.scwp-filters-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px 24px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: var(--scwp-gray-50);
    border-radius: var(--scwp-radius-sm);
    border: 1px solid var(--scwp-gray-200);
}

.scwp-filters-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

/* Bloques de filtro individuales (Empresa / Área / Cargo / etc.) dentro de scwp-filters-bar */
.scwp-filters-bar > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.scwp-filters-bar label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--scwp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.scwp-filters-bar label .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
    color: var(--scwp-primary);
    flex-shrink: 0;
}

.scwp-filter-info {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    align-self: center;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--scwp-gray-600);
}

.scwp-filter-info .dashicons {
    color: var(--scwp-primary);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .scwp-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .scwp-filters-bar > div {
        width: 100%;
    }
    .scwp-filters-bar select,
    .scwp-filter-select,
    .scwp-multiselect,
    .scwp-multiselect-btn {
        width: 100%;
        min-width: 0;
    }
}

.scwp-filter-select,
.scwp-filters-bar select,
.scwp-filters-bar input[type="date"],
.scwp-filters-bar input[type="time"],
.scwp-filters-bar input[type="text"] {
    height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--scwp-gray-300);
    border-radius: var(--scwp-radius-sm);
    background: var(--scwp-white);
    color: var(--scwp-gray-700);
    font-size: 14px;
    line-height: 1.4;
    min-width: 180px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scwp-filter-select:focus,
.scwp-filters-bar select:focus,
.scwp-filters-bar input[type="date"]:focus,
.scwp-filters-bar input[type="time"]:focus,
.scwp-filters-bar input[type="text"]:focus {
    outline: none;
    border-color: var(--scwp-primary);
    box-shadow: 0 0 0 3px var(--scwp-primary-soft);
}

/* Filtro multi-select por Cargo (Demografía) */
.scwp-multiselect {
    position: relative;
}

.scwp-multiselect-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 220px;
    text-align: left;
    background: var(--scwp-white);
}

.scwp-multiselect-btn .dashicons {
    color: var(--scwp-gray-400);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.scwp-multiselect-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 280px;
    max-width: 90vw;
    background: var(--scwp-white);
    border: 1px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius-sm);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    overflow: hidden;
}

.scwp-multiselect-actions {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--scwp-gray-200);
    background: var(--scwp-gray-50);
}

.scwp-multiselect-actions a {
    font-size: 12px;
    color: var(--scwp-primary);
    text-decoration: none;
    cursor: pointer;
}

.scwp-multiselect-actions a:hover {
    text-decoration: underline;
}

.scwp-multiselect-lista {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 0;
}

.scwp-multiselect-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13.5px;
    color: var(--scwp-gray-700);
    cursor: pointer;
}

.scwp-multiselect-item:hover {
    background: var(--scwp-gray-50);
}

.scwp-multiselect-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.scwp-multiselect-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--scwp-gray-200);
    background: var(--scwp-gray-50);
    text-align: right;
}

.scwp-button-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.scwp-search-field {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.scwp-search-field .dashicons {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--scwp-gray-400);
    pointer-events: none;
}

.scwp-filter-input {
    width: 100%;
    height: 44px;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--scwp-gray-300);
    border-radius: var(--scwp-radius-sm);
    background: var(--scwp-white);
    color: var(--scwp-gray-700);
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scwp-filter-input:focus {
    outline: none;
    border-color: var(--scwp-primary);
    box-shadow: 0 0 0 3px var(--scwp-primary-soft);
}

/* ===== Clase para alinear elementos al final ===== */
.scwp-align-end {
    margin-left: auto;
    align-self: flex-end;
}

/* ===== Estilos generales para selects en todos los shortcodes ===== */
.scwp-frontend-container select,
.scwp-container select {
    height: 44px;
    padding: 12px 16px;
    line-height: 1.4;
    font-size: 14px;
}

/* ===== Colores de texto para valores ===== */
.scwp-text-success { color: var(--scwp-green-600) !important; }
.scwp-text-danger { color: var(--scwp-red-600) !important; }
.scwp-text-primary { color: var(--scwp-primary) !important; }
.scwp-text-warning { color: var(--scwp-warning) !important; }
.scwp-text-info { color: var(--scwp-info) !important; }
.scwp-text-muted { color: var(--scwp-gray-500) !important; }
.scwp-text-dark { color: var(--scwp-gray-800) !important; }
.scwp-text-center { text-align: center; }
.scwp-text-right { text-align: right; }

/* ===== Badges de estado para tipos de cuenta ===== */
.scwp-status-activo,
.scwp-status-activos { background: #dbeafe; color: #1e40af; }
.scwp-status-pasivo,
.scwp-status-pasivos { background: #fce7f3; color: #be185d; }
.scwp-status-patrimonio { background: #f3e8ff; color: #7c3aed; }
.scwp-status-ingreso,
.scwp-status-ingresos { background: #dcfce7; color: #15803d; }
.scwp-status-gasto,
.scwp-status-gastos { background: #ffedd5; color: #c2410c; }
.scwp-status-costo,
.scwp-status-costos { background: #fee2e2; color: #b91c1c; }

/* ===== Contenedor de Gráficos ===== */
.scwp-chart-container {
    background: var(--scwp-white);
    padding: 20px;
    border-radius: var(--scwp-radius);
    box-shadow: var(--scwp-shadow-sm);
    height: 400px;
    border: 1px solid var(--scwp-gray-200);
}

/* ===== Headers de Tarjetas ===== */
.scwp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    margin: -24px -24px 20px -24px;
    border-radius: 12px 12px 0 0;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.scwp-card-header-success {
    background: linear-gradient(135deg, var(--scwp-green-500), var(--scwp-green-600));
}

.scwp-card-header-danger {
    background: linear-gradient(135deg, var(--scwp-red-500), var(--scwp-red-600));
}

.scwp-card-header-primary {
    background: linear-gradient(135deg, var(--scwp-primary), var(--scwp-primary-dark));
}

.scwp-card-header-warning {
    background: linear-gradient(135deg, var(--scwp-warning), #d97706);
}

.scwp-card-body {
    padding: 0;
}

@media (max-width: 480px) {
    .scwp-menu-grid {
        grid-template-columns: 1fr;
    }
    
    .scwp-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Estilos para el Shortcode de Permisos
   ========================================================================== */

.scwp-permiso-categoria {
    margin-bottom: 24px;
}

.scwp-categoria-titulo {
    color: var(--scwp-primary);
    border-bottom: 2px solid var(--scwp-gray-200);
    padding-bottom: 10px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scwp-categoria-titulo .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.scwp-permisos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .scwp-permisos-grid {
        grid-template-columns: 1fr;
    }
}

.scwp-permiso-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--scwp-gray-50);
    border: 1px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius);
    cursor: pointer;
    transition: all var(--scwp-transition);
}

.scwp-permiso-item:hover {
    background: var(--scwp-white);
    border-color: var(--scwp-primary);
    box-shadow: var(--scwp-shadow-sm);
}

.scwp-permiso-item input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--scwp-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.scwp-permiso-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scwp-permiso-content strong {
    font-weight: 600;
    color: var(--scwp-gray-800);
    font-size: 14px;
}

.scwp-permiso-content small {
    color: var(--scwp-gray-500);
    font-size: 12px;
    line-height: 1.4;
}

.scwp-card-highlight {
    border-left: 4px solid var(--scwp-primary);
}

.scwp-row-active {
    background-color: var(--scwp-primary-light) !important;
}

.scwp-row-active td {
    background-color: var(--scwp-primary-light) !important;
}

/* Badges adicionales */
.scwp-badge-secondary {
    background: var(--scwp-gray-200);
    color: var(--scwp-gray-600);
}

/* Alineación de texto */
.scwp-text-center {
    text-align: center;
}

/* Responsive para permisos */
@media (max-width: 768px) {
    .scwp-permisos-grid {
        grid-template-columns: 1fr;
    }
    
    .scwp-permiso-item {
        padding: 12px;
    }
}

/* ==========================================================================
   Estilos adicionales para tablas y formularios
   ========================================================================== */

.scwp-table-hover tbody tr:hover {
    background-color: var(--scwp-gray-50);
}

.scwp-form-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.scwp-form-actions .scwp-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* ==========================================================================
   MENÚ LATERAL - Integrado con el plugin
   ========================================================================== */

/* Layout
   El corrimiento real lo hace "body" — funciona con cualquier tema, porque no
   depende de que el contenedor de la página se llame "#page", ".ast-container"
   o ".site-content" (eso es específico de Astra y algún otro tema). Ya NO se le
   pone margin-left también a "#page": como "#page" queda dentro de "body", sumar
   margen ahí duplicaría el corrimiento. ".ast-container"/".site-content" solo
   reciben un tope de max-width, porque Astra usa "width: 100vw" en algunos
   bloques internos, algo que el margin-left de "body" no alcanza a corregir. */
@media (min-width: 1025px) {
    body.has-scwp-menu {
        margin-left: 280px !important;
    }
    body.has-scwp-menu .ast-container,
    body.has-scwp-menu .site-content {
        max-width: calc(100vw - 280px) !important;
    }
}

@media (max-width: 1024px) {
    body.has-scwp-menu {
        margin-left: 0 !important;
    }
    body.has-scwp-menu .ast-container,
    body.has-scwp-menu .site-content {
        max-width: 100vw !important;
    }
}

/* Sidebar */
.scwp-menu-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    background: #1e3a8a !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: var(--scwp-shadow-lg);
    font-family: var(--scwp-font-sans);
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

@media (max-width: 1024px) {
    .scwp-menu-sidebar {
        display: none !important;
        width: min(85%, 300px);
        z-index: 99999;
    }
    .scwp-menu-sidebar.scwp-menu-open {
        display: flex !important;
    }
}

/* Mismas reglas que "@media (max-width: 1024px)" de arriba, pero activadas por
   JS (scwp-menu.js, clase en <body>) cuando el usuario hace zoom en el
   navegador: el ancho físico de la ventana sigue siendo "de escritorio" y la
   media query no se dispara, pero el menú debe verse igual de móvil. */
html body.scwp-menu-force-mobile .scwp-menu-sidebar {
    /* El "CSS de emergencia" más abajo (html body.has-scwp-menu .scwp-menu-sidebar)
       fija display:flex con más especificidad, así que display:none por sí solo
       no basta para ocultarlo: lo que realmente lo saca de pantalla en móvil
       (ver scwp-menu.css) es el transform, que no tiene ninguna regla en
       conflicto y por eso sí se aplica siempre. */
    width: min(85%, 300px) !important;
    z-index: 99999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
}
html body.scwp-menu-force-mobile .scwp-menu-sidebar.scwp-menu-open {
    transform: translateX(0) !important;
}
body.scwp-menu-force-mobile .scwp-menu-close {
    display: flex !important;
}

/* Header */
.scwp-menu-header {
    height: 60px !important;
    padding: 0 20px !important;
    background: #1e3a8a !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.scwp-menu-close {
    display: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: var(--scwp-radius-sm);
    color: var(--scwp-white);
    font-size: 24px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .scwp-menu-close { display: flex; }
}

.scwp-menu-close:hover {
    background: rgba(255,255,255,0.2);
}

.scwp-menu-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    width: 100% !important;
    height: 100% !important;
}

.scwp-menu-brand img {
    max-width: 160px;
    max-height: 50px;
    object-fit: contain;
}

.scwp-menu-site-name {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Navegación */
.scwp-menu-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #1e3a8a;
}

.scwp-menu-nav::-webkit-scrollbar {
    width: 4px;
}

.scwp-menu-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

.scwp-menu-list,
.scwp-menu-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}



/* Links del menú lateral */
.scwp-menu-sidebar .scwp-menu-list .scwp-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    text-align: left !important;
}

.scwp-menu-sidebar .scwp-menu-list .scwp-menu-link:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

.scwp-menu-sidebar .scwp-menu-active {
    background: rgba(255,255,255,0.2) !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.scwp-menu-sidebar .scwp-menu-active > .scwp-menu-link {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.scwp-menu-link-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scwp-menu-arrow {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    margin-left: 8px;
}

.scwp-menu-parent.scwp-menu-open > .scwp-menu-link .scwp-menu-arrow {
    transform: rotate(180deg);
    color: #ffffff;
}

.scwp-menu-submenu {
    display: none;
    padding-left: 16px;
    margin-top: 4px;
}

.scwp-menu-parent.scwp-menu-open > .scwp-menu-submenu {
    display: block;
}

.scwp-menu-sidebar .scwp-menu-submenu .scwp-menu-link {
    padding: 10px 20px 10px 32px !important;
    font-size: 13px !important;
    color: #bfdbfe !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    border: none !important;
}

.scwp-menu-sidebar .scwp-menu-submenu .scwp-menu-link:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.1) !important;
}

/* Botón hamburguesa */
.scwp-menu-toggle {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999999;
    width: 48px;
    height: 48px;
    background: var(--scwp-gray-900);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--scwp-radius);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    box-shadow: var(--scwp-shadow-lg);
}

@media (max-width: 1024px) {
    .scwp-menu-toggle {
        display: flex !important;
    }
}

.scwp-menu-toggle:hover {
    background: var(--scwp-primary);
    border-color: var(--scwp-primary);
}

.scwp-menu-bar {
    width: 22px;
    height: 2px;
    background: var(--scwp-white);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.scwp-menu-toggle.scwp-menu-active .scwp-menu-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.scwp-menu-toggle.scwp-menu-active .scwp-menu-bar:nth-child(2) {
    opacity: 0;
}

.scwp-menu-toggle.scwp-menu-active .scwp-menu-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Overlay */
.scwp-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 99998;
}

.scwp-menu-overlay.scwp-menu-open {
    display: block;
}

/* Menú vacío */
.scwp-menu-empty {
    padding: 24px !important;
    color: rgba(255,255,255,0.7) !important;
    text-align: center;
    font-size: 13px;
}

.scwp-menu-empty p {
    margin: 0 0 8px;
}


/* ==========================================================================
   CSS DE EMERGENCIA PARA MENÚ - Sobrescribe todo
   ========================================================================== */

/* Forzar menú lateral con máxima especificidad */
html body.has-scwp-menu .scwp-menu-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    background: #1e3a8a !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}

html body.has-scwp-menu .scwp-menu-sidebar * {
    box-sizing: border-box !important;
}

/* Header */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-header {
    height: 60px !important;
    padding: 0 20px !important;
    background: #1e3a8a !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    width: 100% !important;
    height: 100% !important;
    color: #ffffff !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-site-name {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-brand img {
    max-width: 160px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* Navegación */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: #1e3a8a !important;
    margin: 0 !important;
}

/* Items - Eliminar TODO estilo de cards */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-list,
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-submenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0 !important;
    display: block !important;
    width: 100% !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-item:hover {
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Links */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    text-align: left !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-link:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Activo */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-active {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0 !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-active > .scwp-menu-link {
    color: #ffffff !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Texto del link */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-link-text {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Flecha */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-arrow {
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,0.7) !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-parent.scwp-menu-open > .scwp-menu-link .scwp-menu-arrow {
    transform: rotate(180deg) !important;
    color: #ffffff !important;
}

/* Submenú */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-submenu {
    display: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    background: rgba(0,0,0,0.1) !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-parent.scwp-menu-open > .scwp-menu-submenu {
    display: block !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-submenu .scwp-menu-item {
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-submenu .scwp-menu-link {
    padding: 10px 20px 10px 40px !important;
    font-size: 13px !important;
    color: #bfdbfe !important;
    font-weight: 400 !important;
    border: none !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-submenu .scwp-menu-link:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.1) !important;
}

/* Submenú de un submenú (ej. Plan de Acción Anual > Administración): una
   sangría adicional para diferenciarlo de sus "tíos" (Dashboard de RH,
   Empleados, etc.), que cuelgan del mismo padre intermedio un nivel más
   arriba. Misma cadena de especificidad que la regla de arriba, con una
   clase más, para poder ganarle a ese !important. */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-submenu .scwp-menu-submenu .scwp-menu-link {
    padding-left: 56px !important;
}

/* Menú vacío */
html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-empty {
    padding: 24px !important;
    color: rgba(255,255,255,0.7) !important;
    text-align: center !important;
    font-size: 13px !important;
}

html body.has-scwp-menu .scwp-menu-sidebar .scwp-menu-empty p {
    margin: 0 0 8px !important;
}

/* ===== Tabs de Navegación ===== */

/* Contenido de tabs - MUY ESPECÍFICO para evitar conflictos */
.scwp-frontend-container .scwp-tab-content {
    display: none !important;
}

.scwp-frontend-container .scwp-tab-content.active {
    display: block !important;
}

/* Tabs nav container */
.scwp-tabs-nav {
    display: flex;
    gap: 4px;
    background: var(--scwp-gray-100);
    padding: 6px;
    border-radius: var(--scwp-radius);
    margin-bottom: 24px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.scwp-tab-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--scwp-gray-600);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--scwp-radius-sm);
    cursor: pointer;
    transition: all var(--scwp-transition-fast);
    white-space: nowrap;
}

.scwp-tab-link:hover {
    background: var(--scwp-white);
    color: var(--scwp-gray-800);
}

.scwp-tab-link.active {
    background: var(--scwp-white);
    color: var(--scwp-primary);
    box-shadow: var(--scwp-shadow-sm);
}

.scwp-tab-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Alias de ".scwp-tabs-nav/.scwp-tab-link": varias vistas del plugin usan
   ".scwp-tabs/.scwp-tab" (sin "-nav"/"-link") para el mismo componente de
   pestañas — se define igual para que se vean consistentes en todo el
   sistema en vez de aparecer como enlaces de texto plano sin estilo. */
.scwp-tabs {
    display: flex;
    gap: 4px;
    background: var(--scwp-gray-100);
    padding: 6px;
    border-radius: var(--scwp-radius);
    margin-bottom: 24px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.scwp-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--scwp-gray-600);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--scwp-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--scwp-transition-fast);
    white-space: nowrap;
}

.scwp-tab:hover {
    background: var(--scwp-white);
    color: var(--scwp-gray-800);
}

.scwp-tab.active {
    background: var(--scwp-white);
    color: var(--scwp-primary);
    font-weight: 600;
    box-shadow: var(--scwp-shadow-sm);
}

.scwp-tab .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ===== Icon Buttons ===== */
.scwp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--scwp-radius-sm);
    background: var(--scwp-gray-100);
    color: var(--scwp-gray-600);
    cursor: pointer;
    transition: all var(--scwp-transition-fast);
    text-decoration: none;
}

.scwp-icon-btn:hover {
    background: var(--scwp-gray-200);
    transform: translateY(-1px);
}

.scwp-icon-btn-success {
    background: var(--scwp-success-soft);
    color: var(--scwp-success);
}

.scwp-icon-btn-success:hover {
    background: var(--scwp-success);
    color: var(--scwp-white);
}

.scwp-icon-btn-danger {
    background: var(--scwp-danger-soft);
    color: var(--scwp-danger);
}

.scwp-icon-btn-danger:hover {
    background: var(--scwp-danger);
    color: var(--scwp-white);
}

.scwp-icon-btn-primary {
    background: var(--scwp-primary-soft);
    color: var(--scwp-primary);
}

.scwp-icon-btn-primary:hover {
    background: var(--scwp-primary);
    color: var(--scwp-white);
}

.scwp-icon-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ===== Actions Group ===== */
.scwp-actions-group {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* ===== Adjunto Icon ===== */
.scwp-adjunto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--scwp-gray-400);
}

.scwp-adjunto-icon.missing {
    opacity: 0.5;
}

/* ===== Status específicos para solicitudes ===== */
.scwp-status-pendiente {
    background: var(--scwp-warning-soft);
    color: var(--scwp-warning);
}

.scwp-status-proceso {
    background: var(--scwp-info-soft);
    color: var(--scwp-info);
}

/* ===== Badges adicionales ===== */
.scwp-badge-primary {
    background: var(--scwp-primary-soft);
    color: var(--scwp-primary);
}

.scwp-badge-warning {
    background: var(--scwp-warning-soft);
    color: var(--scwp-warning);
}

.scwp-badge-danger {
    background: var(--scwp-danger-soft);
    color: var(--scwp-danger);
}

.scwp-badge-success {
    background: var(--scwp-success-soft);
    color: var(--scwp-success);
}

/* ===== Empty State ===== */
.scwp-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--scwp-gray-500);
}

.scwp-empty-state .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: var(--scwp-gray-300);
    margin-bottom: 16px;
}

.scwp-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--scwp-gray-700);
    margin: 0 0 8px;
}

.scwp-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* ===== Form Rows ===== */
.scwp-form-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.scwp-form-row.scwp-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.scwp-form-row.scwp-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.scwp-form-row.scwp-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .scwp-form-row.scwp-cols-2,
    .scwp-form-row.scwp-cols-3,
    .scwp-form-row.scwp-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ===== Button Secondary ===== */
.scwp-button-secondary {
    background: var(--scwp-gray-200);
    color: var(--scwp-gray-700);
}

.scwp-button-secondary:hover {
    background: var(--scwp-gray-300);
    color: var(--scwp-gray-800);
}

/* ===== Form Actions ===== */
.scwp-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 24px;
}

/* ===== Description text ===== */
.description {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--scwp-gray-500);
}

/* ===== Utilidades adicionales ===== */
.scwp-cell-wrap {
    max-width: 300px;
}

.scwp-font-mono {
    font-family: var(--scwp-font-mono);
}

.scwp-inline-form {
    display: inline;
}

/* ===== Utilidades de espaciado ===== */
.scwp-ml-1 { margin-left: 8px !important; }
.scwp-ml-2 { margin-left: 12px !important; }
.scwp-ml-3 { margin-left: 16px !important; }

.scwp-mr-1 { margin-right: 8px !important; }
.scwp-mr-2 { margin-right: 12px !important; }

.scwp-mt-1 { margin-top: 8px !important; }
.scwp-mt-2 { margin-top: 16px !important; }
.scwp-mt-3 { margin-top: 24px !important; }

.scwp-mb-1 { margin-bottom: 8px !important; }
.scwp-mb-2 { margin-bottom: 16px !important; }

/* ===== Modal para Rechazo (usado en aprobaciones) ===== */
.scwp-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    /* Forzar que el modal esté por encima de todo, incluso dentro de contenedores transformados */
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    /* Asegurar que el modal cubra todo el viewport */
    margin: 0;
    border: none;
    outline: none;
}

.scwp-modal.active {
    display: flex !important;
}

.scwp-modal-box {
    background: var(--scwp-white);
    border-radius: var(--scwp-radius-lg);
    box-shadow: var(--scwp-shadow-xl);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

body.scwp-modal-abierto,
body.scwp-modal-open {
    overflow: hidden !important;
}

.scwp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--scwp-gray-200);
    background: var(--scwp-gray-50);
}

.scwp-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--scwp-gray-900);
}

.scwp-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--scwp-gray-400);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--scwp-radius-sm);
    transition: all var(--scwp-transition-fast);
}

.scwp-modal-close:hover {
    color: var(--scwp-gray-600);
    background: var(--scwp-gray-200);
}

.scwp-modal-body {
    padding: 24px;
}

.scwp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--scwp-gray-200);
    background: var(--scwp-gray-50);
}

/* ===== Card Grid ===== */
.scwp-cards-grid {
    display: grid;
    gap: 20px;
}

.scwp-cards-4 {
    grid-template-columns: repeat(4, 1fr);
}

.scwp-cards-3 {
    grid-template-columns: repeat(3, 1fr);
}

.scwp-cards-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    .scwp-cards-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .scwp-cards-4,
    .scwp-cards-3,
    .scwp-cards-2 {
        grid-template-columns: 1fr;
    }
}

.scwp-card {
    background: var(--scwp-white);
    border: 1px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius);
    padding: 20px;
    transition: all var(--scwp-transition);
}

.scwp-card:hover {
    box-shadow: var(--scwp-shadow-md);
    border-color: var(--scwp-gray-300);
}

/* ===== Textarea ===== */
.scwp-textarea,
textarea.scwp-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius-sm);
    font-size: 14px;
    color: var(--scwp-gray-700);
    background: var(--scwp-white);
    transition: all var(--scwp-transition);
    font-family: var(--scwp-font-sans);
    resize: vertical;
    min-height: 100px;
}

.scwp-textarea:focus,
textarea.scwp-input:focus {
    outline: none;
    border-color: var(--scwp-primary);
    box-shadow: 0 0 0 4px var(--scwp-primary-soft);
}

.scwp-textarea::placeholder {
    color: var(--scwp-gray-400);
}

/* ===== Status en proceso ===== */
.scwp-status-proceso,
.scwp-status-en-proceso {
    background: var(--scwp-info-soft);
    color: var(--scwp-info);
}

/* Alert variants */
.scwp-alert {
    padding: 16px 20px;
    border-radius: var(--scwp-radius);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.scwp-alert-warning {
    background: var(--scwp-warning-soft);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--scwp-warning);
}

/* ==========================================================================
   ESTILOS PARA LOGIN Y PERFIL DE USUARIO
   ========================================================================== */

/* ===== Login Moderno ===== */
.scwp-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--scwp-gray-100) 0%, var(--scwp-gray-200) 100%);
    border-radius: var(--scwp-radius-xl);
}

.scwp-login-box {
    background: var(--scwp-white);
    border: none;
    border-radius: var(--scwp-radius-lg);
    box-shadow: var(--scwp-shadow-xl);
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    position: relative;
    overflow: hidden;
}

.scwp-login-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--scwp-primary), var(--scwp-primary-light));
}

.scwp-login-box h2 {
    margin: 0 0 8px;
    text-align: center;
    color: var(--scwp-gray-900);
    font-size: 26px;
    font-weight: 700;
}

.scwp-login-subtitle {
    text-align: center;
    color: var(--scwp-gray-500);
    margin-bottom: 32px;
    font-size: 15px;
}

.scwp-login-form .scwp-form-group {
    margin-bottom: 20px;
}

.scwp-login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--scwp-gray-700);
    font-size: 14px;
}

.scwp-password-field {
    position: relative;
}

.scwp-password-field .scwp-input {
    padding-right: 32px;
}

/* Botón toggle password - alto especificidad para evitar conflictos */
.scwp-password-field .scwp-toggle-password,
.scwp-frontend-container .scwp-toggle-password,
button.scwp-toggle-password {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #9ca3af !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
}

.scwp-password-field .scwp-toggle-password:hover,
.scwp-password-field .scwp-toggle-password:focus,
.scwp-frontend-container .scwp-toggle-password:hover,
.scwp-frontend-container .scwp-toggle-password:focus,
button.scwp-toggle-password:hover,
button.scwp-toggle-password:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    outline: none !important;
}

.scwp-password-field .scwp-toggle-password .dashicons,
.scwp-frontend-container .scwp-toggle-password .dashicons,
button.scwp-toggle-password .dashicons {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0;
}

.scwp-login-links {
    text-align: center;
    margin-top: 24px;
}

.scwp-login-links a {
    color: var(--scwp-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.scwp-login-links a:hover {
    text-decoration: underline;
}

/* ===== Perfil de Usuario ===== */
.scwp-perfil-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--scwp-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 48px;
    color: var(--scwp-primary);
}

.scwp-perfil-info {
    text-align: center;
    margin-bottom: 32px;
}

.scwp-perfil-info h3 {
    margin: 0 0 4px;
    font-size: 20px;
    color: var(--scwp-gray-900);
}

.scwp-perfil-info p {
    margin: 0;
    color: var(--scwp-gray-500);
    font-size: 14px;
}

/* Checkbox y Radio groups */
.scwp-checkbox-group,
.scwp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
}

.scwp-checkbox-label,
.scwp-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--scwp-gray-700);
}

.scwp-checkbox-label input[type="checkbox"],
.scwp-radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Divider */
.scwp-divider {
    margin: 32px 0;
    border: none;
    border-top: 1px solid var(--scwp-gray-200);
}

/* Required field indicator */
.scwp-required {
    color: var(--scwp-danger);
    margin-left: 4px;
}

/* Spinning animation for loading states */
@keyframes scwp-spin {
    to {
        transform: rotate(360deg);
    }
}

.spinning {
    animation: scwp-spin 1s linear infinite;
    display: inline-block;
}

/* Responsive para login y perfil */
@media (max-width: 768px) {
    .scwp-login-container {
        padding: 20px 16px;
        min-height: auto;
    }
    
    .scwp-login-box {
        padding: 32px 24px;
    }
    
    .scwp-login-box h2 {
        font-size: 22px;
    }
}


/* ===== Columna Cargo - Truncar texto largo ===== */
.scwp-cargo-cell {
    max-width: 150px !important;
    width: 150px !important;
    min-width: 150px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.scwp-text-truncate {
    display: inline-block !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Asegurar que la tabla de empleados no se desborde */
.scwp-empleados-list .scwp-table,
#tabla-empleados {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Ancho específico para la columna Cargo */
.scwp-empleados-list .scwp-table th:nth-child(5),
.scwp-empleados-list .scwp-table td:nth-child(5),
#tabla-empleados th:nth-child(5),
#tabla-empleados td:nth-child(5) {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    overflow: hidden !important;
}


/* ==========================================================================
   ESTILOS PARA MODAL DE CONFIGURACIÓN DE CAMPOS DE PERFIL
   ========================================================================== */

/* Secciones dentro del modal */
.scwp-modal-seccion {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--scwp-gray-200);
}

.scwp-modal-seccion:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.scwp-modal-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--scwp-gray-700);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--scwp-primary-soft);
}

.scwp-modal-seccion-titulo .dashicons {
    color: var(--scwp-primary);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Sección de condiciones destacada */
.scwp-modal-seccion-condiciones {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 16px;
    border-radius: var(--scwp-radius);
    border: 1px solid var(--scwp-gray-200);
}

/* Checkbox moderno */
.scwp-checkbox-modern-label {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    color: var(--scwp-gray-700);
}

.scwp-checkbox-modern-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.scwp-checkbox-checkmark {
    width: 20px;
    height: 20px;
    background: var(--scwp-white);
    border: 2px solid var(--scwp-gray-300);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--scwp-transition-fast);
    flex-shrink: 0;
}

.scwp-checkbox-modern-label:hover .scwp-checkbox-checkmark {
    border-color: var(--scwp-primary);
}

.scwp-checkbox-modern-label input[type="checkbox"]:checked + .scwp-checkbox-checkmark {
    background: var(--scwp-primary);
    border-color: var(--scwp-primary);
}

.scwp-checkbox-checkmark::after {
    content: '\f147';
    font-family: 'Dashicons';
    font-size: 14px;
    color: var(--scwp-white);
    opacity: 0;
    transition: opacity var(--scwp-transition-fast);
}

.scwp-checkbox-modern-label input[type="checkbox"]:checked + .scwp-checkbox-checkmark::after {
    opacity: 1;
}

.scwp-checkbox-text {
    font-size: 14px;
}

/* Scroll personalizado para el body del modal */
.scwp-modal-body::-webkit-scrollbar {
    width: 6px;
}

.scwp-modal-body::-webkit-scrollbar-track {
    background: var(--scwp-gray-100);
    border-radius: 3px;
}

.scwp-modal-body::-webkit-scrollbar-thumb {
    background: var(--scwp-gray-300);
    border-radius: 3px;
}

.scwp-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--scwp-gray-400);
}

/* Animación suave al abrir el modal */
.scwp-modal {
    transition: opacity 0.2s ease;
    opacity: 0;
}

.scwp-modal.active {
    opacity: 1;
    display: flex !important;
}

/* Asegurar que el backdrop cubra todo el viewport incluso con scroll */
.scwp-modal.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.scwp-modal.active .scwp-modal-box {
    animation: scwp-modal-appear 0.25s ease;
}

@keyframes scwp-modal-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive para el modal */
@media (max-width: 768px) {
    .scwp-modal-box {
        width: 95% !important;
        max-height: 90vh !important;
    }
    
    .scwp-modal-body {
        max-height: 70vh !important;
        padding: 16px !important;
    }
    
    .scwp-modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }
    
    .scwp-modal-footer .scwp-button {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   Shortcode: Cumpleaños - Estilo Profesional SCWP
   (La mayoría de estilos están inline en la vista)
   ===================================================== */

/* ==========================================================================
   ESTILOS COMPARTIDOS PARA MENSAJERÍA Y OTROS MÓDULOS
   ========================================================================== */

/* Grid de 5 columnas */
.scwp-cards-5 {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Tab panels */
.scwp-tab-panel {
    display: block;
}

/* Tabs nav para frontend - estilo underline (usado en mensajería y admin) */
.scwp-tabs-wrap { margin-top: 0; }
.scwp-tabs-wrap .scwp-tabs-nav,
.scwp-mensajero-tabs {
    display: flex;
    border-bottom: 2px solid var(--scwp-gray-200);
    margin-bottom: 24px;
    gap: 0;
}
.scwp-tab-btn,
.mensajero-tab {
    padding: 12px 24px;
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--scwp-gray-500);
    cursor: pointer;
    transition: all var(--scwp-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.scwp-tab-btn:hover,
.mensajero-tab:hover {
    color: var(--scwp-gray-700);
    background: var(--scwp-gray-50);
    border-radius: var(--scwp-radius-sm) var(--scwp-radius-sm) 0 0;
}
.scwp-tab-btn.active,
.mensajero-tab.active {
    color: var(--scwp-primary);
    border-bottom-color: var(--scwp-primary);
}

/* Responsive tabs */
@media (max-width: 640px) {
    .scwp-tabs-wrap .scwp-tabs-nav,
    .scwp-mensajero-tabs { flex-wrap: wrap; }
    .scwp-tab-btn,
    .mensajero-tab { padding: 10px 16px; font-size: 13px; }
}

@media (max-width: 480px) {
    .scwp-cards-5 { grid-template-columns: 1fr; }
}

/* ===== Sub-tabs del perfil (scrollables en pantallas pequeñas) ===== */
.scwp-subtabs-nav {
    display: flex;
    gap: 2px;
    background: var(--scwp-gray-100);
    padding: 4px;
    border-radius: var(--scwp-radius);
    margin-bottom: 28px;
    overflow: visible;
    flex-wrap: wrap;
    scrollbar-width: none;
}
.scwp-subtabs-nav::-webkit-scrollbar { display: none; }

.scwp-subtab-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--scwp-gray-600);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--scwp-radius-sm);
    cursor: pointer;
    transition: all var(--scwp-transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.scwp-subtab-link:hover {
    background: var(--scwp-white);
    color: var(--scwp-gray-800);
}
.scwp-subtab-link.active {
    background: var(--scwp-white);
    color: var(--scwp-primary);
    box-shadow: var(--scwp-shadow-sm);
}
.scwp-subtab-link .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Solo icono; el nombre aparece como tooltip flotante debajo al pasar el cursor */
.scwp-subtab-label {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--scwp-gray-800, #1f2937);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--scwp-transition-fast), transform var(--scwp-transition-fast);
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.scwp-subtab-label::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--scwp-gray-800, #1f2937);
}
.scwp-subtab-link:hover .scwp-subtab-label,
.scwp-subtab-link:focus-visible .scwp-subtab-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.scwp-subtab-content { display: none; }
.scwp-subtab-content.active { display: block; }

@media (max-width: 600px) {
    .scwp-subtab-link { padding: 8px 10px; gap: 4px; }
}

/* ===== Detalle tabla y timeline (usados en modal perfil mensajería) ===== */
.scwp-detalle-tabla-wrap { margin-bottom: 16px; }
.scwp-detalle-tabla { width: 100%; border-collapse: collapse; }
.scwp-detalle-tabla td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--scwp-gray-100);
    font-size: 14px;
    color: var(--scwp-gray-700);
    vertical-align: top;
}
.scwp-detalle-tabla td:first-child {
    width: 140px;
    color: var(--scwp-gray-500);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.scwp-timeline {
    position: relative;
    padding-left: 24px;
    margin-top: 16px;
}
.scwp-timeline::before {
    content: '';
    position: absolute;
    left: 8px; top: 0; bottom: 0;
    width: 2px;
    background: var(--scwp-gray-200);
}
.scwp-timeline .timeline-item { position: relative; margin-bottom: 16px; }
.scwp-timeline .timeline-dot {
    position: absolute;
    left: -20px; top: 4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--scwp-primary);
    border: 2px solid var(--scwp-white);
    box-shadow: 0 0 0 2px var(--scwp-primary);
}
.scwp-timeline .timeline-estado { margin-bottom: 4px; }
.scwp-timeline .timeline-meta { font-size: 12px; color: var(--scwp-gray-400); margin-top: 2px; }
.scwp-timeline .timeline-comentario {
    font-size: 13px;
    color: var(--scwp-gray-600);
    margin-top: 4px;
    padding: 8px 12px;
    background: var(--scwp-gray-50);
    border-radius: var(--scwp-radius-sm);
    border-left: 3px solid var(--scwp-primary-soft);
}

/* ===== Modal de Detalle de Mensajería — diseño profesional ===== */
.scwp-msj-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 18px;
    border-bottom: 1px solid var(--scwp-gray-100);
    margin-bottom: 20px;
}
.scwp-msj-modal-numero {
    font-size: 13px;
    font-weight: 700;
    color: var(--scwp-gray-500);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.scwp-msj-modal-titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--scwp-gray-900);
    flex: 1;
}
.scwp-msj-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
.scwp-msj-info-item {
    background: var(--scwp-gray-50);
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--scwp-gray-100);
}
.scwp-msj-info-item.full { grid-column: 1 / -1; }
.scwp-msj-info-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--scwp-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}
.scwp-msj-info-value {
    font-size: 14px;
    color: var(--scwp-gray-800);
    font-weight: 500;
}
.scwp-lista-viñetas {
    margin: 0;
    padding-left: 20px;
}
.scwp-lista-viñetas li {
    margin-bottom: 4px;
}
.scwp-lista-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.scwp-lista-toolbar .scwp-lista-formato {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid var(--scwp-gray-300);
    border-radius: 6px;
    background: var(--scwp-gray-50, #f9fafb);
    color: var(--scwp-gray-700, #374151);
    cursor: pointer;
}
.scwp-lista-toolbar .scwp-lista-formato:hover {
    background: var(--scwp-gray-100, #f3f4f6);
}
/* ===== Tabla de Perfiles de Puesto: botones de acción a solo ícono ===== */
.scwp-acciones-iconos {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.scwp-btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--scwp-gray-200);
    background: var(--scwp-white);
    color: var(--scwp-gray-500);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.scwp-btn-icono .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
}
.scwp-btn-icono:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.scwp-puesto-ver.scwp-btn-icono:hover {
    background: var(--scwp-primary-soft);
    border-color: var(--scwp-primary);
    color: var(--scwp-primary);
}
.scwp-puesto-editar.scwp-btn-icono:hover {
    background: #fff7e6;
    border-color: #f0b429;
    color: #b45309;
}

/* ===== Tabla de Perfiles de Puesto: visual más pulido ===== */
#scwp-puesto-admin .scwp-table-responsive {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
#scwp-puesto-admin .scwp-table th {
    background: var(--scwp-gray-100);
}
#scwp-puesto-admin .scwp-table tbody tr {
    transition: background-color 0.15s ease;
}
#scwp-puesto-admin .scwp-table tbody tr:hover {
    background-color: var(--scwp-gray-50);
}
#scwp-puesto-admin .scwp-table td:last-child,
#scwp-puesto-admin .scwp-table th:last-child {
    text-align: right;
}

.scwp-lista-toolbar .scwp-lista-formato .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
}
/* Editor de listas (funciones/requisitos del perfil de puesto): un
   contenteditable con listas HTML reales, para que el navegador maneje
   nativamente el "Enter continúa la lista" y la sangría francesa de Word
   en todas las líneas envueltas, no solo la primera. */
.scwp-editor-lista {
    width: 100%;
    min-height: 100px;
    max-height: 280px;
    overflow-y: auto;
    padding: 12px 16px;
    border: 2px solid var(--scwp-gray-200);
    border-radius: var(--scwp-radius-sm);
    font-size: 14px;
    line-height: 1.6;
    color: var(--scwp-gray-700);
    background: var(--scwp-white);
}
.scwp-editor-lista:focus {
    outline: none;
    border-color: var(--scwp-primary);
    box-shadow: 0 0 0 4px var(--scwp-primary-soft);
}
.scwp-editor-lista:empty:before {
    content: attr(data-placeholder);
    color: var(--scwp-gray-400);
}
.scwp-editor-lista ul,
.scwp-editor-lista ol {
    margin: 0;
    padding-left: 22px;
}
.scwp-editor-lista li {
    margin-bottom: 4px;
}
.scwp-editor-lista div,
.scwp-editor-lista p {
    margin: 0;
}
.scwp-msj-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--scwp-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 20px 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.scwp-msj-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--scwp-gray-100);
}

/* ===== Tracking stepper ===== */
.scwp-tracking { padding: 4px 0; }
.scwp-tracking-step {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 20px;
}
.scwp-tracking-step:last-child { padding-bottom: 0; }
.scwp-tracking-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: 0;
    width: 2px;
    background: var(--scwp-gray-200);
}
.scwp-tracking-step.completed:not(:last-child)::before { background: #22c55e; }
.scwp-tracking-step.current:not(:last-child)::before { background: linear-gradient(to bottom, var(--scwp-primary) 0%, var(--scwp-gray-200) 100%); }

.scwp-tracking-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    z-index: 1;
    position: relative;
    transition: all 0.2s;
}
.scwp-tracking-step.pending .scwp-tracking-icon {
    background: var(--scwp-gray-100);
    border: 2px solid var(--scwp-gray-200);
    color: var(--scwp-gray-400);
    font-size: 12px;
}
.scwp-tracking-step.completed .scwp-tracking-icon {
    background: #22c55e;
    border: 2px solid #22c55e;
    color: #fff;
}
.scwp-tracking-step.current .scwp-tracking-icon {
    background: var(--scwp-primary);
    border: 2px solid var(--scwp-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.2);
}
.scwp-tracking-step.rejected .scwp-tracking-icon,
.scwp-tracking-step.cancelled .scwp-tracking-icon {
    background: var(--scwp-danger);
    border: 2px solid var(--scwp-danger);
    color: #fff;
}

.scwp-tracking-content {
    flex: 1;
    padding-top: 6px;
    min-width: 0;
}
.scwp-tracking-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--scwp-gray-400);
    line-height: 1.3;
}
.scwp-tracking-step.completed .scwp-tracking-label { color: var(--scwp-gray-700); }
.scwp-tracking-step.current .scwp-tracking-label {
    color: var(--scwp-primary);
    font-size: 14px;
}
.scwp-tracking-step.rejected .scwp-tracking-label,
.scwp-tracking-step.cancelled .scwp-tracking-label { color: var(--scwp-danger); }

.scwp-tracking-meta {
    font-size: 11px;
    color: var(--scwp-gray-400);
    margin-top: 2px;
}
.scwp-tracking-comentario {
    font-size: 12px;
    color: var(--scwp-gray-600);
    margin-top: 6px;
    padding: 7px 10px;
    background: var(--scwp-gray-50);
    border-radius: 6px;
    border-left: 3px solid #22c55e;
}
.scwp-tracking-step.current .scwp-tracking-comentario { border-left-color: var(--scwp-primary); }
.scwp-tracking-step.rejected .scwp-tracking-comentario,
.scwp-tracking-step.cancelled .scwp-tracking-comentario { border-left-color: var(--scwp-danger); }

@media (max-width: 500px) {
    .scwp-msj-info-grid { grid-template-columns: 1fr; }
    .scwp-msj-info-item.full { grid-column: 1; }
}

/* ============================================================
   Botones — estilo unificado en todo el plugin
   Se aplica a cualquier botón dentro de un contenedor scwp-* para
   que todos los módulos (Empleados, Documentos, Flujos, Normativas,
   Perfil, etc.) compartan la misma sensación: esquinas redondeadas,
   transición suave y una pequeña elevación al pasar el mouse, en vez
   del look plano/cuadrado por defecto de los botones de WordPress.
   No toca botones de solo ícono (dashicons sin texto) para no romper
   kebabs/cierres ya estilizados por módulo.
   ============================================================ */
.scwp-frontend-container button:not(.scwp-tn-icon):not(.scwp-doc-fe-modal-close):not(.scwp-modal-close):not(.scwp-vista-btn),
.scwp-frontend-container .button:not(.scwp-tn-icon),
.scwp-frontend-container input[type="submit"],
.scwp-frontend-container input[type="button"],
[class*="scwp-"] .scwp-btn,
[class*="scwp-"] .scwp-btn-primary,
[class*="scwp-"] .scwp-btn-secondary,
[class*="scwp-"] .scwp-btn-danger,
[class*="scwp-"] .scwp-doc-fe-btn-primary,
[class*="scwp-"] .scwp-doc-fe-btn {
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease !important;
}

.scwp-frontend-container button:not(.scwp-tn-icon):not(.scwp-doc-fe-modal-close):not(.scwp-modal-close):not(.scwp-vista-btn):hover,
.scwp-frontend-container .button:not(.scwp-tn-icon):hover,
.scwp-frontend-container input[type="submit"]:hover,
.scwp-frontend-container input[type="button"]:hover,
[class*="scwp-"] .scwp-btn:hover,
[class*="scwp-"] .scwp-btn-primary:hover,
[class*="scwp-"] .scwp-btn-secondary:hover,
[class*="scwp-"] .scwp-btn-danger:hover,
[class*="scwp-"] .scwp-doc-fe-btn-primary:hover,
[class*="scwp-"] .scwp-doc-fe-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px);
}

.scwp-frontend-container button:not(.scwp-tn-icon):active,
.scwp-frontend-container .button:not(.scwp-tn-icon):active,
.scwp-frontend-container input[type="submit"]:active,
.scwp-frontend-container input[type="button"]:active,
[class*="scwp-"] .scwp-btn:active,
[class*="scwp-"] .scwp-btn-primary:active,
[class*="scwp-"] .scwp-btn-secondary:active,
[class*="scwp-"] .scwp-btn-danger:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.scwp-frontend-container button:disabled,
.scwp-frontend-container .button:disabled,
[class*="scwp-"] .scwp-btn:disabled,
[class*="scwp-"] .scwp-btn-primary:disabled {
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.6;
}