/* Temas manuales white-label base.
   En esta fase solo se pulen paletas y superficies visuales. */

/* Default / Punto de Lavado */
body.theme-default {
    --color-primary: #4a5899;
    --color-primary-hover: #3b467b;
    --color-secondary: #da44a0;
    --color-secondary-hover: #be2d84;
    --color-accent: #559cad;
    --color-title: #4a5899;
    --color-text: #2f2440;
    --color-text-secondary: #736278;
    --color-bg: #f8eff6;
    --color-bg-strong: #fcf5fa;
    --color-surface: #f3dde9;
    --color-surface-soft: #fcf7fb;
    --color-card: #ffffff;
    --color-card-soft: rgba(255, 255, 255, 0.88);
    --color-border: rgba(85, 156, 173, 0.24);
    --color-border-strong: rgba(85, 156, 173, 0.35);
    --color-topbar-bg: #ffffff;
    --color-topbar-border: rgba(85, 156, 173, 0.18);
    --color-sidebar-link-hover-bg: rgba(85, 156, 173, 0.12);
    --color-sidebar-active-bg: #da44a0;
    --color-sidebar-active-text: #ffffff;
    --color-sidebar-card-bg: #ffffff;
    --color-sidebar-card-border: rgba(0, 0, 0, 0.08);
    --color-mobile-nav-bg: rgba(255, 255, 255, 0.92);
    --color-mobile-nav-text: #4a5899;
    --color-mobile-nav-active-bg: #f3dde9;
    --color-mobile-nav-active-text: #da44a0;
    --color-mobile-sheet-bg: rgba(255, 255, 255, 0.96);
    --color-mobile-sheet-border: rgba(0, 0, 0, 0.08);
    --color-notification-badge-bg: #da44a0;
    --color-notification-badge-text: #ffffff;
    --color-focus-ring: rgba(74, 88, 153, 0.14);
    --color-sticky-topbar-mask: #fbf5fa;
    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: rgba(74, 88, 153, 0.28);
    --color-button-outline-hover-bg: rgba(74, 88, 153, 0.08);
    --shadow-button-secondary: 0 14px 26px rgba(218, 68, 160, 0.22);
    --shadow-button-primary-strong: 0 10px 24px rgba(74, 88, 153, 0.18);
    --shadow-button-primary-hover: 0 14px 28px rgba(74, 88, 153, 0.22);
    --shadow-button-primary-active: 0 8px 18px rgba(74, 88, 153, 0.16);
    --state-success: #d6f0df;
    --state-warning: #fff0c9;
    --state-danger: #f8d7e4;
    --state-info: #d8edf2;
    --card-surface: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(252, 247, 251, 0.96) 100%
    );
    --app-background: radial-gradient(circle at top right, rgba(218, 68, 160, 0.14), transparent 24%),
        linear-gradient(180deg, var(--color-bg-strong) 0%, var(--color-bg) 100%);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --secondary-dark: var(--color-secondary-hover);
    --accent: var(--color-accent);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --panel-surface: var(--card-surface);
    --surface-strong: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --border: var(--color-border-strong);
    --card: var(--color-card);
    --bg: var(--color-bg);
    --white: #ffffff;
    --success: var(--state-success);
    --warning: var(--state-warning);
    --danger: var(--state-danger);
    --info: var(--state-info);
    --shadow: var(--shadow-card);
    --radius: var(--radius-lg);
    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-hover);
    --color-button-secondary: var(--color-secondary);
    --color-button-secondary-hover: var(--color-secondary-hover);
}

