/* ============================================================
   REWIND LAB — CSS Bridge: AdminLTE/Bootstrap → TailAdmin/Tailwind
   Archivo puente para migrar componentes custom al nuevo stack.
   Carga DESPUES de tailwind.css para sobreescribir tokens de TailAdmin.
   ============================================================ */

/* --- Base body reset (Outfit font + antialiasing) --- */
body {
    font-family: var(--font-outfit, 'Outfit', 'Inter', system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar sutil para sidebar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Alpine x-cloak: ocultar hasta que Alpine inicialice */
[x-cloak] { display: none !important; }

/* ============================================================
   GLOBAL TABLE STYLES — TailAdmin look
   Aplica a todas las tablas .w-full para aspecto consistente
   ============================================================ */
table.w-full { border-collapse: collapse; }
table.w-full thead th {
    padding: 0.75rem 1.25rem;  /* py-3 px-5 — coincide con TailAdmin */
    text-align: left;
    font-size: 0.75rem;        /* text-theme-xs = 12px */
    font-weight: 500;          /* font-medium */
    color: #6b7280;            /* gray-500 */
    border-bottom: 1px solid #f3f4f6; /* gray-100 */
    white-space: nowrap;
}
.dark table.w-full thead th { color: #9ca3af; border-color: #1f2937; }
table.w-full tbody td {
    padding: 1rem 1.25rem;     /* py-4 px-5 — coincide con TailAdmin */
    font-size: 0.875rem;       /* text-theme-sm = 14px */
    color: #1f2937;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.dark table.w-full tbody td { color: rgba(255,255,255,.9); border-color: #1f2937; }
table.w-full tbody tr:hover { background: #f9fafb; }
.dark table.w-full tbody tr:hover { background: rgba(255,255,255,.02); }

/* Tablas equilibradas: evita que la columna principal se coma todo el ancho */
table.rw-balanced-table {
    width: 100%;
    table-layout: fixed;
}
table.rw-balanced-table thead th,
table.rw-balanced-table tbody td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
table.rw-balanced-table.rw-balanced-table--main-first thead th:first-child,
table.rw-balanced-table.rw-balanced-table--main-first tbody td:first-child {
    width: clamp(180px, 24%, 340px);
}
table.rw-balanced-table.rw-balanced-table--actions-last thead th:last-child,
table.rw-balanced-table.rw-balanced-table--actions-last tbody td:last-child {
    width: clamp(84px, 8%, 132px);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
table.rw-balanced-table.rw-balanced-table--actions-last tbody td:last-child > * {
    white-space: nowrap;
}

/* Tablas con overflow scroll */
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   1. TAILADMIN BRAND COLOR REMAP → Naranja RewindLab #F07030
   TailAdmin usa --color-brand-500 (azul por defecto).
   Aqui lo sobreescribimos con la paleta naranja corporativa.
   ============================================================ */
:root {
    /* Remapeo brand → naranja RewindLab */
    --color-brand-50: #fef4ee;
    --color-brand-100: #fce5d5;
    --color-brand-200: #f9c9a8;
    --color-brand-300: #f5a472;
    --color-brand-400: #F07030;
    --color-brand-500: #F07030;
    --color-brand-600: #d55f24;
    --color-brand-700: #b04d1c;
    --color-brand-800: #8c3e17;
    --color-brand-950: #4a1e09;

    /* --- Paleta primaria (naranja Doc4) --- */
    --rw-orange-50: #fef4ee;
    --rw-orange-100: #fce5d5;
    --rw-orange-200: #f9c9a8;
    --rw-orange-300: #f5a472;
    --rw-orange-400: #F07030;
    --rw-orange-500: #F07030;
    --rw-orange-600: #d55f24;
    --rw-orange-700: #b04d1c;

    /* --- Neutrales (escala de grises) --- */
    --rw-zinc-25: #FAFAFA;
    --rw-zinc-50: #FAFAFA;
    --rw-zinc-100: #F5F5F5;
    --rw-zinc-150: #F0F0F0;
    --rw-zinc-200: #E8E8E8;
    --rw-zinc-300: #D4D4D4;
    --rw-zinc-400: #A3A3A3;
    --rw-zinc-500: #6B6B6B;
    --rw-zinc-600: #525252;
    --rw-zinc-700: #404040;
    --rw-zinc-800: #262626;
    --rw-zinc-900: #1A1A1A;
    --rw-zinc-950: #0A0A0A;

    /* --- Acentos semanticos (pasteles suaves) --- */
    --rw-green-50: #f0fdf4;
    --rw-green-100: #dcfce7;
    --rw-green-400: #86efac;
    --rw-green-500: #4ade80;
    --rw-green-600: #22c55e;
    --rw-green-700: #15803d;
    --rw-red-50: #fef2f2;
    --rw-red-100: #fee2e2;
    --rw-red-400: #fca5a5;
    --rw-red-500: #f87171;
    --rw-red-600: #ef4444;
    --rw-red-700: #b91c1c;
    --rw-amber-50: #fffbeb;
    --rw-amber-100: #fef3c7;
    --rw-amber-400: #fcd34d;
    --rw-amber-500: #fbbf24;
    --rw-amber-600: #f59e0b;
    --rw-amber-700: #92400e;
    --rw-blue-50: #eff6ff;
    --rw-blue-100: #dbeafe;
    --rw-blue-400: #93c5fd;
    --rw-blue-500: #60a5fa;
    --rw-blue-600: #3b82f6;
    --rw-violet-50: #f5f3ff;
    --rw-violet-100: #ede9fe;
    --rw-violet-400: #c4b5fd;
    --rw-violet-500: #a78bfa;
    --rw-violet-600: #8b5cf6;
    --rw-cyan-50: #ecfeff;
    --rw-cyan-400: #67e8f9;
    --rw-cyan-500: #22d3ee;

    /* --- Tokens semanticos (light mode) --- */
    --rw-bg-app: #FFFFFF;
    --rw-bg-surface: #FFFFFF;
    --rw-bg-surface-raised: #FFFFFF;
    --rw-bg-surface-overlay: #FFFFFF;
    --rw-bg-subtle: #FAFAFA;
    --rw-bg-muted: #F5F5F5;
    --rw-bg-accent: #fef4ee;
    --rw-border: #E8E8E8;
    --rw-border-subtle: #F0F0F0;
    --rw-border-strong: #D4D4D4;
    --rw-text-primary: #1A1A1A;
    --rw-text-secondary: #6B6B6B;
    --rw-text-tertiary: #A3A3A3;
    --rw-text-on-primary: #ffffff;
    --rw-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
    --rw-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --rw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --rw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --rw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --rw-ring-primary: 0 0 0 2px #fff, 0 0 0 4px var(--rw-orange-400);
    --rw-ring-danger: 0 0 0 2px #fff, 0 0 0 4px var(--rw-red-400);

    /* --- Tipografia --- */
    --rw-font-sans: 'Outfit', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --rw-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    --rw-text-xs: 0.75rem;
    --rw-leading-xs: 1rem;
    --rw-text-sm: 0.8125rem;
    --rw-leading-sm: 1.25rem;
    --rw-text-base: 0.875rem;
    --rw-leading-base: 1.375rem;
    --rw-text-md: 0.9375rem;
    --rw-leading-md: 1.5rem;
    --rw-text-lg: 1.0625rem;
    --rw-leading-lg: 1.625rem;
    --rw-text-xl: 1.125rem;
    --rw-leading-xl: 1.75rem;
    --rw-text-2xl: 1.375rem;
    --rw-leading-2xl: 1.875rem;
    --rw-text-3xl: 1.75rem;
    --rw-leading-3xl: 2.25rem;
    --rw-text-4xl: 2.25rem;
    --rw-leading-4xl: 2.75rem;

    /* --- Spacing (escala de 4px) --- */
    --rw-sp-1: 4px;
    --rw-sp-2: 8px;
    --rw-sp-3: 12px;
    --rw-sp-4: 16px;
    --rw-sp-5: 20px;
    --rw-sp-6: 24px;
    --rw-sp-8: 32px;
    --rw-sp-10: 40px;
    --rw-sp-12: 48px;
    --rw-sp-16: 64px;

    /* --- Bordes --- */
    --rw-radius-sm: 6px;
    --rw-radius-md: 8px;
    --rw-radius-lg: 12px;
    --rw-radius-xl: 16px;
    --rw-radius-2xl: 20px;
    --rw-radius-full: 9999px;

    /* --- Transiciones --- */
    --rw-transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);
    --rw-transition-base: 200ms cubic-bezier(.4, 0, .2, 1);
    --rw-transition-slow: 300ms cubic-bezier(.4, 0, .2, 1);

    /* --- Layout --- */
    --rw-sidebar-width: 272px;
    --rw-sidebar-collapsed: 0px;
    --rw-topbar-height: 56px;
    --rw-sidebar-bg: #1c2434;
}

/* ============================================================
   2. DARK MODE TOKENS
   Usa .dark (convencion TailAdmin) en lugar de [data-bs-theme="dark"]
   ============================================================ */
.dark {
    --rw-bg-app: #0f172a;
    --rw-bg-surface: #1e293b;
    --rw-bg-surface-raised: #1e293b;
    --rw-bg-surface-overlay: #334155;
    --rw-bg-subtle: #1e293b;
    --rw-bg-muted: #0f172a;
    --rw-bg-accent: #1c1408;
    --rw-border: #334155;
    --rw-border-subtle: #1e293b;
    --rw-border-strong: #475569;
    --rw-text-primary: #f1f5f9;
    --rw-text-secondary: #94a3b8;
    --rw-text-tertiary: #64748b;
    --rw-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .3);
    --rw-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .4), 0 1px 2px -1px rgb(0 0 0 / .4);
    --rw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .4);
    --rw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .4);
    --rw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .4), 0 8px 10px -6px rgb(0 0 0 / .4);
}

