/* ============================================================================
   CLAYMORPHISM 2 — capa de prueba sobre el diseño actual
   Basada en la guía https://www.setproduct.com/blog/claymorphism-design-guide
   Misma estrategia que claymorphism.css: SOLO sobrescribe clases existentes,
   se carga la ÚLTIMA en la cascada y no toca HTML ni PHP. Para desactivarla,
   basta quitar su <link> en app/functions.php.

   Reglas de la guía aplicadas:
   - Fondo near-white tintado (#F7F5FB), nunca blanco puro.
   - Superficies pastel saturadas (lavanda como base de marca).
   - Sombra CUÁDRUPLE: drop exterior SE + luz NW + brillo interior + profundidad
     interior, siempre con el tono de la superficie oscurecido (nunca gris).
   - Radios: tarjetas 28px, botones 18px, inputs 16px, pills 999px.
   - Tipografía redondeada: pesos 500/600/700, tracking +0.01em.
   - Un solo color de acción saturado por pantalla (aquí, el morado de marca).
   - Inputs solo con sombra inset; botón activo scale(.97).

   Solo tema CLARO: el oscuro conserva la capa 1 (la guía es light-first).
   ========================================================================== */

:root:not([data-theme="dark"]) {
  /* Paleta guía */
  --clay2-bg:        #F7F5FB;
  --clay2-surface:   #FFFFFF;
  --clay2-lavender:  #B8A6FF;
  --clay2-text:      #2E2A3F;
  --clay2-muted:     #6B6580;

  /* H = tono de superficie oscurecido ~15% (nunca gris neutro).
     Valor de la espec para lavanda: rgba(140,108,255) */
  --clay2-h:         140, 108, 255;

  /* Receta de sombra cuádruple — VALORES LITERALES de CLAYMORPHISM.md:
     drop coloreado SE .35 / luz NW .6 / brillo interior .5 / profundidad .30 */
  --clay2-shadow:
     8px  8px 24px rgba(var(--clay2-h), .35),
    -8px -8px 24px rgba(255, 255, 255, .60),
    inset  4px  4px  8px rgba(255, 255, 255, .50),
    inset -6px -6px 12px rgba(var(--clay2-h), .30);
  /* Media intensidad (chips y piezas pequeñas, según espec) */
  --clay2-shadow-sm:
     4px  4px 12px rgba(var(--clay2-h), .18),
    -4px -4px 12px rgba(255, 255, 255, .30),
    inset  2px  2px  4px rgba(255, 255, 255, .25),
    inset -3px -3px  6px rgba(var(--clay2-h), .15);
  /* L2: lámina flotante (diálogos, popovers) — offset 12, blur 32 */
  --clay2-shadow-l2:
     12px 12px 32px rgba(var(--clay2-h), .35),
    -12px -12px 32px rgba(255, 255, 255, .60),
    inset  4px  4px  8px rgba(255, 255, 255, .50),
    inset -6px -6px 12px rgba(var(--clay2-h), .30);
  /* Input: pozo hundido, SOLO inset (espec §5) */
  --clay2-inset:
    inset 3px 3px 8px rgba(var(--clay2-h), .20),
    inset -3px -3px 8px #FFFFFF;

  /* Radios guía */
  --clay2-r-card: 28px;
  --clay2-r-btn:  18px;
  --clay2-r-input: 16px;

  /* Se remapean los tokens clay de la capa 1 para arrastrar TODO lo que ya
     los usa (paneles, KPI, diálogos, tooltips…) sin repetir selectores */
  --clay-r-sm: var(--clay2-r-input);
  --clay-r-md: 22px;
  --clay-r-lg: var(--clay2-r-card);
  --clay-r-xl: 32px;
  --clay-raised: var(--clay2-shadow);
  --clay-raised-sm: var(--clay2-shadow-sm);
  --clay-raised-hover:
     10px 10px 28px rgba(var(--clay2-h), .22),
    -10px -10px 26px rgba(255, 255, 255, .65),
    inset  4px  4px  8px rgba(255, 255, 255, .50),
    inset -6px -6px 12px rgba(var(--clay2-h), .08);
  --clay-flat: var(--clay2-shadow-sm);
  --clay-inset: var(--clay2-inset);
  --shadow-1: var(--clay2-shadow);
  --shadow-2: var(--clay-raised-hover);

  /* Tooltips y popovers de la capa 1 (incluido el calendario) → láminas
     flotantes L2 de la espec */
  --clay-tooltip-bg: color-mix(in srgb, var(--clay2-lavender) 16%, #ffffff);
  --clay-tooltip-shadow: var(--clay2-shadow-l2);
}

/* ── Lienzo (solo claro) ── */
:root:not([data-theme="dark"]) body {
  background: var(--clay2-bg);
  color: var(--clay2-text);
}
:root:not([data-theme="dark"]) .dash-canvas { background: var(--clay2-bg); }

/* ── Tipografía: COMÚN a claro y oscuro ──
   Si estos pesos solo aplicaran en claro, cambiar de tema cambiaría la letra
   de verdad (pasó: en oscuro los títulos caían de 700 a 600). Los pesos y el
   tracking no dependen del color, así que van sin guardia de tema. */
body { letter-spacing: .01em; }
h1, h2, h3 { font-weight: 700; }
label { font-weight: 600; }
.btn-primary, .btn-secondary, .btn-icon, .cli-pag-btn, .cli-dialog__btn-danger { font-weight: 600; }

/* ── Superficies (tarjetas, paneles, tablas, diálogos) ── */
:root:not([data-theme="dark"]) .pre-panel,
:root:not([data-theme="dark"]) .dash-table-container,
:root:not([data-theme="dark"]) .dash-kpi-card:not(.dash-kpi-card--hero),
:root:not([data-theme="dark"]) .ajuste-card,
:root:not([data-theme="dark"]) .cli-dialog,
:root:not([data-theme="dark"]) .pre-totales-grid {
  background: var(--clay2-surface);
  border: none;
  border-radius: var(--clay2-r-card);
  box-shadow: var(--clay2-shadow);
}

/* El KPI hero conserva su degradado morado con texto blanco (capa 1); aquí
   solo se le da el radio y la sombra de la receta 2 sobre su propio tono */
:root:not([data-theme="dark"]) .dash-kpi-card--hero {
  border: none;
  border-radius: var(--clay2-r-card);
  box-shadow:
     8px  8px 24px rgba(130, 49, 167, .30),
    -8px -8px 24px rgba(255, 255, 255, .55),
    inset  4px  4px  8px rgba(255, 255, 255, .28),
    inset -6px -6px 12px rgba(60, 20, 90, .22);
}

/* Superficie pastel para lo destacado: cabecera del panel de totales y KPI */
:root:not([data-theme="dark"]) .pre-totales-grid {
  background: color-mix(in srgb, var(--clay2-lavender) 14%, #ffffff);
}

/* ── Botones ── */
:root:not([data-theme="dark"]) .btn-primary,
:root:not([data-theme="dark"]) .btn-secondary,
:root:not([data-theme="dark"]) .btn-icon,
:root:not([data-theme="dark"]) .cli-pag-btn,
:root:not([data-theme="dark"]) .cli-dialog__btn-danger {
  border-radius: var(--clay2-r-btn);
  box-shadow: var(--clay2-shadow-sm);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
:root:not([data-theme="dark"]) .btn-primary:active,
:root:not([data-theme="dark"]) .btn-secondary:active,
:root:not([data-theme="dark"]) .btn-icon:active,
:root:not([data-theme="dark"]) .cli-pag-btn:active,
:root:not([data-theme="dark"]) .cli-dialog__btn-danger:active {
  /* El "squish" de la espec: se hunde — escala + offsets de sombra a la mitad */
  transform: scale(.97);
  box-shadow:
     4px  4px 12px rgba(var(--clay2-h), .35),
    -4px -4px 12px rgba(255, 255, 255, .60),
    inset  2px  2px  4px rgba(255, 255, 255, .50),
    inset -3px -3px  6px rgba(var(--clay2-h), .30);
}
/* Diálogos = lámina flotante L2 */
:root:not([data-theme="dark"]) .cli-dialog { box-shadow: var(--clay2-shadow-l2); }

/* Pills (tabs y badges) totalmente redondos */
:root:not([data-theme="dark"]) .cli-tab,
:root:not([data-theme="dark"]) .badge-estado { border-radius: 999px; }

/* Chips de estado según espec §5: fondo --status-*, texto strong 13 semibold,
   sombra a media intensidad. Mapeo semántico de la app:
   pagada/activa → mint, pendiente/habitual → lemon, baja/anulada → lavanda mate */
:root:not([data-theme="dark"]) .badge-estado {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--clay2-text);
  box-shadow: var(--clay2-shadow-sm);
}
:root:not([data-theme="dark"]) .badge-estado--captacion { background: #7DD4A8; }   /* status-active */
:root:not([data-theme="dark"]) .badge-estado--habitual  { background: #F5D77A; }   /* status-pending */
:root:not([data-theme="dark"]) .badge-estado--esporadico{ background: #F5D77A; }
:root:not([data-theme="dark"]) .badge-estado--baja      { background: #C9B5FF; }   /* status-archived */

/* ── Inputs: SOLO sombra interior (regla de la guía) ── */
:root:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.no-bg),
:root:not([data-theme="dark"]) textarea:not(.no-bg),
:root:not([data-theme="dark"]) select:not(.no-bg) {
  border: none;
  border-radius: var(--clay2-r-input);
  background: color-mix(in srgb, var(--clay2-lavender) 6%, #ffffff);
  box-shadow: var(--clay2-inset);
}
:root:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.no-bg):focus,
:root:not([data-theme="dark"]) textarea:not(.no-bg):focus,
:root:not([data-theme="dark"]) select:not(.no-bg):focus {
  box-shadow: var(--clay2-inset), 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* ── Sidebar ── */
:root:not([data-theme="dark"]) .dash-sidebar { background: var(--clay2-bg); }
:root:not([data-theme="dark"]) .dash-panel__logo { box-shadow: var(--clay2-inset); border-radius: var(--clay2-r-input); }
/* El buscador del menú es una PÍLDORA por diseño (contenedor con overflow:hidden
   + input al mismo radio): se respeta el radio de la capa 1 y solo se ajusta la
   sombra interior a la receta 2 */
:root:not([data-theme="dark"]) .dash-sidebar__search input { box-shadow: var(--clay2-inset); }