/**
 * ARCHIVO: thinscen-ttp-variables.css
 * PROPÓSITO: Variables de color dinámicas para TTP (Transforma Tu Poder)
 * PALETA: TTP Morados y Dorados - 7 secciones degradadas Azul profundo → lavanda → blanco
 * ORIGEN: Convertido desde paleta CBE tierras cálidas para programas Claudia MAR
 * COMPATIBILIDAD: PHP 8.x + Marco THINSCEN + thinscen-central-palette.css
 * FECHA: 13 Nov 2025
 */

:root {

  --primary-dark: #3a0642;
  --primary-light: #a976bc;
  --accent-purple: #8b4ca2;
  --accent-hover: #a364bb;
  --lavender-light: #d3b1d8;
  --lavender-medium: #a976bc;
  --theme-text-primary: #4d125a;
  --text-dark: #3a0642;
  /* bandas */
  --theme-band-1-bg: linear-gradient(135deg, #3a0642 0%, #4d125a 100%);
  --theme-band-2-bg: linear-gradient(135deg, #4d125a 0%, #a976bc 100%);
  --theme-band-3-bg: linear-gradient(135deg, #a976bc 0%, #8b4ca2 100%);
  --theme-band-4-bg: linear-gradient(135deg, #8b4ca2 0%, #a976bc 100%);
  --theme-band-5-bg: linear-gradient(135deg, #a976bc 0%, #d3b1d8 100%);
  --theme-band-6-bg: linear-gradient(135deg, #d3b1d8 0%, #f5eef6 100%);
  --theme-band-7-bg: linear-gradient(135deg, #f5eef6 0%, #ffffff 100%);
  --theme-nav-bg: linear-gradient(135deg, #3a0642 0%, #4d125a 50%, #a976bc 100%);
  --theme-footer-bg: linear-gradient(135deg, #3a0642 0%, #4d125a 50%, #a976bc 100%);

  /* ====================================== */
  /*    VARIABLES COMPARTIDAS C01          */
  /* ====================================== */
  
  /* Transiciones */
  --c01-transition-duration: 0.3s;
  
  /* Border radius */
  --c01-border-radius-small: 0.375rem;
  --c01-border-radius-medium: 0.75rem;
  --c01-border-radius-large: 1.5rem;
  
  /* Sombras */
  --c01-shadow-light: 0 4px 12px rgba(58, 6, 66, 0.08);
  --c01-shadow-medium: 0 10px 30px rgba(58, 6, 66, 0.1);
  --c01-shadow-heavy: 0 15px 35px rgba(58, 6, 66, 0.15);

  /* ====================================== */
  /*        SECCIÓN 1 - MÁS OSCURA         */
  /*   Azul profundo (theme-band-1 base)  */
  /* ====================================== */
  --c01-s01-bg: #3a0642;          /* Morado profundo MAR */
  --c01-s01-form-bg: #4d125a;     /* Azul medio */
  --c01-s01-form-shadow: #2d0334; /* Sombra caoba oscura */
  
  /* Botones sobre fondo de sección */
  --c01-s01-btn-bg-active: #dca315;    /* Dorado suave (accent) */
  --c01-s01-btn-bg-hover: #edb427;     /* Dorado más claro */
  --c01-s01-btn-bg-disabled: #765a78;  /* Dorado apagado */
  
  /* Botones sobre recuadro */
  --c01-s01-btn-frame-active: #a976bc;  /* Lavanda medio-claro */
  --c01-s01-btn-frame-hover: #b697bd;   /* Lavanda claro */
  --c01-s01-btn-frame-disabled: #765a78; /* Tierra apagada */
  
  /* Texto */
  --c01-s01-text-section: #ffffff;    /* Blanco */
  --c01-s01-text-frame: #f0e6f2;      /* Blanco ligeramente lavanda */

  /* ====================================== */
  /*        SECCIÓN 2 - MEDIO-OSCURO       */
  /*    Azul medio (theme-band-2 base)    */
  /* ====================================== */
  --c01-s02-bg: #4d125a;          /* Morado medio-oscuro MAR */
  --c01-s02-form-bg: #621d72;     /* Azul medio-claro */
  --c01-s02-form-shadow: #3a0a46; /* Sombra azul */
  
  /* Botones sobre fondo de sección */
  --c01-s02-btn-bg-active: #dca315;    /* Dorado suave */
  --c01-s02-btn-bg-hover: #edb427;     /* Dorado más claro */
  --c01-s02-btn-bg-disabled: #765a78;  /* Dorado apagado */
  
  /* Botones sobre recuadro */
  --c01-s02-btn-frame-active: #a976bc;  /* Lavanda medio-claro */
  --c01-s02-btn-frame-hover: #b697bd;   /* Lavanda claro */
  --c01-s02-btn-frame-disabled: #765a78; /* Tierra apagada */
  
  /* Texto */
  --c01-s02-text-section: #ffffff;    /* Blanco */
  --c01-s02-text-frame: #f0e6f2;      /* Blanco ligeramente lavanda */

  /* ====================================== */
  /*       SECCIÓN 3 - AZUL-LAVANDA        */
  /*    Azul-lavanda (theme-band-3 base)  */
  /* ====================================== */
  --c01-s03-bg: #a976bc;          /* Morado medio MAR */
  --c01-s03-form-bg: #7a3390;     /* Azul-lavanda más claro */
  --c01-s03-form-shadow: #4f195d; /* Sombra azul-lavanda */
  
  /* Botones sobre fondo de sección */
  --c01-s03-btn-bg-active: #dca315;    /* Dorado suave */
  --c01-s03-btn-bg-hover: #edb427;     /* Dorado más claro */
  --c01-s03-btn-bg-disabled: #765a78;  /* Dorado apagado */
  
  /* Botones sobre recuadro */
  --c01-s03-btn-frame-active: #a976bc;  /* Lavanda medio-claro */
  --c01-s03-btn-frame-hover: #b697bd;   /* Lavanda claro */
  --c01-s03-btn-frame-disabled: #765a78; /* Tierra apagada */
  
  /* Texto */
  --c01-s03-text-section: #ffffff;    /* Blanco */
  --c01-s03-text-frame: #e2cbea;      /* Blanco lavanda claro */

  /* ====================================== */
  /*        SECCIÓN 4 - PUNTO MEDIO        */
  /*   Azul-lavanda medio (theme-band-4)  */
  /* ====================================== */
  --c01-s04-bg: #8b4ca2;          /* Morado-lila medio MAR */
  --c01-s04-form-bg: #a364bb;     /* Azul-lavanda claro */
  --c01-s04-form-shadow: #693b7a; /* Sombra azul-lavanda */
  
  /* Botones sobre fondo de sección */
  --c01-s04-btn-bg-active: #dca315;    /* Dorado suave */
  --c01-s04-btn-bg-hover: #edb427;     /* Dorado más claro */
  --c01-s04-btn-bg-disabled: #765a78;  /* Dorado apagado */
  
  /* Botones sobre recuadro */
  --c01-s04-btn-frame-active: #3a0642;  /* Caoba oscuro, contraste */
  --c01-s04-btn-frame-hover: #4d125a;   /* Azul medio */
  --c01-s04-btn-frame-disabled: #3a0a46; /* Azul apagado */
  
  /* Texto */
  --c01-s04-text-section: #ffffff;    /* Blanco */
  --c01-s04-text-frame: #ffffff;      /* Blanco */

  /* ====================================== */
  /*      SECCIÓN 5 - LAVANDA MEDIO        */
  /*  Lavanda medio-claro (theme-band-5)  */
  /* ====================================== */
  --c01-s05-bg: #a976bc;          /* Lila medio-claro MAR */
  --c01-s05-form-bg: #b697bd;     /* Lavanda claro */
  --c01-s05-form-shadow: #875f99; /* Sombra lavanda */
  
  /* Botones sobre fondo de sección */
  --c01-s05-btn-bg-active: #3a0642;    /* Caoba oscuro, contraste */
  --c01-s05-btn-bg-hover: #4d125a;     /* Azul medio */
  --c01-s05-btn-bg-disabled: #3a0a46;  /* Azul apagado */
  
  /* Botones sobre recuadro */
  --c01-s05-btn-frame-active: #dca315;  /* Dorado suave */
  --c01-s05-btn-frame-hover: #edb427;   /* Dorado más claro */
  --c01-s05-btn-frame-disabled: #765a78; /* Dorado apagado */
  
  /* Texto */
  --c01-s05-text-section: #dca315;    /* Dorado suave */
  --c01-s05-text-frame: #3a0642;      /* Azul profundo */

  /* ====================================== */
  /*       SECCIÓN 6 - LAVANDA CLARO       */
  /*   Lavanda claro (theme-band-6 base)  */
  /* ====================================== */
  --c01-s06-bg: #f0e6f2;          /* Lila claro MAR */
  --c01-s06-form-bg: #e2cbea;     /* Lavanda muy claro */
  --c01-s06-form-shadow: #b697bd; /* Sombra lavanda suave */
  
  /* Botones sobre fondo de sección */
  --c01-s06-btn-bg-active: #3a0642;    /* Caoba oscuro, contraste */
  --c01-s06-btn-bg-hover: #4d125a;     /* Azul medio */
  --c01-s06-btn-bg-disabled: #3a0a46;  /* Azul apagado */
  
  /* Botones sobre recuadro */
  --c01-s06-btn-frame-active: #dca315;  /* Dorado suave */
  --c01-s06-btn-frame-hover: #edb427;   /* Dorado más claro */
  --c01-s06-btn-frame-disabled: #765a78; /* Dorado apagado */
  
  /* Texto */
  --c01-s06-text-section: #dca315;    /* Dorado suave */
  --c01-s06-text-frame: #3a0642;      /* Azul profundo */

  /* ====================================== */
  /*        SECCIÓN 7 - MÁS CLARA          */
  /*   Casi blanco (theme-band-7 base)    */
  /* ====================================== */
  --c01-s07-bg: #f5eef6;          /* Lila casi blanco MAR */
  --c01-s07-form-bg: #ffffff;     /* Blanco */
  --c01-s07-form-shadow: #d8cad9; /* Sombra muy suave */
  
  /* Botones sobre fondo de sección */
  --c01-s07-btn-bg-active: #3a0642;    /* Caoba oscuro, contraste */
  --c01-s07-btn-bg-hover: #4d125a;     /* Azul medio */
  --c01-s07-btn-bg-disabled: #3a0a46;  /* Azul apagado */
  
  /* Botones sobre recuadro */
  --c01-s07-btn-frame-active: #dca315;  /* Dorado suave */
  --c01-s07-btn-frame-hover: #edb427;   /* Dorado más claro */
  --c01-s07-btn-frame-disabled: #765a78; /* Dorado apagado */
  
  /* Texto */
  --c01-s07-text-section: #dca315;    /* Dorado suave */
  --c01-s07-text-frame: #3a0642;      /* Azul profundo */

  /* ====================================== */
  /*      ELEMENTOS ESPECIALES C01         */
  /* ====================================== */
  
  /* Bordes y acentos */
  --c01-border-accent: #8b4ca2;     /* Azul-lavanda medio */
  --c01-border-light: rgba(139, 76, 162, 0.2);  /* Azul-lavanda translúcido */
  
  /* Overlay y modales */
  --c01-overlay-dark: rgba(58, 6, 66, 0.7);
  --c01-overlay-light: rgba(255, 255, 255, 0.9);
  
  /* Success/Error states */
  --c01-success: #15b859;
  --c01-warning: #f39c12;
  --c01-error: #e74c3c;
  --c01-info: #8b4ca2;
  
  /* Gradientes especiales */
  --c01-gradient-primary: linear-gradient(135deg, #3a0642 0%, #4d125a 100%);
  --c01-gradient-secondary: linear-gradient(135deg, #a976bc 0%, #a976bc 100%);
  --c01-gradient-light: linear-gradient(135deg, #f0e6f2 0%, #f5eef6 100%);
  
  /* ====================================== */
  /*    COMPATIBILIDAD CON cb1 (legacy)   */
  /*  Aliases para código legacy Claudia  */
  /* ====================================== */
  
  /* Mapeo cb1 → c01 para compatibilidad retroactiva */
  --cb1-s01-bg: var(--c01-s01-bg);
  --cb1-s01-form-bg: var(--c01-s01-form-bg);
  --cb1-s01-btn-bg-active: var(--c01-s01-btn-bg-active);
  --cb1-s01-btn-bg-hover: var(--c01-s01-btn-bg-hover);
  --cb1-s01-btn-bg-disabled: var(--c01-s01-btn-bg-disabled);
  --cb1-s01-text-section: var(--c01-s01-text-section);
  --cb1-s01-text-frame: var(--c01-s01-text-frame);
  
  --cb1-s02-bg: var(--c01-s02-bg);
  --cb1-s02-form-bg: var(--c01-s02-form-bg);
  --cb1-s02-btn-bg-active: var(--c01-s02-btn-bg-active);
  --cb1-s02-btn-bg-hover: var(--c01-s02-btn-bg-hover);
  --cb1-s02-btn-bg-disabled: var(--c01-s02-btn-bg-disabled);
  --cb1-s02-text-section: var(--c01-s02-text-section);
  --cb1-s02-text-frame: var(--c01-s02-text-frame);
  
  --cb1-s03-bg: var(--c01-s03-bg);
  --cb1-s03-form-bg: var(--c01-s03-form-bg);
  --cb1-s03-btn-bg-active: var(--c01-s03-btn-bg-active);
  --cb1-s03-btn-bg-hover: var(--c01-s03-btn-bg-hover);
  --cb1-s03-btn-bg-disabled: var(--c01-s03-btn-bg-disabled);
  --cb1-s03-text-section: var(--c01-s03-text-section);
  --cb1-s03-text-frame: var(--c01-s03-text-frame);
  
  --cb1-s04-bg: var(--c01-s04-bg);
  --cb1-s04-form-bg: var(--c01-s04-form-bg);
  --cb1-s04-btn-bg-active: var(--c01-s04-btn-bg-active);
  --cb1-s04-btn-bg-hover: var(--c01-s04-btn-bg-hover);
  --cb1-s04-btn-bg-disabled: var(--c01-s04-btn-bg-disabled);
  --cb1-s04-text-section: var(--c01-s04-text-section);
  --cb1-s04-text-frame: var(--c01-s04-text-frame);
  
  --cb1-s05-bg: var(--c01-s05-bg);
  --cb1-s05-form-bg: var(--c01-s05-form-bg);
  --cb1-s05-btn-bg-active: var(--c01-s05-btn-bg-active);
  --cb1-s05-btn-bg-hover: var(--c01-s05-btn-bg-hover);
  --cb1-s05-btn-bg-disabled: var(--c01-s05-btn-bg-disabled);
  --cb1-s05-text-section: var(--c01-s05-text-section);
  --cb1-s05-text-frame: var(--c01-s05-text-frame);
  
  --cb1-s06-bg: var(--c01-s06-bg);
  --cb1-s06-form-bg: var(--c01-s06-form-bg);
  --cb1-s06-btn-bg-active: var(--c01-s06-btn-bg-active);
  --cb1-s06-btn-bg-hover: var(--c01-s06-btn-bg-hover);
  --cb1-s06-btn-bg-disabled: var(--c01-s06-btn-bg-disabled);
  --cb1-s06-text-section: var(--c01-s06-text-section);
  --cb1-s06-text-frame: var(--c01-s06-text-frame);
  
  --cb1-s07-bg: var(--c01-s07-bg);
  --cb1-s07-form-bg: var(--c01-s07-form-bg);
  --cb1-s07-btn-bg-active: var(--c01-s07-btn-bg-active);
  --cb1-s07-btn-bg-hover: var(--c01-s07-btn-bg-hover);
  --cb1-s07-btn-bg-disabled: var(--c01-s07-btn-bg-disabled);
  --cb1-s07-text-section: var(--c01-s07-text-section);
  --cb1-s07-text-frame: var(--c01-s07-text-frame);
  
  /* Variables compartidas cb1 */
  --cb1-transition-duration: var(--c01-transition-duration);
  --cb1-border-radius-small: var(--c01-border-radius-small);
  --cb1-border-radius-medium: var(--c01-border-radius-medium);
  --cb1-border-radius-large: var(--c01-border-radius-large);
  --cb1-shadow-light: var(--c01-shadow-light);
  --cb1-shadow-medium: var(--c01-shadow-medium);
  --cb1-shadow-heavy: var(--c01-shadow-heavy);
}

/* ====================================== */
/*   OVERRIDE DARK MODE - PALETA TTP    */
/*   Sobrescribe central-palette.css    */
/* ====================================== */

[data-theme="dark"] {
  /* Bandas - sobrescriben las azules del central palette */
  --theme-band-1-bg: linear-gradient(135deg, rgba(58, 6, 66, 0.95) 0%, rgba(77, 18, 90, 0.9) 100%);
  --theme-band-2-bg: linear-gradient(135deg, rgba(77, 18, 90, 0.9) 0%, rgba(169, 118, 188, 0.85) 100%);
  --theme-band-3-bg: linear-gradient(135deg, rgba(169, 118, 188, 0.85) 0%, rgba(139, 76, 162, 0.8) 100%);
  --theme-band-4-bg: linear-gradient(135deg, rgba(139, 76, 162, 0.8) 0%, rgba(169, 118, 188, 0.7) 100%);
  --theme-band-5-bg: linear-gradient(135deg, rgba(169, 118, 188, 0.7) 0%, rgba(211, 177, 216, 0.3) 100%);
  --theme-band-6-bg: linear-gradient(135deg, rgba(211, 177, 216, 0.3) 0%, rgba(58, 6, 66, 0.95) 100%);
  --theme-band-7-bg: linear-gradient(135deg, rgba(245, 238, 246, 0.1) 0%, rgba(58, 6, 66, 0.95) 100%);
  --theme-band-8-bg: rgba(58, 6, 66, 0.95);

  /* Nav y footer */
  --theme-nav-bg: linear-gradient(135deg, rgba(58, 6, 66, 0.95) 0%, rgba(77, 18, 90, 0.9) 50%, rgba(169, 118, 188, 0.85) 100%);
  --theme-nav-bg-scrolled: rgba(58, 6, 66, 0.98);
  --theme-nav-text: #f0e6f2;
  --theme-footer-bg: linear-gradient(135deg, rgba(58, 6, 66, 0.95) 0%, rgba(77, 18, 90, 0.9) 50%, rgba(169, 118, 188, 0.85) 100%);
  --theme-footer-text: #f0e6f2;
  --theme-footer-text-muted: rgba(240, 230, 242, 0.7);

  /* Backgrounds generales */
  --theme-bg-primary: rgba(58, 6, 66, 0.95);
  --theme-bg-secondary: rgba(77, 18, 90, 0.98);
  --theme-bg-tertiary: rgba(40, 10, 50, 0.95);
  --theme-bg-card: rgba(50, 8, 60, 0.95);
  --theme-bg-modal: rgba(40, 5, 50, 0.98);
  --theme-bg-overlay: rgba(40, 5, 50, 0.9);

  /* Textos */
  --theme-text-primary: #f0e6f2;
  --theme-text-secondary: #d3b1d8;
  --theme-text-body: #d3b1d8;
  --theme-text-muted: #a976bc;
  --theme-text-light: #a364bb;

  /* Bordes */
  --theme-border-light: rgba(139, 76, 162, 0.3);
  --theme-border-medium: rgba(139, 76, 162, 0.4);
  --theme-border-strong: rgba(139, 76, 162, 0.6);
  --theme-border-solid: rgba(139, 76, 162, 0.8);

  /* Variables raíz */
  --primary-dark: #3a0642;
  --primary-light: #a976bc;
  --accent-purple: #8b4ca2;
  --accent-hover: #a364bb;
  --lavender-light: #d3b1d8;
  --lavender-medium: #a976bc;
  --text-dark: #3a0642;
}

/* ====================================== */
/*       VARIANTES DARK MODE c01         */
/* ====================================== */

[data-theme="dark"] {
  /* En modo oscuro, ajustar opacidades para mejor contraste */
  --c01-s01-bg: rgba(58, 6, 66, 0.95);
  --c01-s02-bg: rgba(77, 18, 90, 0.9);
  --c01-s03-bg: rgba(169, 118, 188, 0.85);
  --c01-s04-bg: rgba(139, 76, 162, 0.8);
  --c01-s05-bg: rgba(169, 118, 188, 0.7);
  --c01-s06-bg: rgba(211, 177, 216, 0.3);
  --c01-s07-bg: rgba(245, 238, 246, 0.1);
  
  /* Ajustar textos para dark mode */
  --c01-s05-text-frame: #f5eef6;
  --c01-s06-text-frame: #f5eef6;
  --c01-s07-text-frame: #f5eef6;
  
  /* Sombras invertidas para dark mode */
  --c01-shadow-light: 0 4px 12px rgba(255, 255, 255, 0.1);
  --c01-shadow-medium: 0 10px 30px rgba(255, 255, 255, 0.15);
  --c01-shadow-heavy: 0 15px 35px rgba(255, 255, 255, 0.2);
}

/* ====================================== */
/*    CLASES ADAPTATIVAS PARA LABELS     */
/* ====================================== */

/* Para labels sobre fondos OSCUROS (sections 1-4) */
.label-on-dark {
  color: var(--theme-text-white) !important;
}

[data-theme="dark"] .label-on-dark {
  color: var(--theme-text-primary) !important;
}

/* Para labels sobre fondos CLAROS (sections 5-7) */
.label-on-light {
  color: var(--c01-s01-bg) !important;
}

[data-theme="dark"] .label-on-light {
  color: var(--theme-text-primary) !important;
}

/* Para labels en formularios (fondo blanco/claro) */
.form-label-adaptive,
.payment-mode-title,
.gender-label,
.schedule-label,
.checkbox-label {
  color: var(--c01-s01-bg) !important;
}

[data-theme="dark"] .form-label-adaptive,
[data-theme="dark"] .payment-mode-title,
[data-theme="dark"] .gender-label,
[data-theme="dark"] .schedule-label,
[data-theme="dark"] .checkbox-label {
  color: var(--theme-text-primary) !important;
}

/* ====================================== */
/*    FIX RADIO BUTTONS DARK MODE        */
/* ====================================== */

/* En modo dark, los radio buttons necesitan bordes claros */
[data-theme="dark"] .radio-colorcheck {
  border-color: var(--theme-text-primary) !important;
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .radio-colorcheck:checked {
  background-color: var(--c01-s04-btn-bg-active);
  border-color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .radio-colorcheck:checked::after {
  background-color: var(--theme-text-primary);
}

/* Hover state para mejor UX */
[data-theme="dark"] .radio-colorcheck:hover {
  border-color: var(--accent-purple);
  background-color: rgba(255, 255, 255, 0.1);
}

/* ====================================== */
/*    FIX FORM LEGEND DARK MODE          */
/* ====================================== */

[data-theme="dark"] .form-legend {
  color: var(--theme-text-primary) !important;
}

/* ====================================== */
/*    FORCE REPAINT CLASS                */
/* ====================================== */

body.theme-transition-active {
  /* Forzar recalculo sin efectos visuales */
}

body.theme-transition-active * {
  /* Forzar recalculo de todos los descendientes */
  transition: none !important;
}

.text-gold {
  color: var(--cb1-s04-btn-bg-hover) !important;
}