/* ==========================================================================
   JAVAFX CSS UTILITIES - Clases utilitarias estilo Tailwind para JavaFX
   Autor: JavaFX Master | Blog: javafxmaster.dev
   ========================================================================== */

/* ==========================================================================
   VARIABLES - Paleta de colores y tokens semánticos
   ========================================================================== */

.root {
    /* ─── PALETA DE COLORES ─────────────────────────────────────────────── */

    /* Blue (Primary) */
    -color-primary-50: #eff6ff;
    -color-primary-100: #dbeafe;
    -color-primary-200: #bfdbfe;
    -color-primary-300: #60a5fa;
    -color-primary-500: #3b82f6;
    -color-primary-600: #2563eb;
    -color-primary-700: #1d4ed8;

    /* Slate (Neutral) */
    -color-slate-50: #f8fafc;
    -color-slate-100: #f1f5f9;
    -color-slate-200: #e2e8f0;
    -color-slate-300: #cbd5e1;
    -color-slate-400: #94a3b8;
    -color-slate-500: #64748b;
    -color-slate-600: #475569;
    -color-slate-700: #334155;
    -color-slate-800: #1e293b;
    -color-slate-900: #0f172a;

    /* Emerald (Success) */
    -color-success-50: #ecfdf5;
    -color-success-100: #d1fae5;
    -color-success-200: #a7f3d0;
    -color-success-500: #10b981;
    -color-success-600: #059669;
    -color-success-700: #047857;

    /* Red (Danger) */
    -color-danger-50: #fef2f2;
    -color-danger-100: #fee2e2;
    -color-danger-200: #fecaca;
    -color-danger-500: #ef4444;
    -color-danger-600: #dc2626;
    -color-danger-700: #b91c1c;

    /* Amber (Warning) */
    -color-warning-50: #fffbeb;
    -color-warning-200: #fde68a;
    -color-warning-500: #f59e0b;
    -color-warning-600: #d97706;
    -color-warning-700: #b45309;

    /* Violet (Info) */
    -color-info-50: #f5f3ff;
    -color-info-100: #ede9fe;
    -color-info-200: #ddd6fe;
    -color-info-500: #8b5cf6;
    -color-info-600: #7c3aed;
    -color-info-700: #6d28d9;

    /* Aliases semánticos */
    -color-primary: -color-primary-600;
    -color-primary-light: -color-primary-50;
    -color-secondary-50: -color-slate-50;
    -color-secondary-200: -color-slate-200;
    -color-secondary-300: -color-slate-300;
    -color-secondary-600: -color-slate-600;
    -color-secondary-700: -color-slate-700;

    /* ─── TOKENS SEMÁNTICOS ─────────────────────────────────────────────── */
    -color-bg-body: -color-slate-50;
    -color-bg-surface: #ffffff;
    -color-bg-surface-hover: -color-slate-50;
    -color-bg-subtle: -color-slate-100;

    -color-text-primary: -color-slate-800;
    -color-text-secondary: -color-slate-500;
    -color-text-muted: -color-slate-400;
    -color-text-inverted: #ffffff;

    -color-border-default: -color-slate-200;
    -color-border-subtle: -color-slate-100;
    -color-border-highlight: -color-primary-500;

    /* Tipografía global */
    -fx-font-family:
        'Segoe UI',
        system-ui,
        -apple-system,
        sans-serif;
    -fx-font-size: 14;
    -fx-background-color: -color-bg-body;
    -fx-text-fill: -color-text-primary;
}

/* ==========================================================================
   UTILIDADES DE ESPACIADO
   ========================================================================== */

/* --- Padding --- */
.p-0 {
    -fx-padding: 0;
}
.p-1 {
    -fx-padding: 4px;
}
.p-2 {
    -fx-padding: 8px;
}
.p-3 {
    -fx-padding: 12px;
}
.p-4 {
    -fx-padding: 16px;
}
.p-5 {
    -fx-padding: 24px;
}
.p-6 {
    -fx-padding: 32px;
}
.p-8 {
    -fx-padding: 48px;
}
.p-10 {
    -fx-padding: 64px;
}

/* Padding horizontal */
.px-0 {
    -fx-padding: 0 0;
}
.px-1 {
    -fx-padding: 0 4px;
}
.px-2 {
    -fx-padding: 0 8px;
}
.px-3 {
    -fx-padding: 0 12px;
}
.px-4 {
    -fx-padding: 0 16px;
}
.px-5 {
    -fx-padding: 0 24px;
}
.px-6 {
    -fx-padding: 0 32px;
}