/* ============================================================
   3. TYPOGRAPHY — Clases que NO existen en Tailwind
   ============================================================ */
.rw-text-xs   { font-size: var(--rw-text-xs);   line-height: var(--rw-leading-xs); }
.rw-text-sm   { font-size: var(--rw-text-sm);   line-height: var(--rw-leading-sm); }
.rw-text-base { font-size: var(--rw-text-base); line-height: var(--rw-leading-base); }
.rw-text-md   { font-size: var(--rw-text-md);   line-height: var(--rw-leading-md); }
.rw-text-lg   { font-size: var(--rw-text-lg);   line-height: var(--rw-leading-lg); }
.rw-text-xl   { font-size: var(--rw-text-xl);   line-height: var(--rw-leading-xl); }
.rw-text-2xl  { font-size: var(--rw-text-2xl);  line-height: var(--rw-leading-2xl); }
.rw-text-3xl  { font-size: var(--rw-text-3xl);  line-height: var(--rw-leading-3xl); }
.rw-text-4xl  { font-size: var(--rw-text-4xl);  line-height: var(--rw-leading-4xl); }

.rw-text-muted         { color: var(--rw-text-secondary); }
.rw-text-faint         { color: var(--rw-text-tertiary); }
.rw-text-primary-color { color: var(--rw-orange-500); }
.rw-font-semibold      { font-weight: 600; }
.rw-font-bold          { font-weight: 700; }
.rw-font-mono          { font-family: var(--rw-font-mono); }
.rw-uppercase          { text-transform: uppercase; letter-spacing: .05em; font-weight: 500; font-size: var(--rw-text-xs); }

/* ============================================================
   4. STAT CARDS (KPIs / Metricas)
   ============================================================ */
.stat-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
}
.stat-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.dark .stat-card { background: rgba(255,255,255,.03); border-color: #1f2937; }
.stat-label {
    display: block;
    font-size: var(--rw-text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rw-text-tertiary);
    margin-bottom: var(--rw-sp-2);
}
.stat-value {
    font-size: var(--rw-text-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--rw-text-primary);
    line-height: 1;
}
.stat-sub {
    font-size: var(--rw-text-xs);
    color: var(--rw-text-tertiary);
    margin-top: var(--rw-sp-1);
}
.stat-icon {
    position: absolute;
    top: var(--rw-sp-5);
    right: var(--rw-sp-5);
    width: 40px;
    height: 40px;
    border-radius: var(--rw-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--rw-bg-subtle);
    color: var(--rw-text-tertiary);
}

/* Variantes de color */
.stat-card--orange .stat-icon { background: var(--rw-orange-50); color: var(--rw-orange-500); }
.stat-card--blue .stat-icon   { background: var(--rw-blue-50);   color: var(--rw-blue-500); }
.stat-card--green .stat-icon  { background: var(--rw-green-50);  color: var(--rw-green-500); }
.stat-card--red .stat-icon    { background: var(--rw-red-50);    color: var(--rw-red-500); }
.stat-card--violet .stat-icon { background: var(--rw-violet-50); color: var(--rw-violet-500); }
.stat-card--amber .stat-icon  { background: var(--rw-amber-50);  color: var(--rw-amber-500); }

.dark .stat-card--orange .stat-icon { background: rgba(240, 112, 48, .08); }
.dark .stat-card--blue .stat-icon   { background: rgba(59, 130, 246, .08); }
.dark .stat-card--green .stat-icon  { background: rgba(34, 197, 94, .08); }
.dark .stat-card--red .stat-icon    { background: rgba(239, 68, 68, .08); }
.dark .stat-card--violet .stat-icon { background: rgba(139, 92, 246, .08); }
.dark .stat-card--amber .stat-icon  { background: rgba(245, 158, 11, .08); }

/* ============================================================
   5. AVATARS — circulos con iniciales
   ============================================================ */
.rw-avatar,
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}
.rw-avatar-sm,
.avatar-sm {
    width: 26px;
    height: 26px;
    font-size: 10px;
}
.avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 15px;
}
.avatar-xl {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

/* ============================================================
   6. SEMAFORO — indicador de salud (circulo de color)
   ============================================================ */
.semaforo {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.semaforo-lg {
    width: 12px;
    height: 12px;
}

/* ============================================================
   7. PROGRESS BARS
   ============================================================ */
.rw-progress {
    height: 4px;
    background: var(--rw-zinc-150);
    border-radius: 2px;
    overflow: hidden;
}
.dark .rw-progress {
    background: var(--rw-zinc-800);
}
.rw-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width .4s ease;
    background: var(--rw-orange-400);
}

/* ============================================================
   8. KANBAN BOARD
   ============================================================ */
.kanban-board {
    display: flex;
    gap: var(--rw-sp-4);
    overflow-x: auto;
    padding-bottom: var(--rw-sp-2);
}
.kanban-col {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
}
.kanban-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-weight: 600;
    font-size: var(--rw-text-sm);
    background: var(--rw-bg-subtle);
    border-top: 2px solid;
    border-radius: var(--rw-radius-lg) var(--rw-radius-lg) 0 0;
    border-bottom: 1px solid var(--rw-border);
}
.kanban-col-body {
    flex: 1;
    background: var(--rw-bg-subtle);
    border: 1px solid var(--rw-border);
    border-top: none;
    border-radius: 0 0 var(--rw-radius-lg) var(--rw-radius-lg);
    padding: var(--rw-sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--rw-sp-2);
    min-height: 120px;
}
.kanban-col-dragover {
    background: var(--rw-blue-50);
    border-color: var(--rw-blue-400);
}
.kanban-card {
    background: var(--rw-bg-surface);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: box-shadow var(--rw-transition-fast);
}
.kanban-card:hover {
    box-shadow: var(--rw-shadow-sm);
}
.kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ============================================================
   9. CALENDAR GRID
   ============================================================ */
.cal-grid-mes {
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-lg);
    overflow: hidden;
}
.cal-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--rw-border);
}
.cal-grid-header > div {
    padding: 8px;
    text-align: center;
    font-size: var(--rw-text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rw-text-tertiary);
    background: var(--rw-bg-subtle);
}
.cal-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-grid-dia {
    min-height: 100px;
    border-right: 1px solid var(--rw-border-subtle);
    border-bottom: 1px solid var(--rw-border-subtle);
    padding: 4px;
    transition: background var(--rw-transition-fast);
}
.cal-grid-dia:nth-child(7n) {
    border-right: none;
}
.cal-grid-dia:hover {
    background: var(--rw-bg-subtle);
}
.cal-grid-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: var(--rw-radius-sm);
    margin-bottom: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    background: var(--rw-bg-subtle);
    border: 1px solid var(--rw-border-subtle);
    transition: background var(--rw-transition-fast);
}
.cal-grid-item:hover {
    background: var(--rw-blue-50);
    border-color: var(--rw-blue-400);
}

/* Calendario personal */
.cal-personal .card {
    border-left: 2px solid var(--rw-violet-400);
}
.cal-personal .cal-td-today {
    background: var(--rw-violet-50) !important;
}
.cal-td-today {
    background: var(--rw-amber-50);
}
.cal-td-festivo {
    background: var(--rw-amber-50);
}

/* Planning chips */
.plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--rw-radius-sm);
    font-size: var(--rw-text-xs);
    border: 1px solid var(--rw-border);
    background: var(--rw-bg-surface);
    cursor: grab;
    user-select: none;
    transition: box-shadow var(--rw-transition-fast);
}
.plan-chip:active {
    cursor: grabbing;
    box-shadow: var(--rw-shadow-md);
}

/* ============================================================
   10. AI CHAT PANEL
   ============================================================ */
.rw-ai-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: var(--rw-orange-500);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--rw-shadow-lg);
    z-index: 1060;
    border: none;
    transition: background var(--rw-transition-fast);
}
.rw-ai-bubble:hover {
    background: var(--rw-orange-600);
}

