/* ============================================================
   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: #242427; }
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: #242427; }
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 #F1A54A
   TailAdmin usa --color-brand-500 (azul por defecto).
   Aqui lo sobreescribimos con la paleta naranja corporativa.
   ============================================================ */
:root {
    /* ============================================================
       NUEVA PALETA PASTEL — primario: sand #F1A54A
       ============================================================ */
    /* Paleta base (variables crudas, disponibles como var(--sand) etc.) */
    --blush:#F7E1E6;
    --peach:#F9DCB3;
    --lilac:#E6D6F7;
    --sage:#D6EAD4;
    --lemon:#FEF3B0;
    --mauve:#E6D6E7;
    --coral:#FFC1B6;
    --aqua:#D0F0ED;
    --sand:#F1A54A;
    --sky:#DCE6F7;

    /* Brand / primario → sand */
    --color-brand-50:  #FEF6EC;
    --color-brand-100: #F9DCB3;
    --color-brand-200: #F6C98A;
    --color-brand-300: #F4BC70;
    --color-brand-400: #F1A54A;
    --color-brand-500: #F1A54A;
    --color-brand-600: #DB8A2B;
    --color-brand-700: #B86F1F;
    --color-brand-800: #8F5518;
    --color-brand-950: #4A2C0B;

    /* Orange (alias del primario) → sand */
    --color-orange-50:  #FEF6EC;
    --color-orange-100: #F9DCB3;
    --color-orange-200: #F6C98A;
    --color-orange-300: #F4BC70;
    --color-orange-400: #F1A54A;
    --color-orange-500: #F1A54A;
    --color-orange-600: #DB8A2B;
    --color-orange-700: #B86F1F;

    /* Success → sage */
    --color-success-50:  #F0F7EE;
    --color-success-100: #D6EAD4;
    --color-success-300: #9ED09B;
    --color-success-500: #57A85A;
    --color-success-600: #438746;
    --color-success-700: #356B37;
    --color-success-800: #2A552C;

    /* Error → coral */
    --color-error-50:  #FFF1EE;
    --color-error-300: #FFC1B6;
    --color-error-400: #F87A66;
    --color-error-500: #E85C48;
    --color-error-600: #D14330;
    --color-error-700: #AE3323;
    --color-error-800: #8B291C;

    /* Warning → peach */
    --color-warning-50:  #FEF9EC;
    --color-warning-400: #F0C066;
    --color-warning-500: #E0A63C;
    --color-warning-600: #C4881F;
    --color-warning-700: #9C6A15;

    /* --- Paleta primaria (--rw-orange → sand) --- */
    --rw-orange-50:  #FEF6EC;
    --rw-orange-100: #F9DCB3;
    --rw-orange-200: #F6C98A;
    --rw-orange-300: #F4BC70;
    --rw-orange-400: #F1A54A;
    --rw-orange-500: #F1A54A;
    --rw-orange-600: #DB8A2B;
    --rw-orange-700: #B86F1F;

    /* --- 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 (nueva paleta pastel) --- */
    --rw-green-50: #F0F7EE;
    --rw-green-100: #D6EAD4;   /* sage */
    --rw-green-400: #7BC078;
    --rw-green-500: #57A85A;
    --rw-green-600: #438746;
    --rw-green-700: #356B37;
    --rw-red-50: #FFF1EE;
    --rw-red-100: #FFC1B6;     /* coral */
    --rw-red-400: #F87A66;
    --rw-red-500: #E85C48;
    --rw-red-600: #D14330;
    --rw-red-700: #AE3323;
    --rw-amber-50: #FEF9EC;
    --rw-amber-100: #F9DCB3;   /* peach */
    --rw-amber-400: #F0C066;
    --rw-amber-500: #E0A63C;
    --rw-amber-600: #C4881F;
    --rw-amber-700: #9C6A15;
    --rw-blue-50: #EEF3FB;
    --rw-blue-100: #DCE6F7;    /* sky */
    --rw-blue-400: #9DB6E8;
    --rw-blue-500: #6E8FD6;
    --rw-blue-600: #4E70C0;
    --rw-violet-50: #F4EEFB;
    --rw-violet-100: #E6D6F7;  /* lilac */
    --rw-violet-400: #BFA0E8;
    --rw-violet-500: #A17FD6;
    --rw-violet-600: #8560C0;
    --rw-cyan-50: #EAF9F7;
    --rw-cyan-400: #7FD8D0;
    --rw-cyan-500: #4CC3B9;    /* aqua */

    /* --- 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: #FEF6EC;
    --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 {
    /* Grises NEUTROS. Antes era la escala «slate» (#1a1a1c, #242427…), azul marino:
       el modo oscuro parecía azul, no gris. */
    --rw-bg-app: #1a1a1c;
    --rw-bg-surface: #222225;
    --rw-bg-surface-raised: #26262a;
    --rw-bg-surface-overlay: #303034;
    --rw-bg-subtle: #222225;
    --rw-bg-muted: #1a1a1c;
    --rw-bg-accent: #2a2114;
    --rw-border: #2e2e32;
    --rw-border-subtle: #252528;
    --rw-border-strong: #45454a;
    --rw-text-primary: #ececef;
    --rw-text-secondary: #a3a3a9;
    --rw-text-tertiary: #737379;
    --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);
    /* La escala gris de Tailwind (dark:bg-gray-900, dark:border-gray-800…) también
       era azulada (#101828, #1d2939): en oscuro se sustituye por grises neutros. */
    --color-gray-50:  #f7f7f8;
    --color-gray-100: #ededf0;
    --color-gray-200: #dedee2;
    --color-gray-300: #c7c7cc;
    --color-gray-400: #9e9ea4;
    --color-gray-500: #737378;
    --color-gray-600: #505055;
    --color-gray-700: #3a3a3e;
    --color-gray-800: #2a2a2d;
    --color-gray-900: #1a1a1c;
    --color-gray-950: #111113;
    /* El naranja de marca, un punto más apagado: sobre gris oscuro saltaba demasiado. */
    --color-brand-400: #D08A3E;
    --color-brand-500: #D08A3E;
    --color-brand-600: #B87832;
    --rw-orange-400: #D08A3E;
    --rw-orange-500: #D08A3E;
}

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