/* Azul profesional */
body.theme-blue {
    --color-primary: #2347a8;
    --color-primary-hover: #1a3788;
    --color-secondary: #3b78d8;
    --color-secondary-hover: #2d63bc;
    --color-accent: #79b8eb;
    --color-title: #2347a8;
    --color-text: #1b2c52;
    --color-text-secondary: #58719b;
    --color-bg: #edf4ff;
    --color-bg-strong: #f8fbff;
    --color-surface: #dce9fb;
    --color-surface-soft: #f4f8ff;
    --color-card: #ffffff;
    --color-card-soft: rgba(255, 255, 255, 0.92);
    --color-border: rgba(59, 120, 216, 0.2);
    --color-border-strong: rgba(59, 120, 216, 0.32);
    --color-topbar-bg: #ffffff;
    --color-topbar-border: rgba(59, 120, 216, 0.24);
    --color-sidebar-link-hover-bg: rgba(59, 120, 216, 0.1);
    --color-sidebar-active-bg: #2347a8;
    --color-sidebar-active-text: #ffffff;
    --color-sidebar-card-bg: #ffffff;
    --color-sidebar-card-border: rgba(59, 120, 216, 0.15);
    --color-mobile-nav-bg: rgba(255, 255, 255, 0.94);
    --color-mobile-nav-text: #2347a8;
    --color-mobile-nav-active-bg: #dce9fb;
    --color-mobile-nav-active-text: #2347a8;
    --color-mobile-sheet-bg: rgba(255, 255, 255, 0.97);
    --color-mobile-sheet-border: rgba(59, 120, 216, 0.16);
    --color-notification-badge-bg: #3b78d8;
    --color-notification-badge-text: #ffffff;
    --color-focus-ring: rgba(35, 71, 168, 0.16);
    --color-sticky-topbar-mask: #f2f7ff;
    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: rgba(35, 71, 168, 0.24);
    --color-button-outline-hover-bg: rgba(35, 71, 168, 0.08);
    --shadow-button-secondary: 0 14px 26px rgba(59, 120, 216, 0.22);
    --shadow-button-primary-strong: 0 10px 24px rgba(35, 71, 168, 0.2);
    --shadow-button-primary-hover: 0 14px 28px rgba(35, 71, 168, 0.24);
    --shadow-button-primary-active: 0 8px 18px rgba(35, 71, 168, 0.18);
    --card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 248, 255, 0.99) 100%);
    --app-background: radial-gradient(circle at top right, rgba(59, 120, 216, 0.11), transparent 24%),
        linear-gradient(180deg, var(--color-bg-strong) 0%, var(--color-bg) 100%);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --secondary-dark: var(--color-secondary-hover);
    --accent: var(--color-accent);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --panel-surface: var(--card-surface);
    --surface-strong: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --border: var(--color-border-strong);
    --card: var(--color-card);
    --bg: var(--color-bg);
    --white: #ffffff;
    --success: var(--state-success);
    --warning: var(--state-warning);
    --danger: var(--state-danger);
    --info: var(--state-info);
    --shadow: var(--shadow-card);
    --radius: var(--radius-lg);
    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-hover);
    --color-button-secondary: var(--color-secondary);
    --color-button-secondary-hover: var(--color-secondary-hover);
}

