/* =====================================================================
 * DomiCRM · Theme system
 * ---------------------------------------------------------------------
 * Estrategia: variables CSS por tema en `[data-theme="..."]`, más
 * overrides dirigidos a las clases utilitarias de Tailwind que usan los
 * templates (bg-blue-600, text-blue-700, bg-white, bg-slate-100, etc.).
 * Este archivo se carga DESPUÉS de Tailwind, así la cascada gana.
 *
 * Temas disponibles:
 *   corporate   (default) — Verde corporativo #A7DC45 + gris #333
 *   classic                — Azul clásico (look original)
 *   cyberpunk              — Dark UI + magenta / cyan neón
 *   neon                   — Dark UI + violeta / fucsia
 * ===================================================================== */

/* ---------- Paleta por tema (variables) ----------------------------- */

/* Corporate — verde #a7dc45 + gris #333 (default).
   Importante: NO usamos ``:root`` porque themes.css se carga DESPUÉS
   del ``<style id="custom-theme-vars">`` que el server-side inyecta
   cuando el user tiene un tema custom. Con ``:root`` ambas reglas
   tienen la misma especificidad y la del archivo posterior (este) gana
   accidentalmente. El ``<script>`` inline en base.html siempre setea
   ``data-theme`` antes del primer paint, así que el selector
   ``[data-theme="corporate"]`` es suficiente para cubrir el default.
*/
[data-theme="corporate"] {
    --c-primary:          #a7dc45;
    --c-primary-hover:    #8ec431;
    --c-primary-soft:     #eef8d7;
    --c-primary-soft-2:   #dff1b5;
    --c-primary-accent:   #4f7a12;   /* texto "accent" legible sobre fondo claro */
    --c-primary-border:   #c6e480;
    --c-primary-text:     #1f2937;   /* texto sobre fondo primary */

    --c-bg-app:           #f5f7f2;
    --c-bg-card:          #ffffff;
    --c-bg-hover:         #f0f2ec;
    --c-bg-subtle:        #e8ebe3;
    --c-bg-medium:        #d8dcd1;

    --c-text-strong:      #1f2937;
    --c-text-body:        #333333;
    --c-text-medium:      #4b5563;
    --c-text-muted:       #6b7280;

    --c-border:           #e2e5dd;
    --c-border-strong:    #c9cdc0;

    --c-danger:           #dc2626;
    --c-danger-soft:      #fee2e2;
    --c-success:          #16a34a;
}

/* Classic — azul original */
[data-theme="classic"] {
    --c-primary:          #2563eb;
    --c-primary-hover:    #1d4ed8;
    --c-primary-soft:     #eff6ff;
    --c-primary-soft-2:   #dbeafe;
    --c-primary-accent:   #1d4ed8;
    --c-primary-border:   #bfdbfe;
    --c-primary-text:     #ffffff;

    --c-bg-app:           #f1f5f9;
    --c-bg-card:          #ffffff;
    --c-bg-hover:         #f8fafc;
    --c-bg-subtle:        #e2e8f0;
    --c-bg-medium:        #cbd5e1;

    --c-text-strong:      #1e293b;
    --c-text-body:        #334155;
    --c-text-medium:      #475569;
    --c-text-muted:       #64748b;

    --c-border:           #e2e8f0;
    --c-border-strong:    #cbd5e1;

    --c-danger:           #dc2626;
    --c-danger-soft:      #fee2e2;
    --c-success:          #16a34a;
}

/* Cyberpunk — dark UI + magenta / cyan */
[data-theme="cyberpunk"] {
    --c-primary:          #ff2bd6;   /* magenta neón */
    --c-primary-hover:    #e017b7;
    --c-primary-soft:     #2b0f25;
    --c-primary-soft-2:   #3a1533;
    --c-primary-accent:   #ff7ae3;
    --c-primary-border:   #ff2bd644;
    --c-primary-text:     #0b0014;

    --c-bg-app:           #05060c;
    --c-bg-card:          #0d1020;
    --c-bg-hover:         #161a2f;
    --c-bg-subtle:        #121528;
    --c-bg-medium:        #1e2340;

    --c-text-strong:      #eafff9;
    --c-text-body:        #c7d3e0;
    --c-text-medium:      #8b97b1;
    --c-text-muted:       #6c7796;

    --c-border:           #1d223c;
    --c-border-strong:    #2a3055;

    --c-danger:           #ff4d6d;
    --c-danger-soft:      #3a0a17;
    --c-success:          #3df5c2;

    /* secundario para detalles (bordes activos, links hover) */
    --c-accent-secondary: #00eaff; /* cyan */
}