/* Recorte a 3 lineas con "Ver mas" (descripcion de produccion).
   La clase la pone y la quita el JS: solo se aplica si el texto se sale de verdad.
   Va por max-height y no por -webkit-line-clamp porque el contenido lleva bloques
   (parrafos, listas, tablas) y el line-clamp solo es fiable con texto en linea.
   3 lineas de --rw-leading-sm (1.25rem) + el padding vertical py-1 del contenedor. */
.rw-clamp-3 {
    max-height: 4.25rem;
    overflow: hidden;
}

/* Cuerpo con formato de la descripcion: negrita, cursiva, subrayado, listas
   (puntos o guiones) y tablas simples. Es lo unico que deja pasar el saneador
   sanear_html_descripcion() de config.php. */
.rw-desc-body > *:first-child { margin-top: 0; }
.rw-desc-body > *:last-child  { margin-bottom: 0; }
.rw-desc-body p               { margin: 0 0 .5rem; }
.rw-desc-body ul,
.rw-desc-body ol              { margin: 0 0 .5rem; padding-left: 1.25rem; }
.rw-desc-body ul              { list-style: disc; }
.rw-desc-body ol              { list-style: decimal; }
.rw-desc-body li              { margin: .125rem 0; }
.rw-desc-body strong          { font-weight: 600; }
.rw-desc-body em              { font-style: italic; }
.rw-desc-body u               { text-decoration: underline; }

/* Lista con guiones: misma <ul>, marcador cambiado. */
.rw-desc-body ul.rw-list-dash             { list-style: none; padding-left: .5rem; }
.rw-desc-body ul.rw-list-dash > li::before { content: "—"; margin-right: .5rem; color: var(--rw-text-tertiary); }

.rw-desc-body table {
    border-collapse: collapse;
    margin: .25rem 0 .5rem;
    max-width: 100%;
}
.rw-desc-body th,
.rw-desc-body td {
    border: 1px solid var(--rw-border);
    padding: .25rem .5rem;
    text-align: left;
    vertical-align: top;
}
.rw-desc-body th { background: var(--rw-bg-subtle); font-weight: 600; }

/* Barra del editor: los botones activos (negrita puesta, etc.) se marcan solos. */
.rw-desc-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .375rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    color: var(--rw-text-secondary);
    font-size: 12px;
    cursor: pointer;
    background: transparent;
}
.rw-desc-tool:hover  { background: var(--rw-bg-subtle); color: var(--rw-text-primary); }
.rw-desc-tool.activo { background: var(--rw-orange-50); border-color: var(--rw-orange-200); color: var(--rw-orange-600); }
.dark .rw-desc-tool:hover  { background: rgba(255,255,255,.06); }
.dark .rw-desc-tool.activo { background: rgba(241,165,74,.12); }

/* ============================================================
   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: #242427; }
.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(241, 165, 74, .08); }
.dark .stat-card--blue .stat-icon   { background: rgba(59, 130, 246, .08); }
.dark .stat-card--green .stat-icon  { background: rgba(123,192,120, .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: #2c2c2c;
    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(241, 165, 74, .05);
    border-color: rgba(241, 165, 74, .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(123,192,120, .08);
    border-color: rgba(123,192,120, .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(241, 165, 74, .08) !important;
    border-color: rgba(241, 165, 74, .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;
}
/* Toda la tarjeta (preview + nombre) abre el archivo en una pestaña nueva. */
.archivo-abrir {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.archivo-abrir:hover .archivo-nombre { text-decoration: underline; }
/* Descarga directa: gemelo de .archivo-delete, en la esquina opuesta. */
.archivo-download {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--rw-text-tertiary);
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--rw-transition-fast);
}
.archivo-card:hover .archivo-download { opacity: 1; }
.archivo-download:hover { color: var(--rw-blue-500); }
.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); }
}

/* Giro de "ocupado" en un botón mientras se espera al servidor. */
.rw-spin { animation: rw-spin .6s linear infinite; }