/* Verde operativo */
body.theme-green {
    --color-primary: #176f5b;
    --color-primary-hover: #125948;
    --color-secondary: #2d9a7b;
    --color-secondary-hover: #227c63;
    --color-accent: #62c2a3;
    --color-title: #176f5b;
    --color-text: #1d3a33;
    --color-text-secondary: #5b7c73;
    --color-bg: #edf9f4;
    --color-bg-strong: #f8fcfa;
    --color-surface: #d9f1e6;
    --color-surface-soft: #f3fcf7;
    --color-card: #ffffff;
    --color-card-soft: rgba(255, 255, 255, 0.92);
    --color-border: rgba(45, 154, 123, 0.2);
    --color-border-strong: rgba(45, 154, 123, 0.32);
    --color-topbar-bg: #ffffff;
    --color-topbar-border: rgba(45, 154, 123, 0.24);
    --color-sidebar-link-hover-bg: rgba(45, 154, 123, 0.1);
    --color-sidebar-active-bg: #176f5b;
    --color-sidebar-active-text: #ffffff;
    --color-sidebar-card-bg: #ffffff;
    --color-sidebar-card-border: rgba(45, 154, 123, 0.16);
    --color-mobile-nav-bg: rgba(255, 255, 255, 0.94);
    --color-mobile-nav-text: #176f5b;
    --color-mobile-nav-active-bg: #d9f1e6;
    --color-mobile-nav-active-text: #176f5b;
    --color-mobile-sheet-bg: rgba(255, 255, 255, 0.97);
    --color-mobile-sheet-border: rgba(45, 154, 123, 0.16);
    --color-notification-badge-bg: #2d9a7b;
    --color-notification-badge-text: #ffffff;
    --color-focus-ring: rgba(23, 111, 91, 0.16);
    --color-sticky-topbar-mask: #f1faf6;
    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: rgba(23, 111, 91, 0.24);
    --color-button-outline-hover-bg: rgba(23, 111, 91, 0.08);
    --shadow-button-secondary: 0 14px 26px rgba(45, 154, 123, 0.2);
    --shadow-button-primary-strong: 0 10px 24px rgba(23, 111, 91, 0.18);
    --shadow-button-primary-hover: 0 14px 28px rgba(23, 111, 91, 0.22);
    --shadow-button-primary-active: 0 8px 18px rgba(23, 111, 91, 0.16);
    --card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(243, 252, 247, 0.99) 100%);
    --app-background: radial-gradient(circle at top right, rgba(45, 154, 123, 0.11), transparent 24%),
        linear-gradient(180deg, var(--color-bg-strong) 0%, var(--color-bg) 100%);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --secondary-dark: var(--color-secondary-hover);
    --accent: var(--color-accent);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --panel-surface: var(--card-surface);
    --surface-strong: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --border: var(--color-border-strong);
    --card: var(--color-card);
    --bg: var(--color-bg);
    --white: #ffffff;
    --success: var(--state-success);
    --warning: var(--state-warning);
    --danger: var(--state-danger);
    --info: var(--state-info);
    --shadow: var(--shadow-card);
    --radius: var(--radius-lg);
    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-hover);
    --color-button-secondary: var(--color-secondary);
    --color-button-secondary-hover: var(--color-secondary-hover);
}

/* Premium elegante */
body.theme-premium {
    --color-primary: #243252;
    --color-primary-hover: #1a2440;
    --color-secondary: #b88a45;
    --color-secondary-hover: #9a7135;
    --color-accent: #8e99c6;
    --color-title: #243252;
    --color-text: #302c36;
    --color-text-secondary: #6d6674;
    --color-bg: #f7f2ea;
    --color-bg-strong: #fdfaf4;
    --color-surface: #eee3d5;
    --color-surface-soft: #fcf8f1;
    --color-card: #ffffff;
    --color-card-soft: rgba(255, 255, 255, 0.93);
    --color-border: rgba(184, 138, 69, 0.16);
    --color-border-strong: rgba(142, 153, 198, 0.26);
    --color-topbar-bg: #ffffff;
    --color-topbar-border: rgba(142, 153, 198, 0.18);
    --color-sidebar-link-hover-bg: rgba(184, 138, 69, 0.08);
    --color-sidebar-active-bg: #243252;
    --color-sidebar-active-text: #ffffff;
    --color-sidebar-card-bg: #ffffff;
    --color-sidebar-card-border: rgba(142, 153, 198, 0.14);
    --color-mobile-nav-bg: rgba(255, 255, 255, 0.94);
    --color-mobile-nav-text: #243252;
    --color-mobile-nav-active-bg: #eee3d5;
    --color-mobile-nav-active-text: #b88a45;
    --color-mobile-sheet-bg: rgba(255, 255, 255, 0.97);
    --color-mobile-sheet-border: rgba(142, 153, 198, 0.14);
    --color-notification-badge-bg: #b88a45;
    --color-notification-badge-text: #ffffff;
    --color-focus-ring: rgba(36, 50, 82, 0.14);
    --color-sticky-topbar-mask: #fbf6ef;
    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: rgba(36, 50, 82, 0.22);
    --color-button-outline-hover-bg: rgba(36, 50, 82, 0.08);
    --shadow-button-secondary: 0 14px 26px rgba(184, 138, 69, 0.22);
    --shadow-button-primary-strong: 0 10px 24px rgba(36, 50, 82, 0.18);
    --shadow-button-primary-hover: 0 14px 28px rgba(36, 50, 82, 0.22);
    --shadow-button-primary-active: 0 8px 18px rgba(36, 50, 82, 0.16);
    --card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(252, 248, 241, 0.99) 100%);
    --app-background: radial-gradient(circle at top right, rgba(184, 138, 69, 0.09), transparent 24%),
        linear-gradient(180deg, var(--color-bg-strong) 0%, var(--color-bg) 100%);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --secondary-dark: var(--color-secondary-hover);
    --accent: var(--color-accent);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --panel-surface: var(--card-surface);
    --surface-strong: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --border: var(--color-border-strong);
    --card: var(--color-card);
    --bg: var(--color-bg);
    --white: #ffffff;
    --success: var(--state-success);
    --warning: var(--state-warning);
    --danger: var(--state-danger);
    --info: var(--state-info);
    --shadow: var(--shadow-card);
    --radius: var(--radius-lg);
    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-hover);
    --color-button-secondary: var(--color-secondary);
    --color-button-secondary-hover: var(--color-secondary-hover);
}