/* Neon — dark UI + violeta / fucsia */
[data-theme="neon"] {
    --c-primary:          #7c3aff;   /* violeta */
    --c-primary-hover:    #6423e6;
    --c-primary-soft:     #1c0f3a;
    --c-primary-soft-2:   #2b1852;
    --c-primary-accent:   #b99aff;
    --c-primary-border:   #7c3aff55;
    --c-primary-text:     #ffffff;

    --c-bg-app:           #0a0614;
    --c-bg-card:          #141030;
    --c-bg-hover:         #1d1745;
    --c-bg-subtle:        #1a1438;
    --c-bg-medium:        #2a2253;

    --c-text-strong:      #f5f0ff;
    --c-text-body:        #d6cff0;
    --c-text-medium:      #a59ccf;
    --c-text-muted:       #7d75a8;

    --c-border:           #241b4a;
    --c-border-strong:    #3a2d70;

    --c-danger:           #ff5c8a;
    --c-danger-soft:      #3f0c1d;
    --c-success:          #6dffba;

    --c-accent-secondary: #ff3ce1; /* fucsia */
}

/* =====================================================================
 * Overrides de utilidades Tailwind
 *
 * IMPORTANTE — especificidad: el Tailwind Play CDN (cdn.tailwindcss.com)
 * inyecta su ``<style>`` al FINAL de ``<head>`` cuando termina de
 * escanear el DOM, lo que lo deja DESPUÉS de este archivo en la cascada.
 * Si nuestras reglas usaran sólo ``.bg-blue-600`` (especificidad 0,1,0)
 * Tailwind las pisaría y el botón primario seguiría azul aunque el tema
 * activo fuera ``corporate`` (verde).
 *
 * Solución: prefijar todas las reglas con ``[data-theme]`` (selector que
 * siempre está presente en ``<html>``). Así la especificidad sube a
 * (0,2,0) y le gana a Tailwind sin importar el orden de carga.
 * ===================================================================== */

/* ---- Primario (azul → color de tema) ------------------------------- */
[data-theme] .bg-blue-600 { background-color: var(--c-primary); }
[data-theme] .bg-blue-700,
[data-theme] .hover\:bg-blue-700:hover { background-color: var(--c-primary-hover); }

[data-theme] .bg-blue-50,
[data-theme] .hover\:bg-blue-50:hover { background-color: var(--c-primary-soft); color: var(--c-primary-accent); }
[data-theme] .bg-blue-100 { background-color: var(--c-primary-soft-2); }

[data-theme] .text-blue-600 { color: var(--c-primary); }
[data-theme] .text-blue-700,
[data-theme] .hover\:text-blue-700:hover { color: var(--c-primary-accent); }

[data-theme] .border-blue-200 { border-color: var(--c-primary-border); }
[data-theme] .border-blue-300 { border-color: var(--c-primary-border); }
[data-theme] .border-blue-500 { border-color: var(--c-primary); }
[data-theme] .border-blue-600 { border-color: var(--c-primary); }

/* Botones `bg-blue-600 text-white` necesitan color de texto legible */
[data-theme] .bg-blue-600.text-white,
[data-theme] .bg-blue-700.text-white,
[data-theme] .hover\:bg-blue-700.text-white:hover { color: var(--c-primary-text); }

/* Focus ring del select/input en formularios */
[data-theme] .focus\:border-blue-500:focus { border-color: var(--c-primary); }
[data-theme] .focus\:ring-blue-500:focus { --tw-ring-color: var(--c-primary); }

/* ---- Danger (rojo) mantiene semántica pero respeta var ------------- */
[data-theme] .bg-red-600 { background-color: var(--c-danger); }
[data-theme] .hover\:bg-red-700:hover { background-color: var(--c-danger); filter: brightness(0.92); }