/* ============================================================
   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: #2c2c2c;
    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: #F1A54A;
    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; }
/* Días NO activos — los de los meses vecinos que completan la primera y la última
   semana, y los que ya han pasado. Comparten exactamente el mismo atenuado para
   que la vista se centre solo en hoy y en lo que queda por venir; se atenúa la
   celda entera, no solo los eventos, pero queda legible para ver que hay algo.
   Al pasar el ratón, o al soltar encima un evento arrastrado, recuperan el color. */
.cal-td-otro-mes,
.cal-td-pasado {
    background: var(--rw-bg-subtle);
    opacity: .55;
    filter: grayscale(.5);
    transition: opacity var(--rw-transition-fast), filter var(--rw-transition-fast);
}
.cal-td-otro-mes:hover,
.cal-td-pasado:hover,
.cal-td-otro-mes.cal-td-drop-target,
.cal-td-pasado.cal-td-drop-target { opacity: 1; filter: grayscale(0); }
.dark .cal-td-otro-mes,
.dark .cal-td-pasado { background: rgba(255,255,255,.02); opacity: .45; }
.dark .cal-td-otro-mes:hover,
.dark .cal-td-pasado:hover { opacity: 1; }
.cal-mes-vecino { font-size: 9px; font-weight: 500; margin-left: 3px; text-transform: uppercase; opacity: .75; }
.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: #242427; border-color: #3a3a3e; }
.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: #F1A54A; }
.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: #F1A54A; 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: #F1A54A; }
.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(241, 165, 74,.1);
    color: #F1A54A;
}
.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(241, 165, 74,.3);
    color: #F1A54A;
    background: #fff;
}
.flatpickr-calendar {
    z-index: 1000000;
}
.dark .pt-date-trigger {
    border-color: #3a3a3e;
    background: rgba(26, 26, 28, .92);
    color: #94a3b8;
}
.dark .pt-date-trigger:hover {
    border-color: rgba(241, 165, 74,.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(241, 165, 74,.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: #242427; }

/* ============================================================
   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: #57A85A; }
.text-danger  { color: #ef4444; }
.text-warning { color: #f59e0b; }
.text-info    { color: #06b6d4; }
.text-muted   { color: #6b7280; }
.dark .text-success { color: #57A85A; }
.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, #356B37);
}
.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(123,192,120,.12);  color: #57A85A; }
.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(241, 165, 74, .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(241, 165, 74, .05), transparent 30%),
        linear-gradient(180deg, #1a1a1c 0%, #1a1a1c 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(17, 17, 19, .98) 0%, rgba(26, 26, 28, .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(58, 58, 62, .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(58, 58, 62, .85);
    background: rgba(26, 26, 28, .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(241, 165, 74, .25);
    background: #fff;
    color: #F1A54A;
    transform: translateY(-1px);
}
.rw-icon-btn-square { border-radius: 14px; }
.dark .rw-icon-btn {
    border-color: #242427;
    background: rgba(26, 26, 28, .72);
    color: #94a3b8;
}
.dark .rw-icon-btn:hover {
    border-color: rgba(241, 165, 74, .28);
    background: rgba(36, 36, 39, .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(58, 58, 62, .9);
    background: rgba(26, 26, 28, .7);
}
.rw-user-pill-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    color: #2c2c2c;
    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(58, 58, 62, .9);
    background: linear-gradient(180deg, #1a1a1c, #1a1a1c);
}
.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(58, 58, 62, .9);
    background:
        linear-gradient(135deg, rgba(26, 26, 28, .92) 0%, rgba(26, 26, 28, .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(241, 165, 74, .08);
    color: #d55f24;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.dark .rw-page-kicker {
    background: rgba(241, 165, 74, .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(241, 165, 74, .08);
    border-color: rgba(241, 165, 74, .18);
    color: #d55f24;
}
.dark .rw-page-chip {
    background: rgba(26, 26, 28, .66);
    border-color: #3a3a3e;
    color: #cbd5e1;
}
.dark .rw-page-chip-strong {
    background: rgba(241, 165, 74, .12);
    border-color: rgba(241, 165, 74, .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(58, 58, 62, .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: #F1A54A;
    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(58, 58, 62, .95);
    border-bottom-color: rgba(26, 26, 28, .98);
    background: rgba(26, 26, 28, .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(58, 58, 62, .9);
    background: rgba(26, 26, 28, .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(58, 58, 62, .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(241, 165, 74, .38);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(241, 165, 74, .08);
}
.dark .rw-toolbar-input,
.dark .rw-toolbar-select {
    border-color: #3a3a3e;
    background-color: rgba(255,255,255,.03);
    color: #cbd5e1;
}
.dark .rw-toolbar-input:focus,
.dark .rw-toolbar-select:focus {
    border-color: rgba(241, 165, 74, .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(58, 58, 62, .9);
    background: rgba(26, 26, 28, .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(26, 26, 28, .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(58, 58, 62, .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(58, 58, 62, .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(58, 58, 62, .9);
    background: linear-gradient(180deg, rgba(26, 26, 28, .98) 0%, rgba(26, 26, 28, .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: #3a3a3e;
    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(241, 165, 74, .4);
    box-shadow: 0 0 0 3px rgba(241, 165, 74,.08);
    background: #fff;
}
.dark .rw-side-input,
.dark .rw-side-textarea,
.dark .rw-side-select {
    border-color: #3a3a3e;
    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(241, 165, 74, .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(58, 58, 62, .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(58, 58, 62, .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(58, 58, 62, .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 #F1A54A;
    background: #F1A54A;
    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(58, 58, 62, .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(58, 58, 62, .9);
    background: rgba(26, 26, 28, .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(241, 165, 74, .35);
    background: #fff;
}
.dark .rw-sidebar-chat-search-input {
    border-color: #3a3a3e;
    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: #3a3a3e;
    color: #f8fafc;
}
.rw-sidebar-chat-item-active {
    background: rgba(241, 165, 74, .1);
    border-color: rgba(241, 165, 74, .18);
    color: #d55f24;
}
.dark .rw-sidebar-chat-item-active {
    background: rgba(241, 165, 74, .12);
    border-color: rgba(241, 165, 74, .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(26, 26, 28, .98) 0%, rgba(26, 26, 28, .98) 100%);
    border-color: rgba(58, 58, 62, .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); }

/* ============================================================
   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: #242427; }
.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: #242427; }

/* 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: #F1A54A; background: #fff; box-shadow: 0 0 0 3px rgba(241, 165, 74,.08); }
.dark .dt-input { background: rgba(255,255,255,.03); border-color: #3a3a3e; color: #f3f4f6; }
.dark .dt-input:focus { border-color: #F1A54A; 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: #F1A54A; }
.dark .dt-length select { background-color: rgba(255,255,255,.03); border-color: #3a3a3e; 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(241, 165, 74,.1); color: #F1A54A; 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(241, 165, 74,.15); color: #F1A54A; }

/* 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: #F1A54A; }
table.rw-dt thead th.dt-ordering-desc .dt-column-order::after { color: #F1A54A; }

/* 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(241, 165, 74,.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: #242427;
}
.dark main .border-gray-300 {
    border-color: #3a3a3e;
}

/* --- 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: #1a1a1c;
    border-color: #3a3a3e;
    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: #1a1a1c;
    border-color: #3a3a3e;
    color: rgba(255,255,255,0.9);
}
.dark .dt-container .dt-paging button {
    color: rgba(255,255,255,0.7);
    border-color: #3a3a3e;
}
.dark .dt-container .dt-paging button.dt-paging-button.current {
    background: rgba(241, 165, 74,0.15);
    color: #F1A54A;
    border-color: #F1A54A;
}
.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: #242427;
}
.dark .dt-container tbody td {
    border-color: #242427;
}
.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: #1a1a1c;
    border-color: #242427;
}
.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: #1a1a1c;
    border-color: #3a3a3e;
    color: rgba(255,255,255,0.9);
}
.dark #modal-panel .bg-white {
    background-color: #1a1a1c;
}
.dark #modal-panel .border-gray-200,
.dark #modal-panel .border-gray-300 {
    border-color: #3a3a3e;
}
.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(241, 165, 74,.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: #1a1a1c !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: #3a3a3e !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: #1a1a1c !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 { border-left: 4px solid #D6EAD4 !important; } .rw-cal-general-view { border-left: 4px solid #F1A54A !important; } .rw-cal-day-free { background: rgba(123,192,120, 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; }

/* Selector de personas asignadas como círculos clicables (modal de evento).
   Al activarse, el círculo se rellena con el color del usuario (--u-color). */
.rw-persona-chip { display:inline-flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; width:46px; }
.rw-persona-chip input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.rw-persona-circle { width:34px; height:34px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#3f3f46; background:#fff; border:2px solid #e2e8f0; transition:background .15s, border-color .15s, transform .1s; }
.rw-persona-chip:hover .rw-persona-circle { border-color: var(--u-color); transform: translateY(-1px); }
.rw-persona-chip input:checked + .rw-persona-circle { background: var(--u-color); border-color: var(--u-color); }
.rw-persona-name { font-size:10px; line-height:1.1; color:#64748b; max-width:46px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.dark .rw-persona-circle { background:#242427; border-color:#3a3a3e; color:#e2e8f0; }

/* ===========================================================================
   Checkboxes: de cuadrado (tick azul) a CÍRCULO marcable con relleno azul SKY.
   Aplica a todos los input[type=checkbox] (mayor especificidad que el plugin
   de Tailwind Forms, que los deja cuadrados y rellenos con currentColor).
   =========================================================================== */
input[type="checkbox"] {
    border-radius: 9999px !important;   /* círculo */
}
input[type="checkbox"]:checked,
input[type="checkbox"]:checked:hover,
input[type="checkbox"]:checked:focus,
input[type="checkbox"]:indeterminate {
    background-color: #0ea5e9 !important; /* sky-500 */
    border-color: #0ea5e9 !important;     /* mismo azul sky en el borde */
}

/* Botones de orden ↑↓ de las subtareas (producción y SMM): visibles al hover de la fila. */
.pf-st-row .st-order-btns { opacity: 0; transition: opacity .15s; }
.pf-st-row:hover .st-order-btns { opacity: 1; }
.pf-st-row .st-move-btn:hover i { color: #F1A54A !important; }

/* Botones de orden ↑↓ en las subtareas de la sección Tareas (grid pt-grid-row). */
.pt-grid-row .st-order-btns { opacity: 0; transition: opacity .15s; }
.pt-grid-row:hover .st-order-btns { opacity: 1; }
.pt-grid-row .st-move-btn:hover i { color: #F1A54A !important; }

/* ── Barra lateral fija a partir de 1024px ────────────────────────────────────
   El botón de colapsar solo tiene sentido en tablet o móvil en vertical, donde el
   menú es un cajón que hay que poder abrir. De 1024px en adelante la barra es
   fija: ni botón, ni animación de colapso.
   Va con !important y en este fichero (se carga después de tailwind.css) porque
   si no, .rw-icon-btn{display:inline-flex} gana por orden de cascada a la utilidad
   xl:hidden de Tailwind, que tiene la misma especificidad. */
@media (min-width: 1024px) {
    .rw-sidebar-toggle { display: none !important; }
    .sidebar {
        position: static !important;
        transform: none !important;
        width: 290px !important;
        transition: none !important;
    }
}

/* ── Contador de mensajes sin leer ────────────────────────────────────────────
   Círculo coral (la misma coral de la paleta) en vez de la píldora roja. Ancho y
   alto fijos para que con un dígito sea un círculo perfecto; con dos o tres se
   ensancha lo justo y sigue redondeado. */
/* Con 0 sin leer no se pinta nada. Hace falta el !important porque esta hoja se
   carga después de tailwind.css: si no, el display:inline-flex de aquí abajo gana
   por orden de cascada a la utilidad .hidden y quedaría un círculo con un 0. */
.rw-badge-chat.hidden { display: none !important; }
.rw-badge-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #FFC1B6;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Botón de dictado grabando ────────────────────────────────────────────────
   Sin esto el botón no cambiaba al pulsarlo y parecía que no hacía nada: la clase
   .grabando la ponía el JS pero no estaba definida en ningún sitio. */
.grabando,
button.grabando {
    background: #ff3b30 !important;
    border-color: #ff3b30 !important;
    color: #fff !important;
    animation: rw-pulso-mic 1.2s ease-in-out infinite;
}
.grabando i { color: #fff !important; }
@keyframes rw-pulso-mic {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .45); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
}

/* ── Variantes de grupo CON NOMBRE (group/st, group/row, group/logo) ──────────
   El build de tailwind.css solo incluye las variantes de grupo SIN nombre
   (.group-hover\:opacity-100 y compañía). Las nombradas nunca se generaron, así
   que los botones que dependen de ellas se quedaban en opacity:0 de forma
   permanente: invisibles, pero seguían ocupando su sitio y respondiendo al clic.
   Afectaba a los únicos accesos que hay para borrar subtareas, añadir subtareas
   de diseño y quitar el logo de un cliente. Se escriben aquí a mano.

   El bloque hover:none no es un extra: en pantalla táctil no hay puntero, y sin
   él estos botones seguirían siendo inalcanzables justo donde son la única vía. */
@media (hover: hover) {
    .group\/st:hover   .group-hover\/st\:opacity-100   { opacity: 1; }
    .group\/row:hover  .group-hover\/row\:opacity-100  { opacity: 1; }
    .group\/logo:hover .group-hover\/logo\:opacity-100 { opacity: 1; }
}
@media (hover: none) {
    .group-hover\/st\:opacity-100,
    .group-hover\/row\:opacity-100,
    .group-hover\/logo\:opacity-100 { opacity: 1; }
}

/* ── Tamaños de texto por valor arbitrario que faltan en el build ─────────────
   tailwind.css solo generó .text-[10px]. Las otras tres se usan en 74 sitios de
   la app —badges, pies de tarjeta, etiquetas— y sin regla el texto salía al
   tamaño heredado, casi siempre demasiado grande, descuadrando esas piezas.
   Se escriben igual que la que sí existe: solo font-size, sin line-height. */
.text-\[11px\] { font-size: 11px; }
.text-\[9px\]  { font-size: 9px; }
.text-\[5px\]  { font-size: 5px; }

/* ============================================================
   OPACIDAD — utilidades que el subconjunto de Tailwind no trae
   ------------------------------------------------------------
   tailwind.css es un build parcial y le faltan varias de la familia
   opacity. El HTML las usaba igualmente, así que 57 sitios no se
   atenuaban: eventos pasados que salían a pleno color, botones
   deshabilitados con el mismo aspecto que los activos, e iconos que
   debían aparecer al pasar el ratón y ya estaban siempre visibles.
   Se añaden aquí, no en tailwind.css, que se regenera.
   ============================================================ */
.opacity-20 { opacity: .2; }
.opacity-30 { opacity: .3; }
.opacity-40 { opacity: .4; }
.opacity-60 { opacity: .6; }
.opacity-70 { opacity: .7; }

.disabled\:opacity-30:disabled { opacity: .3; }
.disabled\:opacity-40:disabled { opacity: .4; }

.hover\:opacity-70:hover  { opacity: .7; }
.hover\:opacity-80:hover  { opacity: .8; }
.hover\:opacity-90:hover  { opacity: .9; }
.hover\:opacity-100:hover { opacity: 1; }

/* ============================================================
   MODO OSCURO EQUILIBRADO
   Los estados, eventos, festivos y avatares llevan su color pastel escrito en el
   propio elemento (inline o puesto por JS). Sobre gris oscuro deslumbraban: aquí se
   convierten en un tinte suave de su mismo tono, con el texto en ese color.
   Detecta la forma escrita en PHP (#hex) y la que deja el navegador al ponerlo por
   JS (rgb(r, g, b)). Solo afecta al modo oscuro.
   ============================================================ */

.dark :not(.rw-barra-color)[style*="background:#D6EAD4" i],
.dark :not(.rw-barra-color)[style*="background: #D6EAD4" i],
.dark :not(.rw-barra-color)[style*="background-color:#D6EAD4" i],
.dark :not(.rw-barra-color)[style*="background-color: #D6EAD4" i],
.dark :not(.rw-barra-color)[style*="background: rgb(214, 234, 212)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(214, 234, 212)"] {
    background-color: rgba(214,234,212,.16) !important;
    color: #D6EAD4 !important;
}

.dark :not(.rw-barra-color)[style*="background:#F9DCB3" i],
.dark :not(.rw-barra-color)[style*="background: #F9DCB3" i],
.dark :not(.rw-barra-color)[style*="background-color:#F9DCB3" i],
.dark :not(.rw-barra-color)[style*="background-color: #F9DCB3" i],
.dark :not(.rw-barra-color)[style*="background: rgb(249, 220, 179)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(249, 220, 179)"] {
    background-color: rgba(249,220,179,.16) !important;
    color: #F9DCB3 !important;
}

.dark :not(.rw-barra-color)[style*="background:#DCE6F7" i],
.dark :not(.rw-barra-color)[style*="background: #DCE6F7" i],
.dark :not(.rw-barra-color)[style*="background-color:#DCE6F7" i],
.dark :not(.rw-barra-color)[style*="background-color: #DCE6F7" i],
.dark :not(.rw-barra-color)[style*="background: rgb(220, 230, 247)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(220, 230, 247)"] {
    background-color: rgba(220,230,247,.16) !important;
    color: #DCE6F7 !important;
}

.dark :not(.rw-barra-color)[style*="background:#E6D6E7" i],
.dark :not(.rw-barra-color)[style*="background: #E6D6E7" i],
.dark :not(.rw-barra-color)[style*="background-color:#E6D6E7" i],
.dark :not(.rw-barra-color)[style*="background-color: #E6D6E7" i],
.dark :not(.rw-barra-color)[style*="background: rgb(230, 214, 231)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(230, 214, 231)"] {
    background-color: rgba(230,214,231,.16) !important;
    color: #E6D6E7 !important;
}

.dark :not(.rw-barra-color)[style*="background:#E6D6F7" i],
.dark :not(.rw-barra-color)[style*="background: #E6D6F7" i],
.dark :not(.rw-barra-color)[style*="background-color:#E6D6F7" i],
.dark :not(.rw-barra-color)[style*="background-color: #E6D6F7" i],
.dark :not(.rw-barra-color)[style*="background: rgb(230, 214, 247)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(230, 214, 247)"] {
    background-color: rgba(230,214,247,.16) !important;
    color: #E6D6F7 !important;
}

.dark :not(.rw-barra-color)[style*="background:#FFC1B6" i],
.dark :not(.rw-barra-color)[style*="background: #FFC1B6" i],
.dark :not(.rw-barra-color)[style*="background-color:#FFC1B6" i],
.dark :not(.rw-barra-color)[style*="background-color: #FFC1B6" i],
.dark :not(.rw-barra-color)[style*="background: rgb(255, 193, 182)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(255, 193, 182)"] {
    background-color: rgba(255,193,182,.16) !important;
    color: #FFC1B6 !important;
}

.dark :not(.rw-barra-color)[style*="background:#FCE7F3" i],
.dark :not(.rw-barra-color)[style*="background: #FCE7F3" i],
.dark :not(.rw-barra-color)[style*="background-color:#FCE7F3" i],
.dark :not(.rw-barra-color)[style*="background-color: #FCE7F3" i],
.dark :not(.rw-barra-color)[style*="background: rgb(252, 231, 243)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(252, 231, 243)"] {
    background-color: rgba(252,231,243,.16) !important;
    color: #FCE7F3 !important;
}

.dark :not(.rw-barra-color)[style*="background:#D0F0ED" i],
.dark :not(.rw-barra-color)[style*="background: #D0F0ED" i],
.dark :not(.rw-barra-color)[style*="background-color:#D0F0ED" i],
.dark :not(.rw-barra-color)[style*="background-color: #D0F0ED" i],
.dark :not(.rw-barra-color)[style*="background: rgb(208, 240, 237)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(208, 240, 237)"] {
    background-color: rgba(208,240,237,.16) !important;
    color: #D0F0ED !important;
}

.dark :not(.rw-barra-color)[style*="background:#F7E1E6" i],
.dark :not(.rw-barra-color)[style*="background: #F7E1E6" i],
.dark :not(.rw-barra-color)[style*="background-color:#F7E1E6" i],
.dark :not(.rw-barra-color)[style*="background-color: #F7E1E6" i],
.dark :not(.rw-barra-color)[style*="background: rgb(247, 225, 230)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(247, 225, 230)"] {
    background-color: rgba(247,225,230,.16) !important;
    color: #F7E1E6 !important;
}

.dark :not(.rw-barra-color)[style*="background:#F0F7EE" i],
.dark :not(.rw-barra-color)[style*="background: #F0F7EE" i],
.dark :not(.rw-barra-color)[style*="background-color:#F0F7EE" i],
.dark :not(.rw-barra-color)[style*="background-color: #F0F7EE" i],
.dark :not(.rw-barra-color)[style*="background: rgb(240, 247, 238)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(240, 247, 238)"] {
    background-color: rgba(240,247,238,.16) !important;
    color: #F0F7EE !important;
}

.dark :not(.rw-barra-color)[style*="background:#FEF3C7" i],
.dark :not(.rw-barra-color)[style*="background: #FEF3C7" i],
.dark :not(.rw-barra-color)[style*="background-color:#FEF3C7" i],
.dark :not(.rw-barra-color)[style*="background-color: #FEF3C7" i],
.dark :not(.rw-barra-color)[style*="background: rgb(254, 243, 199)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(254, 243, 199)"] {
    background-color: rgba(254,243,199,.16) !important;
    color: #FEF3C7 !important;
}

.dark :not(.rw-barra-color)[style*="background:#FEF3B0" i],
.dark :not(.rw-barra-color)[style*="background: #FEF3B0" i],
.dark :not(.rw-barra-color)[style*="background-color:#FEF3B0" i],
.dark :not(.rw-barra-color)[style*="background-color: #FEF3B0" i],
.dark :not(.rw-barra-color)[style*="background: rgb(254, 243, 176)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(254, 243, 176)"] {
    background-color: rgba(254,243,176,.16) !important;
    color: #FEF3B0 !important;
}

.dark :not(.rw-barra-color)[style*="background:#F1A54A" i],
.dark :not(.rw-barra-color)[style*="background: #F1A54A" i],
.dark :not(.rw-barra-color)[style*="background-color:#F1A54A" i],
.dark :not(.rw-barra-color)[style*="background-color: #F1A54A" i],
.dark :not(.rw-barra-color)[style*="background: rgb(241, 165, 74)"],
.dark :not(.rw-barra-color)[style*="background-color: rgb(241, 165, 74)"] {
    background-color: #D08A3E !important;
}
/* Barra lateral: antes negro puro, un escalón por debajo del fondo de la app. */
.dark .sidebar { background-color: #141416 !important; }
/* Nombres de los festivos: en claro son malva oscuro; en oscuro, malva claro sobre el tinte. */
.dark .cal-festivo-label { color: #E6D6E7 !important; }
.dark .cal-td-festivo { border-color: rgba(230,214,231,.25) !important; }
/* Aro de los avatares superpuestos: en claro es blanco; en oscuro, el de la superficie.
   (dark:ring-gray-900 no existe en el CSS recortado, así que se quedaba blanco.) */
.dark .ring-white { --tw-ring-color: var(--rw-bg-surface); }
/* Naranja de 600: en claro, texto más oscuro para contrastar sobre blanco; en oscuro
   el texto va al tono claro (el oscuro se reserva al fondo al pasar el ratón). */
.dark .text-brand-600 { color: #D08A3E; }
/* Bordes naranjas finos (filtros activos, botones perfilados): más suaves en oscuro. */
.dark .border-brand-500 { border-color: rgba(208, 138, 62, .55); }

/* Fondos gris claro escritos a mano (carriles de barras de progreso, recuadros):
   en oscuro pasan a gris oscuro. Antes el carril de las barras salía casi blanco. */
.dark [style*="background:#F8FAFC" i],
.dark [style*="background: #F8FAFC" i],
.dark [style*="background-color:#F8FAFC" i],
.dark [style*="background-color: #F8FAFC" i],
.dark [style*="background: rgb(248, 250, 252)"],
.dark [style*="background-color: rgb(248, 250, 252)"],
.dark [style*="background:#F1F5F9" i],
.dark [style*="background: #F1F5F9" i],
.dark [style*="background-color:#F1F5F9" i],
.dark [style*="background-color: #F1F5F9" i],
.dark [style*="background: rgb(241, 245, 249)"],
.dark [style*="background-color: rgb(241, 245, 249)"] {
    background-color: #242427 !important;
    color: var(--rw-text-secondary) !important;
}
.dark [style*="background:#E5E7EB" i],
.dark [style*="background: #E5E7EB" i],
.dark [style*="background-color:#E5E7EB" i],
.dark [style*="background-color: #E5E7EB" i],
.dark [style*="background: rgb(229, 231, 235)"],
.dark [style*="background-color: rgb(229, 231, 235)"],
.dark [style*="background:#E2E8F0" i],
.dark [style*="background: #E2E8F0" i],
.dark [style*="background-color:#E2E8F0" i],
.dark [style*="background-color: #E2E8F0" i],
.dark [style*="background: rgb(226, 232, 240)"],
.dark [style*="background-color: rgb(226, 232, 240)"] {
    background-color: #3a3a3e !important;
    color: var(--rw-text-secondary) !important;
}
/* Tramos de barras de color (carga de Content Lab): mantienen el color de cada persona,
   atenuado; un tinte al 16 % los hacía indistinguibles. */
.dark .rw-barra-color { filter: brightness(.72) saturate(.85); }

/* Fondos «-50»/«-100» de cada familia (hoy del calendario, opción activa de la ayuda,
   insignias bg-brand-100…): en claro son casi blancos; en oscuro, el tono de la familia
   mezclado con el gris de fondo. */
.dark {
    --color-brand-100: #493926;
    --color-brand-50: #382d22;
    --color-error-50: #372322;
    --color-orange-100: #493926;
    --color-orange-50: #382d22;
    --color-success-100: #27392a;
    --color-success-50: #232e25;
    --color-warning-50: #362e20;
    --rw-amber-100: #463923;
    --rw-amber-50: #362e20;
    --rw-blue-100: #2c3445;
    --rw-blue-50: #262a36;
    --rw-cyan-50: #213232;
    --rw-green-100: #27392a;
    --rw-green-50: #232e25;
    --rw-orange-100: #493926;
    --rw-orange-50: #382d22;
    --rw-red-100: #472926;
    --rw-red-50: #372322;
    --rw-violet-100: #383045;
    --rw-violet-50: #2d2836;
    --rw-zinc-100: #2c2c2d;
    --rw-zinc-50: #252527;
}
/* Amarillo de estado (Pre-producción): sólido saltaba; tinte como los demás estados.
   Los semáforos, que son un punto pequeño, conservan su color. */
.dark :not(.rw-barra-color):not(.semaforo)[style*="background:#FBBF24" i],
.dark :not(.rw-barra-color):not(.semaforo)[style*="background: #FBBF24" i],
.dark :not(.rw-barra-color):not(.semaforo)[style*="background-color:#FBBF24" i],
.dark :not(.rw-barra-color):not(.semaforo)[style*="background-color: #FBBF24" i],
.dark :not(.rw-barra-color):not(.semaforo)[style*="background: rgb(251, 191, 36)"],
.dark :not(.rw-barra-color):not(.semaforo)[style*="background-color: rgb(251, 191, 36)"] {
    background-color: rgba(251,191,36,.16) !important;
    color: #FBBF24 !important;
}
/* Filas y cabeceras #fafafa (control laboral): gris oscuro. */
.dark [style*="background:#FAFAFA" i],
.dark [style*="background: #FAFAFA" i],
.dark [style*="background-color:#FAFAFA" i],
.dark [style*="background-color: #FAFAFA" i],
.dark [style*="background: rgb(250, 250, 250)"],
.dark [style*="background-color: rgb(250, 250, 250)"] {
    background-color: #242427 !important;
}

/* ─── MODO OSCURO: sin azul marino al cargar y barras más suaves ───────────
   --color-black del tema es #101828 (el azul marino antiguo): lo usan el
   preloader que cubre la pantalla al recargar y los fondos de los modales.
   Las barras de progreso y el semáforo se apagan: mismo tono, menos saturación.
   Los selectores de color literal acaban en «;» o al final del atributo para no
   coger los hex con alfa (#7BC07818). */
.dark {
    --color-black: #111113;
    --rw-green-400: #689E65;
    --rw-red-400: #C47064;
}
.dark [style*="background:#7BC078;" i], .dark [style$="background:#7BC078" i],
.dark [style*="background: #7BC078;" i], .dark [style*="background: rgb(123, 192, 120)"] { background-color: #689E65 !important; }
.dark [style*="background:#F87A66;" i], .dark [style$="background:#F87A66" i],
.dark [style*="background:#f87171;" i], .dark [style$="background:#f87171" i],
.dark [style*="background: rgb(248, 122, 102)"], .dark [style*="background: rgb(248, 113, 113)"] { background-color: #C47064 !important; }
.dark [style*="background:#fbbf24;" i], .dark [style$="background:#fbbf24" i],
.dark [style*="background: rgb(251, 191, 36)"] { background-color: #C4A24E !important; }

/* ─── UTILIDADES QUE FALTABAN EN EL BUILD (5 oct 2026) ──────────────────────
   tailwind.css es un build parcial: estas clases se usaban en el HTML y no
   hacían nada. La más grave, min-w-0 (51 usos): sin ella una columna flex no
   puede estrecharse por debajo de su texto más largo, los títulos no se cortan
   con «…» y en la cola de postproducción la columna derecha se salía de la
   pantalla con los timers dentro en cualquier portátil de 13". */
.min-w-0 { min-width: 0; }
.w-36 { width: calc(var(--spacing) * 36); }
.w-48 { width: calc(var(--spacing) * 48); }
.px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); }
.last\:pr-0:last-child { padding-right: 0; }
.tracking-wider { letter-spacing: 0.05em; }
.-space-x-1\.5 > :not(:last-child) { margin-inline-end: calc(var(--spacing) * -1.5); }
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}