.ai-chat-panel {
    position: fixed;
    bottom: 84px;
    right: 24px;
    width: 400px;
    height: 520px;
    background: var(--rw-bg-surface);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-xl);
    box-shadow: var(--rw-shadow-xl);
    z-index: 1061;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.ai-chat-panel.open {
    display: flex;
    animation: slideUp .2s ease;
}
.ai-chat-header {
    background: var(--rw-orange-500);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.ai-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--rw-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--rw-sp-3);
    background: var(--rw-bg-muted);
}
.ai-chat-msg {
    display: flex;
    max-width: 85%;
}
.ai-chat-msg.user-msg {
    align-self: flex-end;
}
.ai-chat-msg.ai-msg {
    align-self: flex-start;
}
.ai-chat-msg-text {
    padding: 10px 14px;
    border-radius: var(--rw-radius-xl);
    font-size: var(--rw-text-sm);
    line-height: 1.55;
    word-break: break-word;
}
.user-msg .ai-chat-msg-text {
    background: var(--rw-orange-500);
    color: #fff;
    border-bottom-right-radius: var(--rw-sp-1);
}
.ai-msg .ai-chat-msg-text {
    background: var(--rw-bg-surface);
    border: 1px solid var(--rw-border);
    border-bottom-left-radius: var(--rw-sp-1);
}
.ai-thinking {
    display: inline-flex;
    gap: 4px;
    color: var(--rw-text-tertiary);
    font-style: italic;
}
.ai-thinking::after {
    content: '';
    animation: dots 1.5s infinite;
}
.ai-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--rw-border);
    background: var(--rw-bg-surface);
    flex-shrink: 0;
}
.rw-ai-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rw-orange-500);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--rw-transition-fast);
}
.rw-ai-send:hover {
    background: var(--rw-orange-600);
}
.ai-chat-btn.grabando,
.btn-dictado.grabando,
button.grabando {
    border-color: rgba(239, 68, 68, .35) !important;
    background: rgba(239, 68, 68, .12) !important;
    color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.ai-chat-btn.grabando i,
.btn-dictado.grabando i,
button.grabando i {
    color: #dc2626 !important;
}

/* AI Action cards */
.ai-action-card {
    background: var(--rw-orange-50);
    border: 1px solid var(--rw-orange-200);
    border-left: 3px solid var(--rw-orange-500);
    border-radius: var(--rw-radius-md);
    padding: 12px;
    margin-top: 4px;
}
.dark .ai-action-card {
    background: rgba(240, 112, 48, .05);
    border-color: rgba(240, 112, 48, .15);
}
.btn-ai-execute {
    flex: 1;
    padding: 7px 12px;
    border: none;
    border-radius: var(--rw-radius-md);
    font-size: var(--rw-text-xs);
    font-weight: 500;
    cursor: pointer;
    background: var(--rw-green-50);
    color: var(--rw-green-600);
    transition: background var(--rw-transition-fast);
}
.btn-ai-execute:hover {
    background: var(--rw-green-500);
    color: #fff;
}
.btn-ai-cancel {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    font-size: var(--rw-text-xs);
    cursor: pointer;
    background: var(--rw-bg-surface);
    color: var(--rw-text-secondary);
}
.ai-action-result {
    font-size: var(--rw-text-xs);
    padding: 4px 8px;
    border-radius: var(--rw-radius-sm);
}
.ai-action-success {
    color: var(--rw-green-600);
    background: var(--rw-green-50);
}
.ai-action-error {
    color: var(--rw-red-500);
    background: var(--rw-red-50);
}

/* ============================================================
   11. TRANSCRIPTION PANEL
   ============================================================ */
.transcripcion-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1070;
}
.transcripcion-overlay.open {
    display: block;
}
.transcripcion-panel {
    position: fixed;
    top: 0;
    right: -600px;
    width: 580px;
    height: 100vh;
    background: var(--rw-bg-surface);
    box-shadow: var(--rw-shadow-xl);
    z-index: 1071;
    display: flex;
    flex-direction: column;
    transition: right var(--rw-transition-slow);
}
.transcripcion-panel.open {
    right: 0;
}
.transcripcion-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rw-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tr-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
}
.transcripcion-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--rw-sp-4);
}
.tr-segmentos {
    display: flex;
    flex-direction: column;
    gap: var(--rw-sp-2);
}
.tr-interim {
    color: var(--rw-text-tertiary);
    font-style: italic;
    font-size: var(--rw-text-sm);
    padding: var(--rw-sp-2) 0;
}

/* ============================================================
   12. HELP PANEL (Ayuda)
   ============================================================ */
.ayuda-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 999998;
}
.ayuda-overlay.open {
    display: block;
}
.ayuda-panel {
    position: fixed;
    top: 0;
    right: -900px;
    width: 860px;
    max-width: 100vw;
    height: 100vh;
    background: var(--rw-bg-surface);
    box-shadow: var(--rw-shadow-xl);
    z-index: 999999;
    display: flex;
    transition: right var(--rw-transition-slow);
}
.ayuda-panel.open {
    right: 0;
}
.ayuda-sidebar {
    width: 240px;
    border-right: 1px solid var(--rw-border);
    display: flex;
    flex-direction: column;
    background: var(--rw-bg-muted);
}
.ayuda-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.ayuda-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--rw-text-secondary);
    text-decoration: none;
    font-size: var(--rw-text-sm);
    transition: all var(--rw-transition-fast);
}
.ayuda-nav-item:hover {
    background: var(--rw-bg-subtle);
    color: var(--rw-text-primary);
}
.ayuda-nav-item.active {
    color: var(--rw-orange-600);
    font-weight: 500;
    background: var(--rw-orange-50);
}
.ayuda-contenido {
    flex: 1;
    overflow-y: auto;
    padding: var(--rw-sp-6);
}
.ayuda-contenido h3 {
    font-size: var(--rw-text-lg);
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 20px;
}
.ayuda-contenido h4 {
    font-size: var(--rw-text-md);
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 16px;
}
.ayuda-contenido p,
.ayuda-contenido li {
    font-size: var(--rw-text-sm);
    line-height: 1.7;
}
.ayuda-tip {
    background: var(--rw-orange-50);
    border-left: 2px solid var(--rw-orange-400);
    padding: 10px 14px;
    border-radius: 0 var(--rw-radius-sm) var(--rw-radius-sm) 0;
    font-size: var(--rw-text-sm);
    margin: 12px 0;
}

/* ============================================================
   13. CLIENT SEARCH (Buscador de clientes)
   ============================================================ */
.rw-client-search {
    position: relative;
    flex: 0 1 280px;
}
.rw-client-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--rw-bg-subtle);
    border: 1px solid transparent;
    border-radius: var(--rw-radius-md);
    transition: all var(--rw-transition-fast);
}
.rw-client-search-box:focus-within {
    background: var(--rw-bg-surface);
    border-color: var(--rw-border);
    box-shadow: var(--rw-shadow-sm);
}
.rw-client-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--rw-text-sm);
    width: 100%;
    padding: 0;
    color: var(--rw-text-primary);
}
.rw-client-search-box input::placeholder {
    color: var(--rw-text-tertiary);
}

/* Dropdown clientes */
.cliente-switcher-dropdown {
    /* display controlado por JS (.open) o Alpine (x-show) */
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--rw-bg-surface);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-lg);
    box-shadow: var(--rw-shadow-lg);
    z-index: 1050;
    max-height: 340px;
    overflow-y: auto;
}
.cliente-switcher-dropdown.open {
    display: block;
    animation: fadeDown .12s ease;
}
.cliente-switcher-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--rw-border-subtle);
    transition: background var(--rw-transition-fast);
}
.cliente-switcher-item:hover,
.cliente-switcher-item.active {
    background: var(--rw-bg-subtle);
}

/* ============================================================
   14. NOTIFICATIONS DROPDOWN
   ============================================================ */
.notif-dropdown {
    /* position: fixed + coords via JS para escapar del overflow-hidden del contenedor */
    position: fixed;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--rw-bg-surface);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-xl);
    box-shadow: var(--rw-shadow-lg);
    z-index: 99999;
    max-height: 440px;
    overflow: hidden;
}
.notif-dropdown.open {
    display: block;
    animation: fadeDown .12s ease;
}
.notif-dropdown-body {
    max-height: 370px;
    overflow-y: auto;
}
.notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--rw-border-subtle);
    transition: background var(--rw-transition-fast);
}
.notif-item:hover {
    background: var(--rw-bg-subtle);
}
.notif-item.notif-leida {
    opacity: .4;
}
.notif-item-icon {
    font-size: 18px;
    flex-shrink: 0;
    color: var(--rw-orange-500);
}
.notif-item-body {
    flex: 1;
    min-width: 0;
}
.notif-item-msg {
    font-size: var(--rw-text-sm);
    line-height: 1.5;
}
.notif-item-time {
    font-size: var(--rw-text-xs);
    color: var(--rw-text-tertiary);
    margin-top: 4px;
}

/* ============================================================
   15. DARK MODE TOGGLE
   ============================================================ */
.rw-darkmode-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--rw-radius-md);
    transition: background var(--rw-transition-fast);
}
.rw-darkmode-toggle:hover {
    background: var(--rw-bg-subtle);
}
.rw-dm-switch {
    width: 36px;
    height: 20px;
    background: var(--rw-zinc-300);
    border-radius: 10px;
    position: relative;
    transition: background var(--rw-transition-base);
}
.rw-dm-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--rw-transition-base);
    box-shadow: var(--rw-shadow-xs);
}
.dark .rw-dm-switch {
    background: var(--rw-orange-500);
}
.dark .rw-dm-switch::after {
    transform: translateX(16px);
}

/* ============================================================
   16. TIMER BADGE
   ============================================================ */
.rw-timer-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--rw-green-50);
    border: 1px solid var(--rw-green-400);
    color: var(--rw-green-700);
    padding: 4px 12px;
    border-radius: var(--rw-radius-full);
    font-size: var(--rw-text-sm);
    font-weight: 600;
    font-family: var(--rw-font-mono);
}
.dark .rw-timer-badge {
    background: rgba(34, 197, 94, .08);
    border-color: rgba(34, 197, 94, .25);
    color: var(--rw-green-400);
}

/* ============================================================
   17. MONTH INPUT
   ============================================================ */
.rw-month-input {
    width: auto !important;
    max-width: 140px;
    font-weight: 500 !important;
    color: var(--rw-orange-600) !important;
    background: var(--rw-orange-50) !important;
    border-color: var(--rw-orange-200) !important;
    font-size: var(--rw-text-xs) !important;
    border-radius: var(--rw-radius-md) !important;
}
.dark .rw-month-input {
    background: rgba(240, 112, 48, .08) !important;
    border-color: rgba(240, 112, 48, .2) !important;
}

/* ============================================================
   18. SIDEBAR USER
   ============================================================ */
