/**
 * ARCHIVO: thinscen-c01-variables-AZUL.css
 * PROPÓSITO: Variables de color dinámicas para C01 (Rescata la Esencia de tu Ser)
 * PALETA: Wellness Blues - 7 secciones degradadas Azul profundo → lavanda → blanco
 * ORIGEN: Convertido desde paleta morada de Claudia
 * COMPATIBILIDAD: PHP 8.x + Marco THINSCEN + thinscen-central-palette.css
 * FECHA: 13 Nov 2025
 */

:root {

  /* ====================================== */
  /*    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(4, 2, 59, 0.08);
  --c01-shadow-medium: 0 10px 30px rgba(4, 2, 59, 0.1);
  --c01-shadow-heavy: 0 15px 35px rgba(4, 2, 59, 0.15);

  /* ====================================== */
  /*        SECCIÓN 1 - MÁS OSCURA         */
  /*   Azul profundo (theme-band-1 base)  */
  /* ====================================== */
  --c01-s01-bg: #050342;          /* Azul profundo wellness */
  --c01-s01-form-bg: #4340a1;     /* Azul medio */
  --c01-s01-form-shadow: #030228; /* Sombra azul oscura */
  
  /* Botones sobre fondo de sección */
  --c01-s01-btn-bg-active: #d4af37;    /* Dorado suave (accent) */
  --c01-s01-btn-bg-hover: #e8c456;     /* Dorado más claro */
  --c01-s01-btn-bg-disabled: #6b5a2f;  /* Dorado apagado */
  
  /* Botones sobre recuadro */
  --c01-s01-btn-frame-active: #a5a2ed;  /* Lavanda medio-claro */
  --c01-s01-btn-frame-hover: #b8b5f2;   /* Lavanda claro */
  --c01-s01-btn-frame-disabled: #6b6891; /* Lavanda apagado */
  
  /* Texto */
  --c01-s01-text-section: #ffffff;    /* Blanco */
  --c01-s01-text-frame: #e7e4fd;      /* Blanco ligeramente lavanda */

  /* ====================================== */
  /*        SECCIÓN 2 - MEDIO-OSCURO       */
  /*    Azul medio (theme-band-2 base)    */
  /* ====================================== */
  --c01-s02-bg: #4340a1;          /* Azul medio wellness */
  --c01-s02-form-bg: #5a57b8;     /* Azul medio-claro */
  --c01-s02-form-shadow: #2f2d74; /* Sombra azul */
  
  /* Botones sobre fondo de sección */
  --c01-s02-btn-bg-active: #d4af37;    /* Dorado suave */
  --c01-s02-btn-bg-hover: #e8c456;     /* Dorado más claro */
  --c01-s02-btn-bg-disabled: #74633a;  /* Dorado apagado */
  
  /* Botones sobre recuadro */
  --c01-s02-btn-frame-active: #a5a2ed;  /* Lavanda medio-claro */
  --c01-s02-btn-frame-hover: #b8b5f2;   /* Lavanda claro */
  --c01-s02-btn-frame-disabled: #75729a; /* Lavanda apagado */
  
  /* Texto */
  --c01-s02-text-section: #ffffff;    /* Blanco */
  --c01-s02-text-frame: #e7e4fd;      /* Blanco ligeramente lavanda */

  /* ====================================== */
  /*       SECCIÓN 3 - AZUL-LAVANDA        */
  /*    Azul-lavanda (theme-band-3 base)  */
  /* ====================================== */
  --c01-s03-bg: #837edb;          /* Azul-lavanda wellness */
  --c01-s03-form-bg: #9793e5;     /* Azul-lavanda más claro */
  --c01-s03-form-shadow: #6660b8; /* Sombra azul-lavanda */
  
  /* Botones sobre fondo de sección */
  --c01-s03-btn-bg-active: #d4af37;    /* Dorado suave */
  --c01-s03-btn-bg-hover: #e8c456;     /* Dorado más claro */
  --c01-s03-btn-bg-disabled: #7d6d44;  /* Dorado apagado */
  
  /* Botones sobre recuadro */
  --c01-s03-btn-frame-active: #a5a2ed;  /* Lavanda medio-claro */
  --c01-s03-btn-frame-hover: #b8b5f2;   /* Lavanda claro */
  --c01-s03-btn-frame-disabled: #827fa4; /* Lavanda apagado */
  
  /* Texto */
  --c01-s03-text-section: #ffffff;    /* Blanco */
  --c01-s03-text-frame: #f0eef9;      /* Blanco lavanda claro */

  /* ====================================== */
  /*        SECCIÓN 4 - PUNTO MEDIO        */
  /*   Azul-lavanda medio (theme-band-4)  */
  /* ====================================== */
  --c01-s04-bg: #6251d3;          /* Azul-lavanda medio wellness */
  --c01-s04-form-bg: #7a6be0;     /* Azul-lavanda claro */
  --c01-s04-form-shadow: #4d3fa7; /* Sombra azul-lavanda */
  
  /* Botones sobre fondo de sección */
  --c01-s04-btn-bg-active: #d4af37;    /* Dorado suave */
  --c01-s04-btn-bg-hover: #e8c456;     /* Dorado más claro */
  --c01-s04-btn-bg-disabled: #88774f;  /* Dorado apagado */
  
  /* Botones sobre recuadro */
  --c01-s04-btn-frame-active: #050342;  /* Azul profundo, contraste */
  --c01-s04-btn-frame-hover: #4340a1;   /* Azul medio */
  --c01-s04-btn-frame-disabled: #3d3963; /* 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: #a5a2ed;          /* Lavanda medio-claro wellness */
  --c01-s05-form-bg: #b8b5f2;     /* Lavanda claro */
  --c01-s05-form-shadow: #8985c9; /* Sombra lavanda */
  
  /* Botones sobre fondo de sección */
  --c01-s05-btn-bg-active: #050342;    /* Azul profundo, contraste */
  --c01-s05-btn-bg-hover: #4340a1;     /* Azul medio */
  --c01-s05-btn-bg-disabled: #494765;  /* Azul apagado */
  
  /* Botones sobre recuadro */
  --c01-s05-btn-frame-active: #d4af37;  /* Dorado suave */
  --c01-s05-btn-frame-hover: #e8c456;   /* Dorado más claro */
  --c01-s05-btn-frame-disabled: #94825f; /* Dorado apagado */
  
  /* Texto */
  --c01-s05-text-section: #d4af37;    /* Dorado suave */
  --c01-s05-text-frame: #050342;      /* Azul profundo */

  /* ====================================== */
  /*       SECCIÓN 6 - LAVANDA CLARO       */
  /*   Lavanda claro (theme-band-6 base)  */
  /* ====================================== */
  --c01-s06-bg: #e7e4fd;          /* Lavanda claro wellness */
  --c01-s06-form-bg: #f2f0fe;     /* Lavanda muy claro */
  --c01-s06-form-shadow: #c8c5e7; /* Sombra lavanda suave */
  
  /* Botones sobre fondo de sección */
  --c01-s06-btn-bg-active: #050342;    /* Azul profundo, contraste */
  --c01-s06-btn-bg-hover: #4340a1;     /* Azul medio */
  --c01-s06-btn-bg-disabled: #5a576e;  /* Azul apagado */
  
  /* Botones sobre recuadro */
  --c01-s06-btn-frame-active: #d4af37;  /* Dorado suave */
  --c01-s06-btn-frame-hover: #e8c456;   /* Dorado más claro */
  --c01-s06-btn-frame-disabled: #a08d69; /* Dorado apagado */
  
  /* Texto */
  --c01-s06-text-section: #d4af37;    /* Dorado suave */
  --c01-s06-text-frame: #050342;      /* Azul profundo */

  /* ====================================== */
  /*        SECCIÓN 7 - MÁS CLARA          */
  /*   Casi blanco (theme-band-7 base)    */
  /* ====================================== */
  --c01-s07-bg: #fafbff;          /* Casi blanco wellness */
  --c01-s07-form-bg: #ffffff;     /* Blanco */
  --c01-s07-form-shadow: #e0dff0; /* Sombra muy suave */
  
  /* Botones sobre fondo de sección */
  --c01-s07-btn-bg-active: #050342;    /* Azul profundo, contraste */
  --c01-s07-btn-bg-hover: #4340a1;     /* Azul medio */
  --c01-s07-btn-bg-disabled: #6b6879;  /* Azul apagado */
  
  /* Botones sobre recuadro */
  --c01-s07-btn-frame-active: #d4af37;  /* Dorado suave */
  --c01-s07-btn-frame-hover: #e8c456;   /* Dorado más claro */
  --c01-s07-btn-frame-disabled: #ac9874; /* Dorado apagado */
  
  /* Texto */
  --c01-s07-text-section: #d4af37;    /* Dorado suave */
  --c01-s07-text-frame: #050342;      /* Azul profundo */

  /* ====================================== */
  /*      ELEMENTOS ESPECIALES C01         */
  /* ====================================== */
  
  /* Bordes y acentos */
  --c01-border-accent: #6251d3;     /* Azul-lavanda medio */
  --c01-border-light: rgba(98, 81, 211, 0.2);  /* Azul-lavanda translúcido */
  
  /* Overlay y modales */
  --c01-overlay-dark: rgba(5, 3, 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: #6251d3;
  
  /* Gradientes especiales */
  --c01-gradient-primary: linear-gradient(135deg, #050342 0%, #4340a1 100%);
  --c01-gradient-secondary: linear-gradient(135deg, #837edb 0%, #a5a2ed 100%);
  --c01-gradient-light: linear-gradient(135deg, #e7e4fd 0%, #fafbff 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);
}

/* ====================================== */
/*       VARIANTES DARK MODE (opcional)  */
/* ====================================== */

[data-theme="dark"] {
  /* En modo oscuro, ajustar opacidades para mejor contraste */
  --c01-s01-bg: rgba(5, 3, 66, 0.95);
  --c01-s02-bg: rgba(67, 64, 161, 0.9);
  --c01-s03-bg: rgba(131, 126, 219, 0.85);
  --c01-s04-bg: rgba(98, 81, 211, 0.8);
  --c01-s05-bg: rgba(165, 162, 237, 0.7);
  --c01-s06-bg: rgba(231, 228, 253, 0.3);
  --c01-s07-bg: rgba(250, 251, 255, 0.1);
  
  /* Ajustar textos para dark mode */
  --c01-s05-text-frame: #e8e4ff;
  --c01-s06-text-frame: #e8e4ff;
  --c01-s07-text-frame: #e8e4ff;
  
  /* 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;
}