/* =====================================================================
 * Paleta "slate" — Tailwind CDN 2.2.19 NO incluye slate-*.
 *
 * Todas las plantillas usan `bg-slate-*`, `text-slate-*`, `border-slate-*`,
 * `divide-slate-*`, `ring-slate-*` y variantes `hover:*`. Sin estas reglas,
 * esas clases no hacen nada visualmente (fondos transparentes, texto
 * heredado). Aquí las redefinimos contra las variables `--c-*` para que:
 *   - Los temas claros (corporate, classic) produzcan grises estándar.
 *   - Los temas oscuros (cyberpunk, neon) los volteen a tonos oscuros
 *     automáticamente, sin necesidad de overrides específicos por tema.
 *
 * Escala mental:
 *   slate-50   → hover suave          (--c-bg-hover)
 *   slate-100  → fondo de la app      (--c-bg-app)
 *   slate-200  → fondo sutil / chips  (--c-bg-subtle)
 *   slate-300  → fondo medio          (--c-bg-medium)
 *   slate-400/500 → muted / secondary (--c-text-muted)
 *   slate-600     → medium            (--c-text-medium)
 *   slate-700     → body              (--c-text-body)
 *   slate-800/900 → strong / headings (--c-text-strong)
 * ===================================================================== */

/* Fondos */
[data-theme] .bg-slate-50  { background-color: var(--c-bg-hover); }
[data-theme] .bg-slate-100 { background-color: var(--c-bg-app); }
[data-theme] .bg-slate-200 { background-color: var(--c-bg-subtle); }
[data-theme] .bg-slate-300 { background-color: var(--c-bg-medium); }

[data-theme] .hover\:bg-slate-50:hover  { background-color: var(--c-bg-hover); }
[data-theme] .hover\:bg-slate-100:hover { background-color: var(--c-bg-app); }
[data-theme] .hover\:bg-slate-200:hover { background-color: var(--c-bg-subtle); }

/* Texto */
[data-theme] .text-slate-400 { color: var(--c-text-muted); }
[data-theme] .text-slate-500 { color: var(--c-text-muted); }
[data-theme] .text-slate-600 { color: var(--c-text-medium); }
[data-theme] .text-slate-700 { color: var(--c-text-body); }
[data-theme] .text-slate-800 { color: var(--c-text-strong); }
[data-theme] .text-slate-900 { color: var(--c-text-strong); }

[data-theme] .hover\:text-slate-700:hover { color: var(--c-text-body); }
[data-theme] .hover\:text-slate-800:hover { color: var(--c-text-strong); }
[data-theme] .hover\:text-slate-900:hover { color: var(--c-text-strong); }

/* Bordes */
[data-theme] .border-slate-100 { border-color: var(--c-border); }
[data-theme] .border-slate-200 { border-color: var(--c-border); }
[data-theme] .border-slate-300 { border-color: var(--c-border-strong); }
[data-theme] .hover\:border-slate-300:hover { border-color: var(--c-border-strong); }

/* Divide (línea entre hijos consecutivos) */
[data-theme] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-border); }
[data-theme] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-border); }

/* Ring para focus states (Tailwind ring-*) */
[data-theme] .ring-slate-200 { --tw-ring-color: var(--c-border); }
[data-theme] .ring-slate-300 { --tw-ring-color: var(--c-border-strong); }
[data-theme] .focus\:ring-slate-200:focus { --tw-ring-color: var(--c-border); }
[data-theme] .focus\:ring-slate-300:focus { --tw-ring-color: var(--c-border-strong); }

/* Placeholders en inputs estándar */
[data-theme] .placeholder-slate-400::placeholder { color: var(--c-text-muted); }
[data-theme] .placeholder-slate-500::placeholder { color: var(--c-text-muted); }

/* =====================================================================
 * Dark-mode overrides (temas oscuros: cyberpunk, neon, custom)
 *
 * Antes se aplicaban sólo a cyberpunk/neon. Ahora se aplican también a
 * ``custom`` para que el usuario pueda armar su propio modo oscuro desde
 * el theme builder: si elige ``bg-card`` blanco, ``.bg-white`` sigue
 * pintándose en blanco (la var se resuelve a blanco); si elige azul
 * oscuro, las cards quedan azul oscuro automáticamente. La regla
 * ``color-scheme`` queda sólo en los presets dark para no forzar los
 * scrollbars/inputs nativos en oscuro cuando el custom es claro.
 * ===================================================================== */

[data-theme="cyberpunk"],
[data-theme="neon"] {
    color-scheme: dark;
}

/* Shell de la app (cuerpo / html) */
[data-theme="cyberpunk"].bg-slate-100,
[data-theme="neon"].bg-slate-100,
[data-theme="custom"].bg-slate-100,
html[data-theme="cyberpunk"],
html[data-theme="neon"],
html[data-theme="custom"] { background-color: var(--c-bg-app); }

[data-theme="cyberpunk"] body,
[data-theme="neon"] body,
[data-theme="custom"] body { background-color: var(--c-bg-app); color: var(--c-text-body); }