.rw-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.rw-sidebar-user-name {
    color: #e2e8f0;
    font-size: var(--rw-text-sm);
    font-weight: 500;
}
.rw-sidebar-user-role {
    color: var(--rw-zinc-500);
    font-size: var(--rw-text-xs);
}

/* ============================================================
   19. BRAND (Sidebar logo)
   ============================================================ */
.rw-brand-icon {
    width: 32px;
    height: 32px;
    background: var(--rw-orange-500);
    color: #fff;
    border-radius: var(--rw-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.rw-brand-name {
    color: #f1f5f9;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
}
.rw-brand-sub {
    color: var(--rw-zinc-500);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   20. TABS — linea horizontal con scroll
   ============================================================ */
.rw-tabs-single-line {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    border-bottom: 1px solid var(--rw-border);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.rw-tabs-single-line::-webkit-scrollbar {
    display: none;
}
.rw-tabs-single-line .nav-link {
    white-space: nowrap;
    font-size: var(--rw-text-sm);
    font-weight: 400;
    color: var(--rw-text-secondary);
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all var(--rw-transition-fast);
    flex-shrink: 0;
}
.rw-tabs-single-line .nav-link:hover {
    color: var(--rw-text-primary);
}
.rw-tabs-single-line .nav-link.active {
    color: var(--rw-orange-500);
    border-bottom-color: var(--rw-orange-500);
    font-weight: 500;
}

/* ============================================================
   21. FILES / UPLOADS (Archivos)
   ============================================================ */
.archivos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--rw-sp-3);
}
.archivo-card {
    position: relative;
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    padding: 12px 8px 8px;
    text-align: center;
    background: var(--rw-bg-surface);
    transition: all var(--rw-transition-fast);
}
.archivo-card:hover {
    border-color: var(--rw-border-strong);
    box-shadow: var(--rw-shadow-xs);
}
.archivo-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rw-red-400);
    opacity: 0;
    transition: opacity var(--rw-transition-fast);
}
.archivo-card:hover .archivo-delete {
    opacity: 1;
}
.archivo-preview {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: var(--rw-radius-sm);
    margin-bottom: 6px;
}
.archivo-icon {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 6px;
}
.archivo-nombre {
    font-size: var(--rw-text-xs);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archivo-meta {
    font-size: 10px;
    color: var(--rw-text-tertiary);
    margin-top: 2px;
}

/* ============================================================
   22. ACTAS (Meeting notes)
   ============================================================ */
.acta-body-collapsible {
    display: none;
}
.acta-body-collapsible.acta-expanded {
    display: block;
}
.acta-contenido {
    font-size: var(--rw-text-sm);
    line-height: 1.7;
    margin-bottom: 12px;
    white-space: pre-wrap;
}
.acta-tareas {
    border-top: 1px solid var(--rw-border);
    padding-top: 12px;
}

/* ============================================================
   23. LOADING STATES
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg,
        var(--rw-zinc-100) 25%,
        var(--rw-zinc-200) 50%,
        var(--rw-zinc-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--rw-radius-sm);
}
.dark .skeleton {
    background: linear-gradient(90deg,
        var(--rw-zinc-800) 25%,
        var(--rw-zinc-700) 50%,
        var(--rw-zinc-800) 75%);
    background-size: 200% 100%;
}
.empty-state {
    text-align: center;
    padding: var(--rw-sp-16) var(--rw-sp-6);
    color: var(--rw-text-tertiary);
}
.empty-state h3 {
    font-size: var(--rw-text-lg);
    font-weight: 600;
    color: var(--rw-text-secondary);
    margin-bottom: var(--rw-sp-2);
}
.empty-state p {
    font-size: var(--rw-text-sm);
    max-width: 360px;
    margin: 0 auto;
}

/* ============================================================
   24. SORTABLE TABLES
   ============================================================ */
.dt-sortable {
    cursor: pointer;
    user-select: none;
}
.dt-sortable:hover {
    color: var(--rw-text-primary);
}
.dt-sort-icon {
    opacity: .3;
    font-size: 12px;
}
.dt-row {
    cursor: pointer;
}

/* ============================================================
   25. ANIMATIONS (@keyframes)
   ============================================================ */
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Alias con prefijo rw- */
@keyframes rw-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rw-fadeDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rw-slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}
@keyframes rw-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}

@keyframes dots {
    0%, 20%  { content: '.'; }
    40%      { content: '..'; }
    60%, 100% { content: '...'; }
}
@keyframes rw-dots {
    0%, 20%  { content: '.'; }
    40%      { content: '..'; }
    60%, 100% { content: '...'; }
}

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

/* ============================================================
   26. RESPONSIVE — Paneles y componentes custom
   ============================================================ */
@media (max-width: 768px) {
    .ai-chat-panel {
        width: calc(100% - 32px);
        right: 16px;
        bottom: 76px;
        height: 60vh;
    }
    .rw-ai-bubble {
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
    .transcripcion-panel,
    .ayuda-panel {
        width: 100%;
    }
    .stat-value {
        font-size: var(--rw-text-2xl);
    }
    .kanban-col {
        flex: 0 0 200px;
    }
}

/* ============================================================
   27. PRINT
   ============================================================ */
@media print {
    .rw-ai-bubble,
    .ai-chat-panel,
    .transcripcion-overlay,
    .transcripcion-panel,
    .ayuda-overlay,
    .ayuda-panel {
        display: none !important;
    }
}

/* ============================================================
   28. CLASES FALTANTES — portadas desde style.css
   ============================================================ */

/* Info label (producciones, detalle) */
.info-label {
    display: block;
    font-size: var(--rw-text-xs);
    color: var(--rw-text-tertiary);
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: .04em;
}

/* Kanban sub-componentes */
.kanban-count {
    background: var(--rw-bg-surface);
    border: 1px solid var(--rw-border);
    padding: 1px 8px;
    border-radius: var(--rw-radius-full);
    font-size: var(--rw-text-xs);
    font-weight: 600;
}
.kanban-card-title { font-weight: 500; font-size: var(--rw-text-sm); margin-bottom: 4px; }
.kanban-card-meta  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--rw-text-xs); }