/* Minimal neutro */
body.theme-minimal {
    --color-primary: #39495d;
    --color-primary-hover: #2b3747;
    --color-secondary: #66778d;
    --color-secondary-hover: #4f6076;
    --color-accent: #99a9bb;
    --color-title: #334155;
    --color-text: #1f2933;
    --color-text-secondary: #697586;
    --color-bg: #f8fafb;
    --color-bg-strong: #ffffff;
    --color-surface: #edf2f6;
    --color-surface-soft: #fbfcfe;
    --color-card: #ffffff;
    --color-card-soft: rgba(255, 255, 255, 0.94);
    --color-border: rgba(153, 169, 187, 0.2);
    --color-border-strong: rgba(153, 169, 187, 0.3);
    --color-topbar-bg: #ffffff;
    --color-topbar-border: rgba(153, 169, 187, 0.2);
    --color-sidebar-link-hover-bg: rgba(153, 169, 187, 0.1);
    --color-sidebar-active-bg: #39495d;
    --color-sidebar-active-text: #ffffff;
    --color-sidebar-card-bg: #ffffff;
    --color-sidebar-card-border: rgba(153, 169, 187, 0.16);
    --color-mobile-nav-bg: rgba(255, 255, 255, 0.95);
    --color-mobile-nav-text: #39495d;
    --color-mobile-nav-active-bg: #edf2f6;
    --color-mobile-nav-active-text: #39495d;
    --color-mobile-sheet-bg: rgba(255, 255, 255, 0.98);
    --color-mobile-sheet-border: rgba(153, 169, 187, 0.16);
    --color-notification-badge-bg: #66778d;
    --color-notification-badge-text: #ffffff;
    --color-focus-ring: rgba(57, 73, 93, 0.14);
    --color-sticky-topbar-mask: #f8fafc;
    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: rgba(57, 73, 93, 0.22);
    --color-button-outline-hover-bg: rgba(57, 73, 93, 0.08);
    --shadow-button-secondary: 0 14px 26px rgba(102, 119, 141, 0.2);
    --shadow-button-primary-strong: 0 10px 24px rgba(57, 73, 93, 0.16);
    --shadow-button-primary-hover: 0 14px 28px rgba(57, 73, 93, 0.2);
    --shadow-button-primary-active: 0 8px 18px rgba(57, 73, 93, 0.14);
    --card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(251, 252, 254, 0.99) 100%);
    --app-background: linear-gradient(180deg, var(--color-bg-strong) 0%, var(--color-bg) 100%);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --secondary-dark: var(--color-secondary-hover);
    --accent: var(--color-accent);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --panel-surface: var(--card-surface);
    --surface-strong: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --border: var(--color-border-strong);
    --card: var(--color-card);
    --bg: var(--color-bg);
    --white: #ffffff;
    --success: var(--state-success);
    --warning: var(--state-warning);
    --danger: var(--state-danger);
    --info: var(--state-info);
    --shadow: var(--shadow-card);
    --radius: var(--radius-lg);
    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-hover);
    --color-button-secondary: var(--color-secondary);
    --color-button-secondary-hover: var(--color-secondary-hover);
}