/* Padding vertical */
.py-0 {
    -fx-padding: 0 0;
}
.py-1 {
    -fx-padding: 4px 0;
}
.py-2 {
    -fx-padding: 8px 0;
}
.py-3 {
    -fx-padding: 12px 0;
}
.py-4 {
    -fx-padding: 16px 0;
}
.py-5 {
    -fx-padding: 24px 0;
}
.py-6 {
    -fx-padding: 32px 0;
}

/* --- Spacing (gap para VBox/HBox) --- */
.gap-0 {
    -fx-spacing: 0;
}
.gap-1 {
    -fx-spacing: 4px;
}
.gap-2 {
    -fx-spacing: 8px;
}
.gap-3 {
    -fx-spacing: 12px;
}
.gap-4 {
    -fx-spacing: 16px;
}
.gap-5 {
    -fx-spacing: 20px;
}
.gap-6 {
    -fx-spacing: 24px;
}
.gap-8 {
    -fx-spacing: 32px;
}
.gap-10 {
    -fx-spacing: 40px;
}

/* ==========================================================================
   UTILIDADES DE TAMAÑO
   ========================================================================== */

/* --- Width --- */
.w-full {
    -fx-pref-width: 100%;
    -fx-max-width: Infinity;
}
.w-100 {
    -fx-pref-width: 100%;
    -fx-max-width: Infinity;
}
.w-75 {
    -fx-pref-width: 75%;
}
.w-50 {
    -fx-pref-width: 50%;
}
.w-25 {
    -fx-pref-width: 25%;
}
.w-auto {
    -fx-pref-width: -1;
}

/* Max Width */
.max-w-xs {
    -fx-max-width: 320px;
}
.max-w-sm {
    -fx-max-width: 384px;
}
.max-w-md {
    -fx-max-width: 448px;
}
.max-w-lg {
    -fx-max-width: 512px;
}
.max-w-xl {
    -fx-max-width: 576px;
}
.max-w-2xl {
    -fx-max-width: 672px;
}
.max-w-full {
    -fx-max-width: Infinity;
}

/* Min Width */
.min-w-0 {
    -fx-min-width: 0;
}
.min-w-xs {
    -fx-min-width: 320px;
}
.min-w-sm {
    -fx-min-width: 384px;
}

/* --- Height --- */
.h-full {
    -fx-pref-height: 100%;
    -fx-max-height: Infinity;
}
.h-100 {
    -fx-pref-height: 100%;
    -fx-max-height: Infinity;
}
.h-75 {
    -fx-pref-height: 75%;
}
.h-50 {
    -fx-pref-height: 50%;
}
.h-25 {
    -fx-pref-height: 25%;
}
.h-auto {
    -fx-pref-height: -1;
}

/* Fixed sizes */
.h-8 {
    -fx-pref-height: 32px;
}
.h-10 {
    -fx-pref-height: 40px;
}
.h-12 {
    -fx-pref-height: 48px;
}
.w-8 {
    -fx-pref-width: 32px;
}
.w-10 {
    -fx-pref-width: 40px;
}
.w-12 {
    -fx-pref-width: 48px;
}

/* ==========================================================================
   UTILIDADES DE LAYOUT
   ========================================================================== */

/* Alignment (para VBox, HBox, StackPane, etc.) */
.items-center {
    -fx-alignment: center;
}
.items-top-center {
    -fx-alignment: top-center;
}
.items-top-left {
    -fx-alignment: top-left;
}
.items-top-right {
    -fx-alignment: top-right;
}
.items-center-left {
    -fx-alignment: center-left;
}
.items-center-right {
    -fx-alignment: center-right;
}
.items-bottom-center {
    -fx-alignment: bottom-center;
}
.items-bottom-left {
    -fx-alignment: bottom-left;
}
.items-bottom-right {
    -fx-alignment: bottom-right;
}
.items-baseline-center {
    -fx-alignment: baseline-center;
}
.items-baseline-left {
    -fx-alignment: baseline-left;
}
.items-baseline-right {
    -fx-alignment: baseline-right;
}

/* Grow priority helpers (usar con HBox.setHgrow o VBox.setVgrow) */
.flex-row {
    -fx-alignment: center-left;
}
.flex-col {
    -fx-alignment: top-left;
}

