/* ============================================================
   THE CODT LABS — TEMAS POR CUENTA (multi-tenant)
   ------------------------------------------------------------
   ÓNIX  = tema por defecto. NO se define aquí: usa el :root
           original de admin.css / palette.css sin tocar nada.
   CRISTAL = tema claro frío (blancos, azules, crema).
   PÉTALO  = tema claro cálido (blush, rosa, malva) + tipografías.

   Estrategia: se sobrescriben SOLO tokens (capa de variables),
   nunca estructura. El glass se adapta a fondo claro cambiando
   sus COLORES (--gl-bg/border/shadow); se mantienen blur y radio.
   Se usa :root[data-theme="..."] (solo aplica a <html>, gana por
   especificidad sobre :root sin depender del orden de carga).
   Este archivo se carga DESPUÉS de admin.css.
   ============================================================ */


/* ───────────────────────── CRISTAL ───────────────────────── */
:root[data-theme="cristal"] {
  /* Superficies (admin) */
  --canvas:        #F4F2EE;
  --surface:       #FFFFFF;
  --card:          #FFFFFF;
  --card-hover:    #F9F8F5;
  --elevated:      #EDF1F6;
  --moss:          #F4F2EE;
  --moss-deep:     #ECEAE4;
  --moss-light:    #FFFFFF;

  /* Bordes y texto */
  --hairline:      rgba(30,42,56,.12);
  --hairline-mid:  rgba(30,42,56,.20);
  --ink:           #1E2A38;
  --body:          #45525F;
  --muted:         #5A6470;
  --muted-soft:    rgba(30,42,56,.72);

  /* Acento — azul sereno */
  --gold:          #3A6EA5;
  --gold-soft:     #6C9BC9;
  --phone-color:   #3A6EA5;
  --accent-rgb:    58,110,165;   /* vuelve azul todo lo dorado (botones, "+", chips, glows) */

  /* Espejo en la capa --bs-* (público + tints que pasan por token) */
  --bs-gold:        #3A6EA5;
  --bs-gold-hover:  #2C5580;
  --bs-gold-light:  #C7DBEE;
  --bs-gold-bg:     rgba(58,110,165,.09);
  --bs-border-gold: rgba(58,110,165,.32);

  /* Capa "legibilidad/admin" de la paleta (eran grises oscuros → claros) */
  --bs-bg:        #F4F2EE;
  --bs-surface:   #FFFFFF;
  --bs-surface2:  #F0EEE9;
  --bs-surface3:  #E8E5DF;
  --bs-border:    rgba(30,42,56,.14);
  --bs-border-lt: rgba(30,42,56,.20);
  --bs-text:      #1E2A38;
  --bs-text-sec:  #45525F;
  --bs-muted:     #6C7684;
  --bs-grey:      #6C7684;

  /* Glass adaptado a claro (frosted claro) — se mantienen blur y radio */
  --gl-bg:         rgba(255,255,255,.55);
  --gl-bg-hover:   rgba(255,255,255,.78);
  --gl-border:     rgba(30,42,56,.10);
  --gl-border-gold:rgba(58,110,165,.35);
  --gl-shadow:     0 8px 28px rgba(30,42,56,.10), inset 0 1px 0 rgba(255,255,255,.65);
  --gl-shadow-sm:  0 4px 14px rgba(30,42,56,.08), inset 0 1px 0 rgba(255,255,255,.55);
}