/* Superficies */
[data-theme="cyberpunk"] .bg-white,
[data-theme="neon"] .bg-white,
[data-theme="custom"] .bg-white       { background-color: var(--c-bg-card); }
[data-theme="cyberpunk"] .bg-slate-100,
[data-theme="neon"] .bg-slate-100,
[data-theme="custom"] .bg-slate-100   { background-color: var(--c-bg-app); }
[data-theme="cyberpunk"] .bg-slate-50,
[data-theme="neon"] .bg-slate-50,
[data-theme="custom"] .bg-slate-50,
[data-theme="cyberpunk"] .hover\:bg-slate-50:hover,
[data-theme="neon"] .hover\:bg-slate-50:hover,
[data-theme="custom"] .hover\:bg-slate-50:hover  { background-color: var(--c-bg-hover); }
[data-theme="cyberpunk"] .bg-slate-200,
[data-theme="neon"] .bg-slate-200,
[data-theme="custom"] .bg-slate-200,
[data-theme="cyberpunk"] .hover\:bg-slate-100:hover,
[data-theme="neon"] .hover\:bg-slate-100:hover,
[data-theme="custom"] .hover\:bg-slate-100:hover { background-color: var(--c-bg-subtle); }
[data-theme="cyberpunk"] .bg-slate-300,
[data-theme="neon"] .bg-slate-300,
[data-theme="custom"] .bg-slate-300   { background-color: var(--c-bg-medium); }

/* Bordes */
[data-theme="cyberpunk"] .border-slate-100,
[data-theme="neon"] .border-slate-100,
[data-theme="custom"] .border-slate-100,
[data-theme="cyberpunk"] .border-slate-200,
[data-theme="neon"] .border-slate-200,
[data-theme="custom"] .border-slate-200,
[data-theme="cyberpunk"] .border-slate-300,
[data-theme="neon"] .border-slate-300,
[data-theme="custom"] .border-slate-300   { border-color: var(--c-border); }

[data-theme="cyberpunk"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="neon"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="custom"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="cyberpunk"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
[data-theme="neon"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
[data-theme="custom"] .divide-slate-200 > :not([hidden]) ~ :not([hidden])
    { border-color: var(--c-border); }

/* Texto */
[data-theme="cyberpunk"] .text-slate-800,
[data-theme="neon"] .text-slate-800,
[data-theme="custom"] .text-slate-800,
[data-theme="cyberpunk"] .text-slate-900,
[data-theme="neon"] .text-slate-900,
[data-theme="custom"] .text-slate-900 { color: var(--c-text-strong); }
[data-theme="cyberpunk"] .text-slate-700,
[data-theme="neon"] .text-slate-700,
[data-theme="custom"] .text-slate-700 { color: var(--c-text-body); }
[data-theme="cyberpunk"] .text-slate-600,
[data-theme="neon"] .text-slate-600,
[data-theme="custom"] .text-slate-600 { color: var(--c-text-medium); }
[data-theme="cyberpunk"] .text-slate-500,
[data-theme="neon"] .text-slate-500,
[data-theme="custom"] .text-slate-500,
[data-theme="cyberpunk"] .text-slate-400,
[data-theme="neon"] .text-slate-400,
[data-theme="custom"] .text-slate-400 { color: var(--c-text-muted); }

/* Inputs / textareas / selects */
[data-theme="cyberpunk"] input,
[data-theme="neon"] input,
[data-theme="custom"] input,
[data-theme="cyberpunk"] textarea,
[data-theme="neon"] textarea,
[data-theme="custom"] textarea,
[data-theme="cyberpunk"] select,
[data-theme="neon"] select,
[data-theme="custom"] select {
    background-color: var(--c-bg-hover);
    color: var(--c-text-strong);
    border-color: var(--c-border-strong);
}
[data-theme="cyberpunk"] input::placeholder,
[data-theme="neon"] input::placeholder,
[data-theme="custom"] input::placeholder,
[data-theme="cyberpunk"] textarea::placeholder,
[data-theme="neon"] textarea::placeholder,
[data-theme="custom"] textarea::placeholder { color: var(--c-text-muted); }

/* Shadows un poco más sutiles en dark para no emborronar */
[data-theme="cyberpunk"] .shadow-sm,
[data-theme="neon"] .shadow-sm,
[data-theme="custom"] .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.45); }
[data-theme="cyberpunk"] .shadow,
[data-theme="neon"] .shadow,
[data-theme="custom"] .shadow    { box-shadow: 0 2px 6px -1px rgba(0,0,0,.55); }
[data-theme="cyberpunk"] .shadow-lg,
[data-theme="neon"] .shadow-lg,
[data-theme="custom"] .shadow-lg { box-shadow: 0 10px 20px -5px rgba(0,0,0,.65); }