/* ==========================================================================
   UTILIDADES DE TIPOGRAFÍA
   ========================================================================== */

/* --- Tamaños --- */
.text-xs {
    -fx-font-size: 11px;
}
.text-sm {
    -fx-font-size: 13px;
}
.text-base {
    -fx-font-size: 14px;
}
.text-lg {
    -fx-font-size: 16px;
}
.text-xl {
    -fx-font-size: 20px;
}
.text-2xl {
    -fx-font-size: 24px;
}
.text-3xl {
    -fx-font-size: 30px;
}
.text-4xl {
    -fx-font-size: 36px;
}
.text-5xl {
    -fx-font-size: 48px;
}

/* --- Peso --- */
.font-bold {
    -fx-font-weight: bold;
}
.font-semibold {
    -fx-font-weight: 600;
}
.font-normal {
    -fx-font-weight: normal;
}
.font-italic {
    -fx-font-style: italic;
}

/* --- Alineación de texto --- */
.text-center {
    -fx-alignment: center;
    -fx-text-alignment: center;
}
.text-left {
    -fx-alignment: center-left;
    -fx-text-alignment: left;
}
.text-right {
    -fx-alignment: center-right;
    -fx-text-alignment: right;
}

/* --- Wrapping --- */
.text-wrap {
    -fx-wrap-text: true;
}
.text-nowrap {
    -fx-wrap-text: false;
}

/* --- Underline --- */
.underline {
    -fx-underline: true;
}
.no-underline {
    -fx-underline: false;
}

/* ==========================================================================
   UTILIDADES DE COLOR DE TEXTO
   ========================================================================== */

.text-white {
    -fx-text-fill: white;
}
.text-black {
    -fx-text-fill: black;
}
.text-primary {
    -fx-text-fill: -color-primary-600;
}
.text-success {
    -fx-text-fill: -color-success-600;
}
.text-danger {
    -fx-text-fill: -color-danger-600;
}
.text-warning {
    -fx-text-fill: -color-warning-600;
}
.text-info {
    -fx-text-fill: -color-info-600;
}

.text-slate-400 {
    -fx-text-fill: -color-slate-400;
}
.text-slate-500 {
    -fx-text-fill: -color-slate-500;
}
.text-slate-600 {
    -fx-text-fill: -color-slate-600;
}
.text-slate-700 {
    -fx-text-fill: -color-slate-700;
}
.text-slate-800 {
    -fx-text-fill: -color-slate-800;
}
.text-slate-900 {
    -fx-text-fill: -color-slate-900;
}

.text-primary-600 {
    -fx-text-fill: -color-primary-600;
}
.text-success-600 {
    -fx-text-fill: -color-success-600;
}
.text-danger-600 {
    -fx-text-fill: -color-danger-600;
}

/* ==========================================================================
   UTILIDADES DE FONDO
   ========================================================================== */

.bg-transparent {
    -fx-background-color: transparent;
}
.bg-white {
    -fx-background-color: white;
}

/* Slate */
.bg-slate-50 {
    -fx-background-color: -color-slate-50;
}
.bg-slate-100 {
    -fx-background-color: -color-slate-100;
}
.bg-slate-200 {
    -fx-background-color: -color-slate-200;
}
.bg-slate-300 {
    -fx-background-color: -color-slate-300;
}
.bg-slate-700 {
    -fx-background-color: -color-slate-700;
}
.bg-slate-800 {
    -fx-background-color: -color-slate-800;
}
.bg-slate-900 {
    -fx-background-color: -color-slate-900;
}

/* Primary */
.bg-primary-50 {
    -fx-background-color: -color-primary-50;
}
.bg-primary-100 {
    -fx-background-color: -color-primary-100;
}
.bg-primary {
    -fx-background-color: -color-primary-600;
}
.bg-primary-600 {
    -fx-background-color: -color-primary-600;
}
.bg-primary-700 {
    -fx-background-color: -color-primary-700;
}

/* Success */
.bg-success-50 {
    -fx-background-color: -color-success-50;
}
.bg-success {
    -fx-background-color: -color-success-600;
}
.bg-success-600 {
    -fx-background-color: -color-success-600;
}

/* Danger */
.bg-danger-50 {
    -fx-background-color: -color-danger-50;
}
.bg-danger {
    -fx-background-color: -color-danger-600;
}
.bg-danger-600 {
    -fx-background-color: -color-danger-600;
}