/* ───────────────────────── PÉTALO ────────────────────────── */
:root[data-theme="petalo"] {
  /* Superficies (admin) */
  --canvas:        #FBF4F5;
  --surface:       #FFFFFF;
  --card:          #FFFFFF;
  --card-hover:    #FDF7F8;
  --elevated:      #F7ECEF;
  --moss:          #FBF4F5;
  --moss-deep:     #F5EAEC;
  --moss-light:    #FFFFFF;

  /* Bordes y texto */
  --hairline:      rgba(59,42,48,.12);
  --hairline-mid:  rgba(59,42,48,.20);
  --ink:           #3B2A30;
  --body:          #6A555C;
  --muted:         #7A656C;
  --muted-soft:    rgba(59,42,48,.72);

  /* Acento — rosa empolvado */
  --gold:          #A8455E;
  --gold-soft:     #C87F92;
  --phone-color:   #C0637A;
  --accent-rgb:    168,69,94;    /* vuelve rosa todo lo dorado */

  /* Espejo en la capa --bs-* */
  --bs-gold:        #C0637A;
  --bs-gold-hover:  #A44E63;
  --bs-gold-light:  #F0D3DA;
  --bs-gold-bg:     rgba(192,99,122,.09);
  --bs-border-gold: rgba(192,99,122,.32);

  /* Capa "legibilidad/admin" de la paleta */
  --bs-bg:        #FBF4F5;
  --bs-surface:   #FFFFFF;
  --bs-surface2:  #FBF1F3;
  --bs-surface3:  #F3E7EA;
  --bs-border:    rgba(59,42,48,.14);
  --bs-border-lt: rgba(59,42,48,.20);
  --bs-text:      #3B2A30;
  --bs-text-sec:  #6A555C;
  --bs-muted:     #8A757C;
  --bs-grey:      #8A757C;

  /* Glass adaptado a claro */
  --gl-bg:         rgba(255,255,255,.55);
  --gl-bg-hover:   rgba(255,255,255,.78);
  --gl-border:     rgba(59,42,48,.10);
  --gl-border-gold:rgba(192,99,122,.35);
  --gl-shadow:     0 8px 28px rgba(59,42,48,.10), inset 0 1px 0 rgba(255,255,255,.65);
  --gl-shadow-sm:  0 4px 14px rgba(59,42,48,.08), inset 0 1px 0 rgba(255,255,255,.55);

  /* Tipografías (solo Pétalo): Fraunces títulos + Quicksand en UI y NÚMEROS. */
  --font-disp:    'Fraunces', Georgia, serif;
  --font-mono:    'Quicksand', system-ui, sans-serif;
  --font-figures: 'Quicksand', system-ui, sans-serif;
}

/* ═══ Ajustes de componentes para temas CLAROS (Cristal + Pétalo) ═══
   El override de tokens cubre la mayoría; aquí van piezas que traían
   color hardcodeado incompatible con fondo claro. */

/* Barra superior + menú lateral: en Ónix son cristal oscuro (negro translúcido
   + backdrop-filter). En claro se pasan a superficie OPACA clara y se quita el
   backdrop-filter (si no, el desenfoque muestrea el fondo oscuro y se ven grises). */
/* Barra superior: superficie clara opaca (sin desenfoque). */
:root[data-theme="cristal"] .topbar,
:root[data-theme="petalo"]  .topbar {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: var(--hairline);
}

/* Menú lateral = panel del COLOR del tema (azul en Cristal, rosa en Pétalo)
   con texto claro. Color de sidebar por tema: */