/* Calendario — eventos pill, add btn, hoverable */
.cal-event-pill {
    display: block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 5px;
    border-radius: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: white;
    line-height: 1.4;
}
.cal-event-pill.dragging { opacity: .5; cursor: grabbing; }
.cal-td-hoverable:hover { background: #F9FAFB; }
.dark .cal-td-hoverable:hover { background: rgba(255,255,255,.02); }
.cal-add-btn {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #F07030;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 18px;
    text-align: center;
    border: none;
}
.cal-td-hoverable:hover .cal-add-btn { display: inline-flex; }
.cal-festivo-label { font-size: 9px; color: var(--rw-amber-600); font-weight: 500; display: block; line-height: 1.2; }
.cal-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cal-table th { padding: 10px 4px; font-size: var(--rw-text-xs); font-weight: 500; text-align: center; border-bottom: 1px solid var(--rw-border); }
.cal-table td { vertical-align: top; padding: 6px; height: 130px; border: 1px solid var(--rw-border-subtle); }
/* Sáb y Dom más estrechos — Lun-Vie ganan espacio */
.cal-table colgroup .cal-col-weekday { width: 16%; }
.cal-table colgroup .cal-col-weekend { width: 10%; }
.cal-table td:nth-child(6), .cal-table td:nth-child(7),
.cal-table th:nth-child(6), .cal-table th:nth-child(7) { padding: 6px 3px; }
/* Popup de día completo */
.cal-day-popup { position: absolute; z-index: 50; min-width: 260px; max-width: 340px; max-height: 320px; overflow-y: auto; background: white; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 12px; }
.dark .cal-day-popup { background: #1f2937; border-color: #374151; }
.cal-day-popup-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #1a1a1a; }
.dark .cal-day-popup-title { color: #e5e7eb; }
/* +N más clickeable */
.cal-more-link { cursor: pointer; font-size: 11px; font-weight: 500; color: #F07030; }
.cal-more-link:hover { text-decoration: underline; }

/* Tareas — badges de prioridad */
.tarea-badge { font-size: var(--rw-text-xs); padding: 2px 8px; border-radius: var(--rw-radius-full); font-weight: 500; }
.prioridad-alta  { background: var(--rw-red-50);   color: var(--rw-red-500); }
.prioridad-media { background: var(--rw-amber-50); color: var(--rw-amber-500); }
.prioridad-baja  { background: var(--rw-zinc-100); color: var(--rw-text-secondary); }
.dark .prioridad-alta  { background: rgba(239,68,68,.12);  color: #fca5a5; }
.dark .prioridad-media { background: rgba(245,158,11,.12); color: #fcd34d; }
.dark .prioridad-baja  { background: rgba(100,116,139,.12); color: #94a3b8; }

/* Task list (mi_trabajo, tareas) */
.rw-tasklist { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rw-tasklist thead th { padding: 8px 12px; font-size: var(--rw-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--rw-text-tertiary); border-bottom: 1px solid var(--rw-border); }
.rw-tasklist tbody tr { border-bottom: 1px solid var(--rw-border-subtle); }
.rw-tasklist tbody tr:hover { background: #F9FAFB; }
.dark .rw-tasklist tbody tr:hover { background: rgba(255,255,255,.02); }
.rw-tasklist td { padding: 6px 12px; font-size: var(--rw-text-sm); vertical-align: middle; overflow-wrap: anywhere; word-break: break-word; }
.rw-tasklist thead th:first-child,
.rw-tasklist tbody td:first-child { width: clamp(200px, 26%, 360px); }
.rw-tasklist thead th:last-child,
.rw-tasklist tbody td:last-child { width: clamp(88px, 10%, 140px); white-space: nowrap; }
.rw-task-num  { color: #F07030; font-weight: 600; font-size: var(--rw-text-sm); margin-right: 6px; }
.rw-task-name { font-weight: 400; font-size: var(--rw-text-sm); }
.rw-task-date { color: #6B6B6B; font-size: var(--rw-text-xs); cursor: pointer; }
.rw-task-date:hover { color: #F07030; }
.rw-task-actions { opacity: 0; display: flex; gap: 4px; transition: opacity var(--rw-transition-fast); }
.rw-tasklist tr:hover .rw-task-actions { opacity: 1; }
.rw-task-expand { cursor: pointer; color: #A3A3A3; font-size: 12px; transition: transform .2s; }
.rw-task-expand.open { transform: rotate(90deg); }

/* Panel tareas */
#pt-tabla { overflow-x: auto; }
.pt-grid-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 84px 170px 184px 184px 148px 60px 78px;
    align-items: center;
    width: 100%;
}
.pt-grid-row > * { min-width: 0; }
.pt-col-task { min-width: 0; }
.pt-col-time,
.pt-col-priority,
.pt-col-notes { justify-self: center; }
.pt-col-notes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.pt-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: #94a3b8;
    transition: background .15s ease, color .15s ease;
}
.pt-order-btn:hover {
    background: rgba(240,112,48,.1);
    color: #F07030;
}
.pt-col-assigned,
.pt-col-state { min-width: 0; }
.pt-col-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pt-date-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0;
    min-width: 0;
}
.pt-col-date input[type="date"],
.pt-date-input {
    width: 100%;
    min-width: 0;
}
.pt-date-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: rgba(255,255,255,.92);
    color: #94a3b8;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.pt-date-trigger:hover {
    border-color: rgba(240,112,48,.3);
    color: #F07030;
    background: #fff;
}
.flatpickr-calendar {
    z-index: 1000000;
}
.dark .pt-date-trigger {
    border-color: #374151;
    background: rgba(17,24,39,.92);
    color: #94a3b8;
}
.dark .pt-date-trigger:hover {
    border-color: rgba(240,112,48,.35);
    color: #fdba74;
    background: rgba(31,41,55,.96);
}

/* Ayuda — aviso y faq */
.ayuda-aviso {
    background: var(--rw-orange-50);
    border-left: 3px solid var(--rw-orange-400);
    padding: 10px 14px;
    border-radius: 0 var(--rw-radius-sm) var(--rw-radius-sm) 0;
    font-size: var(--rw-text-sm);
    margin: 12px 0;
    color: var(--rw-text-primary);
}
.dark .ayuda-aviso { background: rgba(240,112,48,.08); }
.ayuda-faq {
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-md);
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: var(--rw-text-sm);
}
.dark .ayuda-faq { border-color: #1f2937; }

/* ============================================================
   COMPAT — Bootstrap utilities que faltan en TailAdmin
   me/ms (margin-end/start), text-danger, text-success, etc.
   ============================================================ */
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.me-3 { margin-right: 0.75rem; }
.ms-1 { margin-left: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }
.ms-3 { margin-left: 0.75rem; }
.ms-auto { margin-left: auto; }
.pe-1 { padding-right: 0.25rem; }
.pe-2 { padding-right: 0.5rem; }
.ps-1 { padding-left: 0.25rem; }
.ps-2 { padding-left: 0.5rem; }
.text-success { color: #22c55e; }
.text-danger  { color: #ef4444; }
.text-warning { color: #f59e0b; }
.text-info    { color: #06b6d4; }
.text-muted   { color: #6b7280; }
.dark .text-success { color: #4ade80; }
.dark .text-danger  { color: #f87171; }
.dark .text-warning { color: #fbbf24; }
.dark .text-muted   { color: #9ca3af; }
.text-reset { color: inherit; }
.mb-0 { margin-bottom: 0 !important; }

/* ============================================================
   29. BADGE ESTADO — para clientes/entidades con estado
   ============================================================ */
.badge-activo {
    background: var(--rw-green-50);
    color: var(--rw-green-700, #15803d);
}
.badge-pausado {
    background: var(--rw-amber-50);
    color: var(--rw-amber-700, #92400e);
}
.badge-finalizado {
    background: var(--rw-red-50);
    color: var(--rw-red-700, #b91c1c);
}
.badge-puntual {
    background: var(--rw-blue-50);
    color: var(--rw-blue-600, #3b82f6);
}
.dark .badge-activo   { background: rgba(34,197,94,.12);  color: #4ade80; }
.dark .badge-pausado  { background: rgba(245,158,11,.12); color: #fcd34d; }
.dark .badge-finalizado { background: rgba(239,68,68,.12); color: #fca5a5; }
.dark .badge-puntual  { background: rgba(96,165,250,.12); color: #93c5fd; }

/* ============================================================
   29. RW-SECTION-TITLE — titulo de sección dentro de una página
   ============================================================ */
.rw-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}
.dark .rw-section-title { color: #6b7280; }

/* Cliente > Shootings */
.rw-shootings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
}
.rw-shootings-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
}
.rw-shootings-title h6,
.rw-shootings-title span {
    white-space: nowrap;
}
.rw-shootings-card {
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--rw-border);
    border-radius: 8px;
    background: var(--rw-bg-surface);
}
.dark .rw-shootings-card {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}
.rw-shootings-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.rw-shootings-table {
    min-width: 760px;
    table-layout: fixed;
}
.rw-shootings-col-name { width: 34%; }
.rw-shootings-col-type { width: 13%; }
.rw-shootings-col-status { width: 14%; }
.rw-shootings-col-date { width: 12%; }
.rw-shootings-col-ops { width: 15%; }
.rw-shootings-col-actions { width: 12%; }
.rw-shooting-name-cell {
    min-width: 0;
}
.rw-shooting-name-line {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 2px;
    white-space: nowrap;
}
.rw-shooting-name-line .rw-task-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rw-shooting-progress {
    display: block;
    margin-top: 2px;
    margin-left: 26px;
    font-size: var(--rw-text-xs);
    color: var(--rw-text-tertiary);
}
.rw-shooting-actions {
    text-align: right;
}
.rw-shooting-actions-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}
.rw-shootings-delivered-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rw-border);
    opacity: .72;
}
.rw-shootings-delivered-row:last-child {
    border-bottom: 0;
}
@media (max-width: 640px) {
    .rw-shootings-header {
        align-items: stretch;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .rw-shootings-header > .relative,
    .rw-shootings-header button {
        width: 100%;
        justify-content: center;
    }
    .rw-shootings-table {
        min-width: 680px;
    }
}

/* ============================================================
   30. APP SHELL / LAYOUT
   ============================================================ */
.rw-app-shell {
    --rw-shell-inline-start: 10px;
    --rw-shell-inline-end: 10px;
    --rw-shell-max-width: none;
    --rw-shell-margin-left: 0;
    --rw-shell-margin-right: 0;
    background:
        radial-gradient(circle at top right, rgba(240, 112, 48, .06), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
@media (min-width: 768px) {
    .rw-app-shell {
        --rw-shell-inline-start: 14px;
        --rw-shell-inline-end: 14px;
    }
}
.dark .rw-app-shell {
    background:
        radial-gradient(circle at top right, rgba(240, 112, 48, .12), transparent 30%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
}
.sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
    box-shadow: 14px 0 40px rgba(15, 23, 42, .06);
}
.dark .sidebar {
    background:
        linear-gradient(180deg, rgba(3,7,18,.98) 0%, rgba(15,23,42,.98) 100%);
    box-shadow: 14px 0 40px rgba(0, 0, 0, .28);
}
.sidebar-header {
    border-bottom: 1px solid rgba(226, 232, 240, .72);
    margin-bottom: 12px;
}
.dark .sidebar-header { border-bottom-color: rgba(51, 65, 85, .72); }
.rw-topbar {
    position: sticky;
    top: 0;
    z-index: 99999;
    width: 100%;
    border-bottom: 1px solid rgba(226, 232, 240, .8);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255,255,255,.65), 0 8px 30px rgba(15, 23, 42, .04);
}
.dark .rw-topbar {
    border-bottom-color: rgba(51, 65, 85, .85);
    background: rgba(15, 23, 42, .82);
    box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 30px rgba(0, 0, 0, .2);
}
.rw-topbar-inner {
    width: 100%;
    max-width: var(--rw-shell-max-width);
    margin-left: var(--rw-shell-margin-left);
    margin-right: var(--rw-shell-margin-right);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px var(--rw-shell-inline-end) 12px var(--rw-shell-inline-start);
}
@media (min-width: 768px) {
    .rw-topbar-inner { padding-top: 14px; padding-bottom: 14px; }
}
@media (min-width: 1280px) {
    .rw-app-shell.rw-shell-collapsed {
        --rw-shell-max-width: none;
        --rw-shell-margin-left: 0;
        --rw-shell-margin-right: 0;
    }
}
.rw-topbar-leading { margin-left: -4px; }
@media (min-width: 1280px) {
    .rw-topbar-leading { margin-left: -6px; }
}
.rw-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: rgba(255,255,255,.88);
    color: #6b7280;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.rw-icon-btn:hover {
    border-color: rgba(240, 112, 48, .25);
    background: #fff;
    color: #F07030;
    transform: translateY(-1px);
}
.rw-icon-btn-square { border-radius: 14px; }
.dark .rw-icon-btn {
    border-color: #1f2937;
    background: rgba(15, 23, 42, .72);
    color: #94a3b8;
}
.dark .rw-icon-btn:hover {
    border-color: rgba(240, 112, 48, .28);
    background: rgba(30, 41, 59, .96);
    color: #fbbf24;
}
.rw-topbar-date {
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-size: 12px;
    color: #64748b;
}
.dark .rw-topbar-date { color: #94a3b8; }
.rw-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 10px 7px 8px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, .9);
    background: rgba(255,255,255,.82);
}
.dark .rw-user-pill {
    border-color: rgba(51, 65, 85, .9);
    background: rgba(15, 23, 42, .7);
}
.rw-user-pill-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.rw-user-pill-name {
    display: block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}
.rw-user-pill-role {
    display: block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    color: #64748b;
}
.dark .rw-user-pill-name { color: #f8fafc; }
.dark .rw-user-pill-role { color: #94a3b8; }
.rw-brand-link {
    display: inline-flex;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.rw-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.rw-brand-icon-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, .9);
    background: linear-gradient(180deg, #fff, #f8fafc);
}
.dark .rw-brand-icon-shell {
    border-color: rgba(51, 65, 85, .9);
    background: linear-gradient(180deg, #111827, #0f172a);
}
.rw-brand-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: invert(1) brightness(0);
}
.dark .rw-brand-logo { filter: none; }
.rw-brand-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #111827;
}
.rw-brand-caption {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}
.dark .rw-brand-title { color: #f8fafc; }
.dark .rw-brand-caption { color: #94a3b8; }
.rw-page-shell {
    width: 100%;
    max-width: var(--rw-shell-max-width);
    margin-left: var(--rw-shell-margin-left);
    margin-right: var(--rw-shell-margin-right);
    padding-left: var(--rw-shell-inline-start);
    padding-right: var(--rw-shell-inline-end);
}
.rw-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding: 22px 24px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}
.dark .rw-page-header {
    border-color: rgba(51, 65, 85, .9);
    background:
        linear-gradient(135deg, rgba(15,23,42,.92) 0%, rgba(17,24,39,.92) 100%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}
.rw-page-kicker-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.rw-page-kicker {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 5px 10px;
    background: rgba(240, 112, 48, .08);
    color: #d55f24;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.dark .rw-page-kicker {
    background: rgba(240, 112, 48, .12);
    color: #fdba74;
}
.rw-page-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.rw-page-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rw-page-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.04em;
    color: #0f172a;
}
.dark .rw-page-title { color: #f8fafc; }
.rw-page-subtitle {
    margin: 0;
    max-width: 780px;
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}
.dark .rw-page-subtitle { color: #94a3b8; }
.rw-page-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.rw-page-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 7px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}
.rw-page-chip-strong {
    background: rgba(240, 112, 48, .08);
    border-color: rgba(240, 112, 48, .18);
    color: #d55f24;
}
.dark .rw-page-chip {
    background: rgba(15, 23, 42, .66);
    border-color: #334155;
    color: #cbd5e1;
}
.dark .rw-page-chip-strong {
    background: rgba(240, 112, 48, .12);
    border-color: rgba(240, 112, 48, .22);
    color: #fdba74;
}
.rw-page-content { padding-bottom: 24px; }
.rw-workspace-tabs {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 0 8px;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
}
.dark .rw-workspace-tabs {
    border-bottom-color: rgba(51, 65, 85, .9);
}
.rw-workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 16px 16px 0 0;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.rw-workspace-tab:hover {
    color: #0f172a;
    background: rgba(255,255,255,.52);
}
.rw-workspace-tab-active {
    margin-bottom: -1px;
    border-color: rgba(226, 232, 240, .95);
    border-bottom-color: rgba(255,255,255,.98);
    background: rgba(255,255,255,.98);
    color: #F07030;
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .05);
}
.rw-workspace-tab-muted { color: #94a3b8; }
.dark .rw-workspace-tab { color: #94a3b8; }
.dark .rw-workspace-tab:hover {
    color: #f8fafc;
    background: rgba(255,255,255,.04);
}
.dark .rw-workspace-tab-active {
    border-color: rgba(51, 65, 85, .95);
    border-bottom-color: rgba(15, 23, 42, .98);
    background: rgba(15,23,42,.98);
    color: #fdba74;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .18);
}
.rw-toolbar-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 20px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .04);
}
.rw-toolbar-panel-tight {
    padding-top: 10px;
    padding-bottom: 10px;
}
.dark .rw-toolbar-panel {
    border-color: rgba(51, 65, 85, .9);
    background: rgba(15,23,42,.78);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
.rw-toolbar-panel .rw-workspace-tab {
    padding: 9px 14px;
    border-radius: 9999px;
}
.rw-toolbar-panel .rw-workspace-tab-active {
    margin-bottom: 0;
    border-bottom-color: rgba(226, 232, 240, .95);
}
.dark .rw-toolbar-panel .rw-workspace-tab-active {
    border-bottom-color: rgba(51, 65, 85, .95);
}
.rw-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rw-toolbar-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rw-toolbar-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #0f172a;
}
.dark .rw-toolbar-title { color: #f8fafc; }
.rw-toolbar-text {
    font-size: 12px;
    color: #64748b;
}
.dark .rw-toolbar-text { color: #94a3b8; }
.rw-toolbar-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 220px;
}
.rw-toolbar-search-sm {
    max-width: 260px;
}
.rw-toolbar-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
}
.rw-toolbar-input,
.rw-toolbar-select {
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(248,250,252,.92);
    color: #475569;
    font-size: 12px;
    outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.rw-toolbar-input {
    width: 100%;
    padding: 0 12px 0 48px;
}
.rw-toolbar-select {
    min-width: 118px;
    padding: 0 34px 0 12px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.rw-toolbar-input:focus,
.rw-toolbar-select:focus {
    border-color: rgba(240, 112, 48, .38);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(240, 112, 48, .08);
}
.dark .rw-toolbar-input,
.dark .rw-toolbar-select {
    border-color: #374151;
    background-color: rgba(255,255,255,.03);
    color: #cbd5e1;
}
.dark .rw-toolbar-input:focus,
.dark .rw-toolbar-select:focus {
    border-color: rgba(240, 112, 48, .45);
    background: rgba(255,255,255,.05);
}
.rw-toolbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}
.dark .rw-toolbar-meta { color: #94a3b8; }
.rw-surface-card {
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .05);
}
.dark .rw-surface-card {
    border-color: rgba(51, 65, 85, .9);
    background: rgba(15,23,42,.92);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}
.rw-page-content .rounded-2xl.border.border-gray-200.bg-white:not(.rw-surface-card) {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
    background: rgba(255,255,255,.96);
}
.dark .rw-page-content .rounded-2xl.border.border-gray-200.bg-white:not(.rw-surface-card) {
    background: rgba(15,23,42,.9);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
.rw-page-content .rounded-2xl.border.border-gray-200.bg-white:not(.rw-surface-card) > .border-b.border-gray-200.px-5.py-3 {
    padding: 14px 18px;
    background: rgba(248,250,252,.78);
    border-bottom-color: rgba(226, 232, 240, .82);
}
.dark .rw-page-content .rounded-2xl.border.border-gray-200.bg-white:not(.rw-surface-card) > .border-b.border-gray-200.px-5.py-3 {
    background: rgba(255,255,255,.02);
    border-bottom-color: rgba(51, 65, 85, .82);
}
.rw-surface-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, .82);
    background: rgba(248,250,252,.78);
    border-radius: 24px 24px 0 0;
}
.dark .rw-surface-card-header {
    border-bottom-color: rgba(51, 65, 85, .82);
    background: rgba(255,255,255,.02);
}
.rw-surface-card-body { padding: 16px 18px; }

#dt-smm-all_wrapper,
#dt-smm-all_wrapper .dt-layout-table,
#dt-smm-all_wrapper .dt-layout-cell,
#dt-smm-all_wrapper .dt-scroll,
#dt-smm-all_wrapper .dt-scroll-body {
    width: 100% !important;
}
#dt-smm-all.smm-all-table {
    width: 100% !important;
    table-layout: fixed !important;
}
#dt-smm-all.smm-all-table thead th,
#dt-smm-all.smm-all-table tbody td {
    padding: 8px 4px !important;
    white-space: normal;
}
#dt-smm-all.smm-all-table thead th:first-child,
#dt-smm-all.smm-all-table tbody td:first-child {
    width: 22% !important;
    padding-left: 12px !important;
    padding-right: 10px !important;
}
#dt-smm-all.smm-all-table thead th:not(:first-child):not(:last-child),
#dt-smm-all.smm-all-table tbody td:not(:first-child):not(:last-child) {
    width: auto !important;
    white-space: normal;
}
#dt-smm-all.smm-all-table thead th:last-child,
#dt-smm-all.smm-all-table tbody td:last-child {
    width: 18% !important;
    min-width: 180px !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
}
#dt-smm-all.smm-all-table tbody td:last-child .flex-1 {
    min-width: 110px;
}
#dt-smm-all.smm-all-table select[data-smm-all-estado] {
    min-width: 0;
    width: 100%;
    height: 24px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rw-side-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: calc(100vw - 20px);
    height: 100vh;
    padding: 24px;
    z-index: 1050;
    overflow-y: auto;
    transition: right .3s ease;
    border-left: 1px solid rgba(226, 232, 240, .9);
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
    box-shadow: -18px 0 48px rgba(15, 23, 42, .12);
}
.dark .rw-side-panel {
    border-left-color: rgba(51, 65, 85, .9);
    background: linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(17,24,39,.98) 100%);
    box-shadow: -18px 0 48px rgba(0, 0, 0, .24);
}
.rw-side-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .34);
    backdrop-filter: blur(2px);
    z-index: 1049;
}
.rw-side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.rw-side-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #0f172a;
}
.dark .rw-side-title { color: #f8fafc; }
.rw-side-close {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
}
.dark .rw-side-close {
    border-color: #374151;
    background: rgba(255,255,255,.03);
    color: #94a3b8;
}
.rw-side-field { margin-bottom: 16px; }
.rw-side-label {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.dark .rw-side-label { color: #94a3b8; }
.rw-side-input,
.rw-side-textarea,
.rw-side-select {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(248,250,252,.92);
    color: #334155;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
}
.rw-side-textarea { resize: vertical; min-height: 96px; }
.rw-side-select { appearance: none; }
.rw-side-input:focus,
.rw-side-textarea:focus,
.rw-side-select:focus {
    border-color: rgba(240, 112, 48, .4);
    box-shadow: 0 0 0 3px rgba(240,112,48,.08);
    background: #fff;
}
.dark .rw-side-input,
.dark .rw-side-textarea,
.dark .rw-side-select {
    border-color: #374151;
    background: rgba(255,255,255,.03);
    color: #e2e8f0;
}
.rw-side-pill-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.rw-side-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: rgba(226, 232, 240, .7);
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.dark .rw-side-pill-btn {
    background: rgba(255,255,255,.04);
    color: #94a3b8;
}
.rw-side-pill-btn-active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(240, 112, 48, .18);
}
.rw-side-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rw-side-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(248,250,252,.94);
    border: 1px solid rgba(226, 232, 240, .9);
    font-size: 12px;
    color: #475569;
}
.dark .rw-side-link-item {
    background: rgba(255,255,255,.03);
    border-color: rgba(51, 65, 85, .9);
    color: #cbd5e1;
}
.rw-side-comment-item {
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(248,250,252,.9);
    border: 1px solid rgba(226, 232, 240, .9);
    font-size: 12px;
    color: #475569;
}
.dark .rw-side-comment-item {
    background: rgba(255,255,255,.03);
    border-color: rgba(51, 65, 85, .9);
    color: #cbd5e1;
}
.rw-side-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, .9);
}
.dark .rw-side-actions { border-top-color: rgba(51, 65, 85, .9); }
.rw-side-secondary-btn,
.rw-side-primary-btn,
.rw-side-danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.rw-side-secondary-btn {
    border: 1px solid rgba(226, 232, 240, .9);
    background: rgba(248,250,252,.92);
    color: #475569;
}
.rw-side-primary-btn {
    border: 1px solid #F07030;
    background: #F07030;
    color: #fff;
}
.rw-side-danger-btn {
    width: 100%;
    border: 1px solid rgba(239, 68, 68, .24);
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
}
.dark .rw-side-secondary-btn {
    border-color: rgba(51, 65, 85, .9);
    background: rgba(255,255,255,.03);
    color: #cbd5e1;
}
.dark .rw-side-danger-btn {
    border-color: rgba(248, 113, 113, .2);
    background: rgba(127, 29, 29, .24);
    color: #fda4af;
}
.rw-side-secondary-btn:hover,
.rw-side-primary-btn:hover,
.rw-side-danger-btn:hover {
    transform: translateY(-1px);
}
.rw-client-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .04);
}
.dark .rw-client-hero {
    border-color: rgba(51, 65, 85, .9);
    background: rgba(15,23,42,.88);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}
.rw-client-hero-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.rw-client-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.rw-client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rw-client-name {
    margin: 0;
    font-size: 23px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #0f172a;
}
.dark .rw-client-name { color: #f8fafc; }
.rw-client-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}
.dark .rw-client-meta { color: #94a3b8; }
.rw-client-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    display: inline-block;
}
.rw-sidebar-chat-search {
    position: relative;
    margin-bottom: 8px;
}
.rw-sidebar-chat-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #94a3b8;
    pointer-events: none;
}
.rw-sidebar-chat-search-input {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 36px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: rgba(248,250,252,.88);
    color: #475569;
    font-size: 11px;
    outline: none;
    transition: border-color .18s ease, background .18s ease;
}
.rw-sidebar-chat-search-input:focus {
    border-color: rgba(240, 112, 48, .35);
    background: #fff;
}
.dark .rw-sidebar-chat-search-input {
    border-color: #374151;
    background: rgba(255,255,255,.03);
    color: #cbd5e1;
}
.rw-sidebar-chat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}
.rw-sidebar-chat-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 12px;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    border: 1px solid transparent;
    text-decoration: none;
}
.rw-sidebar-chat-item-idle {
    color: #64748b;
    background: rgba(248,250,252,.72);
}
.rw-sidebar-chat-item-idle:hover {
    background: #fff;
    border-color: rgba(226,232,240,.95);
    color: #111827;
}
.dark .rw-sidebar-chat-item-idle {
    color: #94a3b8;
    background: rgba(255,255,255,.02);
}
.dark .rw-sidebar-chat-item-idle:hover {
    background: rgba(255,255,255,.04);
    border-color: #334155;
    color: #f8fafc;
}
.rw-sidebar-chat-item-active {
    background: rgba(240, 112, 48, .1);
    border-color: rgba(240, 112, 48, .18);
    color: #d55f24;
}
.dark .rw-sidebar-chat-item-active {
    background: rgba(240, 112, 48, .12);
    border-color: rgba(240, 112, 48, .2);
    color: #fdba74;
}
.rw-sidebar-chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.rw-sidebar-chat-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
.rw-sidebar-chat-date {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 9px;
    opacity: .55;
}
.rw-sidebar-chat-snippet {
    display: block;
    font-size: 10px;
    line-height: 1.45;
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#modal-panel {
    border-radius: 24px;
    border-color: rgba(226, 232, 240, .92);
    background:
        linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.99) 100%);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .18);
}
#modal-title {
    letter-spacing: -.03em;
}
.dark #modal-panel {
    background:
        linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(17,24,39,.98) 100%);
    border-color: rgba(51, 65, 85, .95);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .36);
}
@media (max-width: 1023px) {
    .rw-page-header {
        padding: 18px 18px;
        border-radius: 20px;
    }
    .rw-page-title { font-size: 24px; }
}
@media (max-width: 767px) {
    .rw-topbar-inner { padding: 10px 14px; }
    .rw-page-header {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 18px;
    }
    .rw-page-meta {
        width: 100%;
        justify-content: flex-start;
    }
    .rw-page-title { font-size: 22px; }
    .rw-page-subtitle { font-size: 13px; }
}