/* Warning */
.bg-warning-50 {
    -fx-background-color: -color-warning-50;
}
.bg-warning {
    -fx-background-color: -color-warning-600;
}

/* Info */
.bg-info-50 {
    -fx-background-color: -color-info-50;
}
.bg-info {
    -fx-background-color: -color-info-600;
}

/* ==========================================================================
   UTILIDADES DE BORDES Y REDONDEO
   ========================================================================== */

/* --- Bordes --- */
.border {
    -fx-border-color: -color-border-default;
    -fx-border-width: 1px;
}
.border-0 {
    -fx-border-width: 0;
}
.border-2 {
    -fx-border-width: 2px;
    -fx-border-color: -color-border-default;
}
.border-b {
    -fx-border-width: 0 0 1px 0;
    -fx-border-color: -color-border-default;
}
.border-t {
    -fx-border-width: 1px 0 0 0;
    -fx-border-color: -color-border-default;
}
.border-l {
    -fx-border-width: 0 0 0 1px;
    -fx-border-color: -color-border-default;
}

/* Colores de borde */
.border-primary {
    -fx-border-color: -color-primary-500;
}
.border-success {
    -fx-border-color: -color-success-500;
}
.border-danger {
    -fx-border-color: -color-danger-500;
}
.border-warning {
    -fx-border-color: -color-warning-500;
}
.border-info {
    -fx-border-color: -color-info-500;
}
.border-slate-200 {
    -fx-border-color: -color-slate-200;
}
.border-slate-300 {
    -fx-border-color: -color-slate-300;
}

/* --- Rounded (border-radius) --- */
.rounded-none {
    -fx-background-radius: 0;
    -fx-border-radius: 0;
}
.rounded-sm {
    -fx-background-radius: 2px;
    -fx-border-radius: 2px;
}
.rounded {
    -fx-background-radius: 4px;
    -fx-border-radius: 4px;
}
.rounded-md {
    -fx-background-radius: 6px;
    -fx-border-radius: 6px;
}
.rounded-lg {
    -fx-background-radius: 8px;
    -fx-border-radius: 8px;
}
.rounded-xl {
    -fx-background-radius: 12px;
    -fx-border-radius: 12px;
}
.rounded-2xl {
    -fx-background-radius: 16px;
    -fx-border-radius: 16px;
}
.rounded-full {
    -fx-background-radius: 9999px;
    -fx-border-radius: 9999px;
}
.rounded-circle {
    -fx-background-radius: 50%;
    -fx-border-radius: 50%;
}

/* ==========================================================================
   UTILIDADES DE CURSOR Y VISIBILIDAD
   ========================================================================== */

.cursor-hand {
    -fx-cursor: hand;
}
.cursor-default {
    -fx-cursor: default;
}
.cursor-text {
    -fx-cursor: text;
}

.opacity-0 {
    -fx-opacity: 0;
}
.opacity-25 {
    -fx-opacity: 0.25;
}
.opacity-50 {
    -fx-opacity: 0.5;
}
.opacity-75 {
    -fx-opacity: 0.75;
}
.opacity-100 {
    -fx-opacity: 1;
}