:root[data-theme="cristal"] { --sidebar-bg: #33608C; }   /* azul */
:root[data-theme="petalo"]  { --sidebar-bg: #9E4257; }   /* rosa */

:root[data-theme="cristal"] .sidebar,
:root[data-theme="petalo"]  .sidebar {
  background: var(--sidebar-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right-color: rgba(255,255,255,.14);
}
/* CLAVE: .sidebar-nav es un <nav>, así que la regla global "nav{background:var(--bs-bg-dark)}"
   de la paleta lo pinta de #1C1B19 y TAPABA el color del sidebar. Lo hacemos transparente
   para que se vea el fondo del .sidebar. (El topbar es un <div>, por eso no le pasaba.) */
:root[data-theme="cristal"] .sidebar-nav,
:root[data-theme="petalo"]  .sidebar-nav { background: transparent !important; }
:root[data-theme="cristal"] .sidebar-nav a,
:root[data-theme="petalo"]  .sidebar-nav a { color: rgba(255,255,255,.92); }
:root[data-theme="cristal"] .sidebar-nav a:hover,
:root[data-theme="petalo"]  .sidebar-nav a:hover  { background: rgba(255,255,255,.14); color: #fff; }
:root[data-theme="cristal"] .sidebar-nav a.active,
:root[data-theme="petalo"]  .sidebar-nav a.active { background: rgba(255,255,255,.20); color: #fff; border-left-color: #fff; }
:root[data-theme="cristal"] .sidebar-divider,
:root[data-theme="petalo"]  .sidebar-divider { background: rgba(255,255,255,.16); }

/* ── Legibilidad de la agenda en exteriores ──────────────────────────────────
   Estos elementos se diseñaron sobre el fondo oscuro de ónix: en claro se
   quedaban en 2–3:1, ilegibles con el móvil al sol. */

/* Los botones secundarios (Ayer/Hoy/Mañana, Completada, WhatsApp…) usan un
   blanco al 4% pensado para el fondo oscuro: en claro se quedan sin superficie
   visible, parecen texto suelto. Se les da cuerpo y borde. */
:root[data-theme="cristal"] .btn-admin:not(.gold),
:root[data-theme="petalo"]  .btn-admin:not(.gold) {
  background: var(--surface);
  border-color: var(--hairline-mid);
  color: var(--body);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
:root[data-theme="cristal"] .btn-admin:not(.gold):hover,
:root[data-theme="petalo"]  .btn-admin:not(.gold):hover {
  background: var(--elevated);
  border-color: var(--gold);
  color: var(--ink);
}

/* El azul del chip "Online" (#3498db) no llega a AA sobre fondo claro. */
:root[data-theme="cristal"],
:root[data-theme="petalo"] { --online-color: #1A63A0; }

/* La etiqueta del trabajador ya lleva un color propio por persona: quitarle el
   velo del 80% le devuelve el contraste que necesita en claro. */
:root[data-theme="cristal"] .appt-barber-tag,
:root[data-theme="petalo"]  .appt-barber-tag { opacity: 1; }

/* La hora del hueco y el "+ Añadir cita" son la referencia para leer la agenda
   de un vistazo: en claro van en el color de texto secundario, no en el tenue.
   A 9px y con espaciado entre letras, cumplir el mínimo AA todavía se lee fino
   a plena luz: se sube al color de texto secundario y se les da algo de peso. */
:root[data-theme="cristal"] .time-label,
:root[data-theme="petalo"]  .time-label,
:root[data-theme="cristal"] .add-slot-hint,
:root[data-theme="petalo"]  .add-slot-hint { color: var(--body); font-weight: 600; }
:root[data-theme="cristal"] .appt-client,
:root[data-theme="petalo"]  .appt-client { color: var(--body); }
:root[data-theme="cristal"] .time-slot:hover .add-slot-hint,
:root[data-theme="petalo"]  .time-slot:hover .add-slot-hint { color: var(--ink); }
:root[data-theme="cristal"] .sidebar-action,
:root[data-theme="petalo"]  .sidebar-action { color: rgba(255,255,255,.62); opacity: 1; }
:root[data-theme="cristal"] .sidebar-action--logout,
:root[data-theme="petalo"]  .sidebar-action--logout { color: #ffd7d7; }
:root[data-theme="cristal"] .sidebar-section-label,
:root[data-theme="petalo"]  .sidebar-section-label { color: rgba(255,255,255,.5); }

/* Celdas del calendario: en Ónix separan con blanco-alpha (invisible en claro).
   En claro: superficie clara + hairline oscuro para que cada día se distinga. */
:root[data-theme="cristal"] .calendar-day,
:root[data-theme="petalo"]  .calendar-day {
  background: var(--surface);
  border-color: var(--hairline-mid);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
:root[data-theme="cristal"] .calendar-day:hover,
:root[data-theme="petalo"]  .calendar-day:hover { background: var(--card-hover); }
:root[data-theme="cristal"] .calendar-day.closed,
:root[data-theme="petalo"]  .calendar-day.closed {
  background: var(--canvas);
  border-color: var(--hairline);
}

/* ── MODALES: el fondo estaba hardcodeado en oscuro (rgba(20,20,22,.82)) →
   en temas claros pasa a superficie clara opaca. Afecta a onboarding, nueva
   cita, cierre de caja, ventas… (todos usan .modal). ── */
:root[data-theme="cristal"] .modal,
:root[data-theme="petalo"]  .modal {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Inputs oscuros dentro de modales (recuento de cierre de caja) → claros y legibles */
:root[data-theme="cristal"] .denom-qty,
:root[data-theme="petalo"]  .denom-qty,
:root[data-theme="cristal"] .cmp-input,
:root[data-theme="petalo"]  .cmp-input,
:root[data-theme="cristal"] #cierreNotes,
:root[data-theme="petalo"]  #cierreNotes {
  background: var(--canvas) !important;
  border-color: var(--hairline-mid) !important;
  color: var(--ink) !important;
}

/* Divisores y bordes en blanco-alpha (invisibles en claro) → hairline oscuro */
:root[data-theme="cristal"] .denom-total,
:root[data-theme="petalo"]  .denom-total { border-top-color: var(--hairline) !important; }

/* Botones de relleno sólido (acento): en Ónix llevan texto oscuro sobre dorado
   claro; en azul/rosa el texto debe ir en BLANCO para contraste. */
:root[data-theme="cristal"] :is(.btn-admin.gold, .btn-admin.gold:hover, .fab, .cl-btn-primary, .cl-btn-primary:hover, .cl-btn-save, .cl-btn-save:hover, .btn-cerrar-caja),
:root[data-theme="petalo"]  :is(.btn-admin.gold, .btn-admin.gold:hover, .fab, .cl-btn-primary, .cl-btn-primary:hover, .cl-btn-save, .cl-btn-save:hover, .btn-cerrar-caja) {
  color: #fff;
}
:root[data-theme="cristal"] .btn-login,
:root[data-theme="petalo"]  .btn-login { color: #fff !important; }

/* Selector de PALETA como barras de color clicables (Configura tu web) */
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.pal-opt {
  text-align: left; padding: 7px; background: none; cursor: pointer;
  border: 2px solid var(--hairline); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.pal-opt:hover { border-color: var(--muted); }
.pal-opt.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.25); }
.pal-bar {
  display: flex; height: 30px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--hairline);
}
.pal-bar span { flex: 1; }
.pal-name { font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-top: 7px; line-height: 1.3; }
.pal-use  { font-size: .58rem; color: var(--muted); margin-top: 3px; line-height: 1.35; }

/* CTA "Configura tu web" en el sidebar — destacado con el acento del tema.
   Se usa .sidebar-nav .nav-web-cta para ganar a la regla ".sidebar-nav a{color/padding}". */
.sidebar-nav .nav-web-cta {
  display: block; margin: 8px var(--sp-lg) 4px; padding: 10px 12px;
  border-left: none; border-radius: var(--gl-radius-sm); text-align: center;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--gold); background: rgba(var(--accent-rgb),.14);
  border: 1px solid rgba(var(--accent-rgb),.42);
  cursor: pointer; transition: all var(--t);
}
.sidebar-nav .nav-web-cta:hover { background: rgba(var(--accent-rgb),.22); border-color: rgba(var(--accent-rgb),.7); color: var(--gold); }
/* En temas claros el sidebar YA es de color: el CTA se vuelve pastilla blanca con texto de acento */
:root[data-theme="cristal"] .sidebar-nav .nav-web-cta,
:root[data-theme="petalo"]  .sidebar-nav .nav-web-cta {
  background: #fff; color: var(--gold); border-color: #fff;
}
:root[data-theme="cristal"] .sidebar-nav .nav-web-cta:hover,
:root[data-theme="petalo"]  .sidebar-nav .nav-web-cta:hover { background: #fff; color: var(--gold); opacity: .9; }

/* Sección "Temas" sin tarjeta: solo título + círculos (todos los temas) */
.config-section--bare {
  background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow: visible;
}
.config-section--bare .config-section-title {
  background: none; border-bottom: none;
  padding: 0 0 12px;
}

/* Selector de tema dentro de Configuración ("Temas" = 3 círculos) */
.theme-dots { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 2px 0; }
.theme-dot {
  flex: none; box-sizing: border-box;
  width: 26px; height: 26px; min-height: 0; aspect-ratio: 1 / 1;   /* min-height:0 anula el button{min-height:48px} global que los deformaba en óvalo */
  padding: 0; border-radius: 50%;
  background: var(--dot); border: 2px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.theme-dot:hover { transform: scale(1.15); }
.theme-dot.sel { outline: 2px solid var(--dot); outline-offset: 3px; }
@media (max-width: 640px) {
  .theme-dot  { width: 32px; height: 32px; }
  .theme-dots { gap: 20px; }
}