/* Botón de primary en dark necesita un pequeño glow (opcional) */
[data-theme="cyberpunk"] .bg-blue-600 { box-shadow: 0 0 0 1px rgba(255,43,214,.45), 0 0 14px -2px rgba(255,43,214,.55); }
[data-theme="neon"] .bg-blue-600      { box-shadow: 0 0 0 1px rgba(124,58,255,.45), 0 0 14px -2px rgba(124,58,255,.55); }

/* Scrollbars custom para dark */
[data-theme="cyberpunk"] *::-webkit-scrollbar,
[data-theme="neon"] *::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="cyberpunk"] *::-webkit-scrollbar-track,
[data-theme="neon"] *::-webkit-scrollbar-track { background: var(--c-bg-app); }
[data-theme="cyberpunk"] *::-webkit-scrollbar-thumb,
[data-theme="neon"] *::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 6px; }

/* =====================================================================
 * Accent bar para la barra superior — pequeño detalle corporativo.
 * ===================================================================== */
.brand-accent-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-accent));
}
[data-theme="cyberpunk"] .brand-accent-bar {
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent-secondary, var(--c-primary)));
}
[data-theme="neon"] .brand-accent-bar {
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent-secondary, var(--c-primary)));
}

/* =====================================================================
 * F4 (2026-06-09) — Tema personalizado por usuario
 * ---------------------------------------------------------------------
 * Las vars del tema custom se inyectan dinámicamente desde 2 fuentes:
 *   1. Server-side en ``base.html`` (``<style id="custom-theme-vars">``)
 *      para evitar el flash de tema corporate en el primer render.
 *   2. Client-side al guardar cambios en el wizard
 *      (``window.domicrm.setCustomTheme(vars)``).
 *
 * Acá solo declaramos defaults safety (idénticos al tema "corporate")
 * para que ``data-theme="custom"`` sin override no quede en blanco.
 * El bloque del style inline pisa estos defaults con prioridad
 * gracias a ser inline (mayor especificidad de cascada).
 * ===================================================================== */
[data-theme="custom"] {
    --c-primary:          #a7dc45;
    --c-primary-hover:    #8ec431;
    --c-primary-soft:     #eef8d7;
    --c-primary-soft-2:   #dff1b5;
    --c-primary-accent:   #4f7a12;
    --c-primary-border:   #c6e480;
    --c-primary-text:     #1f2937;
    --c-bg-app:           #f5f7f2;
    --c-bg-card:          #ffffff;
    --c-bg-hover:         #f0f2ec;
    --c-bg-subtle:        #e8ebe3;
    --c-bg-medium:        #d8dcd1;
    --c-text-strong:      #1f2937;
    --c-text-body:        #333333;
    --c-text-medium:      #4b5563;
    --c-text-muted:       #6b7280;
    --c-border:           #e2e5dd;
    --c-border-strong:    #c9cdc0;
    --c-danger:           #dc2626;
    --c-danger-soft:      #fee2e2;
    --c-success:          #16a34a;
}

/* =====================================================================
 * F4 — Densidad del layout
 * ``data-density="compact|normal|comfortable"`` ajusta padding base
 * en botones, inputs y filas de tabla. El default (sin atributo) es
 * el comportamiento histórico — equivale a "normal".
 * ===================================================================== */
html[data-density="compact"] {
    --c-density-pad-y: 0.25rem;
    --c-density-pad-x: 0.5rem;
    --c-density-line: 1.25;
}
html[data-density="normal"] {
    --c-density-pad-y: 0.5rem;
    --c-density-pad-x: 0.75rem;
    --c-density-line: 1.4;
}
html[data-density="comfortable"] {
    --c-density-pad-y: 0.75rem;
    --c-density-pad-x: 1rem;
    --c-density-line: 1.6;
}
html[data-density] body { line-height: var(--c-density-line, 1.4); }
html[data-density] .py-2 { padding-top: var(--c-density-pad-y); padding-bottom: var(--c-density-pad-y); }
html[data-density] .px-3 { padding-left: var(--c-density-pad-x); padding-right: var(--c-density-pad-x); }