/* ============================================================
   30. NOTAS (notas.php) — sticky notes con color personalizado
   ============================================================ */
.nota-card { border-radius: var(--rw-radius-lg); padding: var(--rw-sp-4); border: 1px solid var(--rw-border); background: var(--rw-bg-surface); transition: box-shadow .15s ease; }
.nota-card:hover { box-shadow: var(--rw-shadow-sm); }
.nota-card-pin { cursor: pointer; font-size: 14px; opacity: .25; }
.nota-card-pin.pinned, .nota-card-pin:hover { opacity: 1; }
.nota-card-delete { cursor: pointer; font-size: 18px; color: var(--rw-text-tertiary); opacity: 0; }
.nota-card:hover .nota-card-delete { opacity: 1; }
.nota-card-titulo { font-weight: 600; font-size: 15px; margin-bottom: var(--rw-sp-2); outline: none; }
.nota-card-contenido { font-size: var(--rw-text-sm); line-height: 1.6; color: var(--rw-text-secondary); outline: none; min-height: 40px; white-space: pre-wrap; }
.nota-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--rw-sp-3); padding-top: var(--rw-sp-2); border-top: 1px solid var(--rw-border); }
.nota-colores { display: flex; gap: 4px; opacity: 0; }
.nota-card:hover .nota-colores { opacity: 1; }
.nota-color-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(0,0,0,.08); }