.invisible {
    -fx-opacity: 0;
}
.visible {
    -fx-opacity: 1;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

/* Base */
.btn {
    -fx-padding: 7px 15px;
    -fx-background-radius: 6px;
    -fx-cursor: hand;
    -fx-font-weight: 600;
    -fx-border-width: 1px;
    -fx-border-color: transparent;
    -fx-border-radius: 6px;
}

/* Solid */
.btn-primary {
    -fx-background-color: -color-primary-500;
    -fx-text-fill: white;
}
.btn-primary:hover {
    -fx-background-color: -color-primary-600;
}

.btn-success {
    -fx-background-color: -color-success-500;
    -fx-text-fill: white;
}
.btn-success:hover {
    -fx-background-color: -color-success-600;
}

.btn-danger {
    -fx-background-color: -color-danger-500;
    -fx-text-fill: white;
}
.btn-danger:hover {
    -fx-background-color: -color-danger-600;
}

.btn-warning {
    -fx-background-color: -color-warning-500;
    -fx-text-fill: white;
}
.btn-warning:hover {
    -fx-background-color: -color-warning-600;
}

.btn-info {
    -fx-background-color: -color-info-500;
    -fx-text-fill: white;
}
.btn-info:hover {
    -fx-background-color: -color-info-600;
}

.btn-dark {
    -fx-background-color: -color-slate-900;
    -fx-text-fill: white;
}
.btn-dark:hover {
    -fx-background-color: -color-slate-800;
}

.btn-secondary {
    -fx-background-color: -color-secondary-200;
    -fx-text-fill: -color-secondary-700;
}
.btn-secondary:hover {
    -fx-background-color: -color-secondary-300;
}

/* Light */
.btn-light-primary {
    -fx-background-color: -color-primary-50;
    -fx-text-fill: -color-primary-600;
}
.btn-light-primary:hover {
    -fx-background-color: -color-primary-100;
}

.btn-light-success {
    -fx-background-color: #ecfdf5;
    -fx-text-fill: -color-success-600;
}
.btn-light-success:hover {
    -fx-background-color: #d1fae5;
}

.btn-light-danger {
    -fx-background-color: #fef2f2;
    -fx-text-fill: -color-danger-600;
}
.btn-light-danger:hover {
    -fx-background-color: #fee2e2;
}

/* Outline */
.btn-outline-primary {
    -fx-background-color: transparent;
    -fx-border-color: -color-primary-500;
    -fx-text-fill: -color-primary-500;
}
.btn-outline-primary:hover {
    -fx-background-color: -color-primary-50;
}

/* Dashed */
.btn-dashed {
    -fx-background-color: transparent;
    -fx-border-color: -color-slate-300;
    -fx-border-style: segments(3, 3);
    -fx-text-fill: -color-slate-500;
}
.btn-dashed:hover {
    -fx-border-color: -color-primary-500;
    -fx-text-fill: -color-primary-500;
    -fx-background-color: -color-primary-50;
}

/* Sizes */
.btn-sm {
    -fx-padding: 6px 12px;
    -fx-font-size: 12px;
}
.btn-lg {
    -fx-padding: 14px 28px;
    -fx-font-size: 16px;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    -fx-padding: 3px 6px;
    -fx-background-radius: 4px;
    -fx-font-weight: 600;
    -fx-font-size: 12px;
    -fx-text-fill: white;
}

.badge-primary {
    -fx-background-color: -color-primary-500;
}
.badge-success {
    -fx-background-color: -color-success-500;
}
.badge-danger {
    -fx-background-color: -color-danger-500;
}
.badge-warning {
    -fx-background-color: -color-warning-500;
    -fx-text-fill: white;
}
.badge-info {
    -fx-background-color: -color-info-500;
}
.badge-dark {
    -fx-background-color: -color-slate-900;
}
.badge-secondary {
    -fx-background-color: -color-secondary-200;
    -fx-text-fill: -color-slate-800;
}

.badge-light-primary {
    -fx-background-color: -color-primary-50;
    -fx-text-fill: -color-primary-600;
}
.badge-light-success {
    -fx-background-color: #ecfdf5;
    -fx-text-fill: -color-success-600;
}
.badge-light-danger {
    -fx-background-color: #fef2f2;
    -fx-text-fill: -color-danger-600;
}
.badge-light-warning {
    -fx-background-color: #fffbeb;
    -fx-text-fill: -color-warning-600;
}
.badge-light-info {
    -fx-background-color: -color-info-50;
    -fx-text-fill: -color-info-600;
}

.badge-sm {
    -fx-padding: 2px 6px;
    -fx-font-size: 10px;
}
.badge-lg {
    -fx-padding: 8px 12px;
    -fx-font-size: 14px;
}
.badge-circle {
    -fx-background-radius: 50%;
    -fx-padding: 4px;
    -fx-min-width: 24px;
    -fx-min-height: 24px;
    -fx-alignment: center;
}

/* ==========================================================================
   DARK MODE - Agrega .dark a tu root para modo oscuro
   Uso: root.getStyleClass().add("dark");
   ========================================================================== */

.root.dark {
    -color-bg-body: -color-slate-900;
    -color-bg-surface: -color-slate-800;
    -color-bg-surface-hover: -color-slate-700;
    -color-bg-subtle: -color-slate-800;

    -color-text-primary: -color-slate-100;
    -color-text-secondary: -color-slate-400;
    -color-text-muted: -color-slate-500;
    -color-text-inverted: -color-slate-900;

    -color-border-default: -color-slate-700;
    -color-border-subtle: -color-slate-800;
    -color-border-highlight: -color-primary-300;

    -fx-background-color: -color-bg-body;
    -fx-text-fill: -color-text-primary;
}