/* Rosado Boutique */
body.theme-rose {
    --color-primary: #9b4f7f;
    --color-primary-hover: #7f4067;
    --color-secondary: #d684a6;
    --color-secondary-hover: #c26f92;
    --color-accent: #e8b7cb;
    --color-title: #8f4876;
    --color-text: #4a3243;
    --color-text-secondary: #856779;
    --color-bg: #fcf3f7;
    --color-bg-strong: #fff9fb;
    --color-surface: #f6dee8;
    --color-surface-soft: #fff8fb;
    --color-card: #ffffff;
    --color-card-soft: rgba(255, 255, 255, 0.93);
    --color-border: rgba(214, 132, 166, 0.22);
    --color-border-strong: rgba(214, 132, 166, 0.34);
    --color-topbar-bg: #ffffff;
    --color-topbar-border: rgba(214, 132, 166, 0.18);
    --color-sidebar-link-hover-bg: rgba(214, 132, 166, 0.10);
    --color-sidebar-active-bg: #9b4f7f;
    --color-sidebar-active-text: #ffffff;
    --color-sidebar-card-bg: #ffffff;
    --color-sidebar-card-border: rgba(214, 132, 166, 0.14);
    --color-mobile-nav-bg: rgba(255, 255, 255, 0.94);
    --color-mobile-nav-text: #8f4876;
    --color-mobile-nav-active-bg: #f6dee8;
    --color-mobile-nav-active-text: #9b4f7f;
    --color-mobile-sheet-bg: rgba(255, 255, 255, 0.97);
    --color-mobile-sheet-border: rgba(214, 132, 166, 0.16);
    --color-notification-badge-bg: #d684a6;
    --color-notification-badge-text: #ffffff;
    --color-focus-ring: rgba(155, 79, 127, 0.16);
    --color-sticky-topbar-mask: #fff7fa;
    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: rgba(143, 72, 118, 0.24);
    --color-button-outline-hover-bg: rgba(143, 72, 118, 0.08);
    --shadow-button-secondary: 0 14px 26px rgba(214, 132, 166, 0.22);
    --shadow-button-primary-strong: 0 10px 24px rgba(155, 79, 127, 0.18);
    --shadow-button-primary-hover: 0 14px 28px rgba(155, 79, 127, 0.22);
    --shadow-button-primary-active: 0 8px 18px rgba(155, 79, 127, 0.16);
    --card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 248, 251, 0.99) 100%);
    --app-background: radial-gradient(circle at top right, rgba(214, 132, 166, 0.12), transparent 24%),
        linear-gradient(180deg, var(--color-bg-strong) 0%, var(--color-bg) 100%);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-hover);
    --secondary: var(--color-secondary);
    --secondary-dark: var(--color-secondary-hover);
    --accent: var(--color-accent);
    --background: var(--color-bg);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-soft);
    --panel-surface: var(--card-surface);
    --surface-strong: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--color-border);
    --border: var(--color-border-strong);
    --card: var(--color-card);
    --bg: var(--color-bg);
    --white: #ffffff;
    --success: var(--state-success);
    --warning: var(--state-warning);
    --danger: var(--state-danger);
    --info: var(--state-info);
    --shadow: var(--shadow-card);
    --radius: var(--radius-lg);
    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-hover);
    --color-button-secondary: var(--color-secondary);
    --color-button-secondary-hover: var(--color-secondary-hover);
}