/* ============================================================
   31. SCREENSHOTS (reportes.php) — galería + modal de capturas
   ============================================================ */
.screenshot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: var(--rw-sp-4); }
.screenshot-card { border: 1px solid var(--rw-border); border-radius: var(--rw-radius-lg); overflow: hidden; position: relative; background: var(--rw-bg-surface); }
.screenshot-thumb { cursor: pointer; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.screenshot-thumb:hover img { opacity: 1; }
.screenshot-card-info { padding: 6px 8px; }
.screenshot-delete { position: absolute; top: 4px; right: 4px; }
.ss-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 2000; align-items: center; justify-content: center; }
.ss-modal-overlay.show { display: flex; }
.ss-modal-content { position: relative; max-width: 90vw; max-height: 90vh; }
.ss-modal-content img { max-width: 100%; max-height: 80vh; border-radius: var(--rw-radius-lg); display: block; }
.ss-modal-close { position: absolute; top: -32px; right: 0; background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
.ss-modal-info { color: white; margin-top: var(--rw-sp-2); text-align: center; font-size: var(--rw-text-sm); }

/* ============================================================
   32. PROMPT / CODE DISPLAY (ia.php) — bloque de código AI
   ============================================================ */
.prompt-text {
    background: var(--rw-zinc-900);
    color: var(--rw-zinc-200);
    padding: 20px;
    border-radius: var(--rw-radius-lg);
    font-size: var(--rw-text-sm);
    line-height: 1.6;
    white-space: pre-wrap;
    font-family: var(--rw-font-mono);
    border: 1px solid var(--rw-zinc-800);
}

/* ============================================================
   33. DATATABLES 2.x — Integración TailAdmin
   Sobreescribe el tema Tailwind de DataTables para coincidir
   con el sistema de diseño de Rewind Lab.
   ============================================================ */

/* Contenedor general */
/* DataTables — estilo integrado sin bordes duros */
.dt-container { font-size: 13px; }

/* Barra superior: búsqueda + length */
.dt-layout-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
.dt-layout-row:first-child { border-bottom: 1px solid #f3f4f6; }
.dark .dt-layout-row:first-child { border-bottom-color: #1f2937; }
.dt-layout-row:last-child { margin-bottom: 0; margin-top: 0; border-top: 1px solid #f3f4f6; }
.dark .dt-layout-row:last-child { border-top-color: #1f2937; }

/* Buscador */
.dt-search { display: flex; align-items: center; gap: 6px; position: relative; }
.dt-search label { display: none; }
.dt-search::before {
    content: "\F52A";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    color: #9ca3af;
    pointer-events: none;
}
.dt-input {
    height: 32px;
    padding: 0 12px 0 40px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 12px;
    color: #374151;
    outline: none;
    transition: border-color .15s, background .15s;
    min-width: 180px;
}
.dt-input:focus { border-color: #F07030; background: #fff; box-shadow: 0 0 0 3px rgba(240,112,48,.08); }
.dark .dt-input { background: rgba(255,255,255,.03); border-color: #374151; color: #f3f4f6; }
.dark .dt-input:focus { border-color: #F07030; background: rgba(255,255,255,.05); }

/* Length selector */
.dt-length { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9ca3af; }
.dark .dt-length { color: #6b7280; }
.dt-length label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dt-length select {
    height: 30px;
    padding: 0 24px 0 8px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 12px;
    color: #6b7280;
    appearance: none;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    cursor: pointer;
}
.dt-length select:focus { border-color: #F07030; }
.dark .dt-length select { background-color: rgba(255,255,255,.03); border-color: #374151; color: #9ca3af; }

/* Info */
.dt-info { font-size: 12px; color: #9ca3af; }
.dark .dt-info { color: #6b7280; }

/* Paginación */
.dt-paging { display: flex; align-items: center; gap: 3px; }
.dt-paging .dt-paging-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 6px;
    border-radius: 6px; border: 1px solid transparent;
    background: transparent; color: #9ca3af;
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.dt-paging .dt-paging-button:hover:not(:disabled):not(.disabled):not(.current) {
    background: #f3f4f6; color: #374151;
}
.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current:hover {
    background: rgba(240,112,48,.1); color: #F07030; font-weight: 600;
}
.dt-paging .dt-paging-button:disabled,
.dt-paging .dt-paging-button.disabled { opacity: .3; cursor: default; }
.dark .dt-paging .dt-paging-button { background: transparent; color: #6b7280; }
.dark .dt-paging .dt-paging-button:hover:not(:disabled):not(.disabled):not(.current) { background: rgba(255,255,255,.05); color: #d1d5db; }
.dark .dt-paging .dt-paging-button.current { background: rgba(240,112,48,.15); color: #F07030; }

/* Cabecera de columnas ordenables */
table.rw-dt thead th { cursor: default; user-select: none; }
table.rw-dt thead th.dt-orderable-asc,
table.rw-dt thead th.dt-orderable-desc { cursor: pointer; }
table.rw-dt thead th.dt-ordering-asc .dt-column-order::before { color: #F07030; }
table.rw-dt thead th.dt-ordering-desc .dt-column-order::after { color: #F07030; }

/* ColReorder drag handle */
.dt-colreorder-moving { opacity: .6; }

/* Procesando overlay */
.dt-processing { font-size: 12px; color: #9ca3af; }

/* Edición inline — input que aparece en la celda */
td[data-edit] { cursor: text; }
td[data-edit]:hover { background: rgba(240,112,48,.04); }

/* ============================================================
   DARK MODE — Overrides globales para el content area
   Cubre clases Tailwind que no tienen variantes dark: en el HTML.
   Se aplican solo dentro de <main> para no afectar sidebar/header
   que ya tienen sus propias dark: classes.
   ============================================================ */

/* --- Fondo de cards y paneles --- */
.dark main .bg-white {
    background-color: rgba(255,255,255,0.03);
}
.dark main .bg-gray-50 {
    background-color: rgba(255,255,255,0.02);
}
.dark main .bg-gray-100 {
    background-color: rgba(255,255,255,0.05);
}

/* --- Bordes --- */
.dark main .border-gray-200 {
    border-color: #1f2937;
}
.dark main .border-gray-300 {
    border-color: #374151;
}

/* --- Texto --- */
.dark main .text-gray-800 {
    color: rgba(255,255,255,0.9);
}
.dark main .text-gray-700 {
    color: rgba(255,255,255,0.8);
}
.dark main .text-gray-600 {
    color: rgba(255,255,255,0.7);
}
.dark main .text-gray-500 {
    color: #9ca3af;
}

/* --- Formularios (inputs, selects, textareas sin dark: en HTML) --- */
.dark main select:not([class*="dark:"]),
.dark main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([class*="dark:"]),
.dark main textarea:not([class*="dark:"]) {
    background-color: #111827;
    border-color: #374151;
    color: rgba(255,255,255,0.9);
}

/* --- Placeholder text en dark --- */
.dark main input::placeholder,
.dark main textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

/* --- DataTables --- */
.dark .dt-container { color: rgba(255,255,255,0.8); }
.dark .dt-container .dt-info { color: #9ca3af; }
.dark .dt-container .dt-length select,
.dark .dt-container .dt-search input {
    background-color: #111827;
    border-color: #374151;
    color: rgba(255,255,255,0.9);
}
.dark .dt-container .dt-paging button {
    color: rgba(255,255,255,0.7);
    border-color: #374151;
}
.dark .dt-container .dt-paging button.dt-paging-button.current {
    background: rgba(240,112,48,0.15);
    color: #F07030;
    border-color: #F07030;
}
.dark .dt-container .dt-paging button:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.9);
}
.dark .dt-container thead th {
    color: #9ca3af;
    border-color: #1f2937;
}
.dark .dt-container tbody td {
    border-color: #1f2937;
}
.dark .dt-container tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

/* --- Modales (están fuera de main, necesitan regla propia) --- */
.dark #modal-panel {
    background-color: #111827;
    border-color: #1f2937;
}
.dark #modal-panel .text-gray-800,
.dark #modal-panel .text-gray-700 {
    color: rgba(255,255,255,0.9);
}
.dark #modal-panel .text-gray-600,
.dark #modal-panel .text-gray-500 {
    color: #9ca3af;
}
.dark #modal-panel select,
.dark #modal-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.dark #modal-panel textarea {
    background-color: #0f172a;
    border-color: #374151;
    color: rgba(255,255,255,0.9);
}
.dark #modal-panel .bg-white {
    background-color: #111827;
}
.dark #modal-panel .border-gray-200,
.dark #modal-panel .border-gray-300 {
    border-color: #374151;
}
.dark #modal-panel .bg-gray-100,
.dark #modal-panel .bg-gray-50 {
    background-color: rgba(255,255,255,0.05);
}
.dark #modal-panel .hover\:bg-gray-100:hover,
.dark #modal-panel .hover\:bg-gray-50:hover {
    background-color: rgba(255,255,255,0.08);
}

/* --- Hover states en dark --- */
.dark main .hover\:bg-gray-100:hover,
.dark main .hover\:bg-gray-50:hover {
    background-color: rgba(255,255,255,0.05);
}

/* --- Edición inline dark --- */
.dark td[data-edit]:hover { background: rgba(240,112,48,.08); }

/* --- Inline styles hardcodeados (background:#fff, #f8fafc, white, borders #e2e8f0) --- */
.dark main [style*="background:#fff"],
.dark main [style*="background: #fff"],
.dark main [style*="background:white"],
.dark main [style*="background: white"] {
    background: #111827 !important;
}
.dark main [style*="background:#f8fafc"],
.dark main [style*="background: #f8fafc"],
.dark main [style*="background:#f9fafb"],
.dark main [style*="background: #f9fafb"] {
    background: rgba(255,255,255,0.05) !important;
}
.dark main [style*="border:1px solid #e2e8f0"],
.dark main [style*="border: 1px solid #e2e8f0"] {
    border-color: #374151 !important;
}
.dark main [style*="color:#1A1A1A"],
.dark main [style*="color: #1A1A1A"],
.dark main [style*="color:#333"] {
    color: rgba(255,255,255,0.9) !important;
}

/* Sticky cells en tablas (checklist calendario, etc.) */
.dark main [style*="background:white"][style*="sticky"],
.dark main td[style*="background:white"],
.dark main th[style*="background:white"] {
    background: #111827 !important;
}
.dark main th[style*="background:#dbeafe"] {
    background: rgba(59,130,246,0.15) !important;
}
.dark main th[style*="background:#f8fafc"],
.dark main td[style*="background:#f8fafc"] {
    background: rgba(255,255,255,0.03) !important;
}
.rw-cal-personal-view { background: rgba(240, 112, 48, 0.02) !important; border-left: 4px solid #F07030 !important; } .rw-cal-general-view { border-left: 4px solid #4ade80 !important; } .rw-cal-day-free { background: rgba(74, 222, 128, 0.1) !important; } .rw-cal-day-busy-low { background: rgba(251, 146, 60, 0.1) !important; } .rw-cal-day-busy-high { background: rgba(248, 113, 113, 0.1) !important; }