/* styles.css or app.css */
@import "tailwindcss";

/* ========================================
   VARIABLES CSS PARA MIN/MAX
   ======================================== */

/* Define valor mínimo personalizado para width/height */
@utility fluid-min-* {
  --fluid-min: --value([*]);
}

/* Define valor máximo personalizado para width/height */
@utility fluid-max-* {
  --fluid-max: --value([*]);
}

/* Define valor mínimo personalizado para max-width/max-height */
@utility fluid-max-w-min-* {
  --fluid-max-w-min: --value([*]);
}

/* Define valor máximo personalizado para max-width/max-height */
@utility fluid-max-w-max-* {
  --fluid-max-w-max: --value([*]);
}

/* Define valor mínimo personalizado para font-size */
@utility fluid-text-min-* {
  --fluid-text-min: --value([*]);
}

/* Define valor máximo personalizado para font-size */
@utility fluid-text-max-* {
  --fluid-text-max: --value([*]);
}

/* Define valor mínimo personalizado para line-height */
@utility fluid-leading-min-* {
  --fluid-leading-min: --value([*]);
}

/* Define valor máximo personalizado para line-height */
@utility fluid-leading-max-* {
  --fluid-leading-max: --value([*]);
}

/* ========================================
   VARIABLES DE CONTROL GLOBAL
   ======================================== */

/* Define el multiplicador de escala actual (por defecto: 1) */
@utility current-scale-* {
  --current-scale: --value([*]);
}

/* Define el viewport mínimo para width (por defecto: 20rem) */
@utility vw-min-* {
  --vw-min: --value([*]);
}

/* Define el viewport mínimo para height (por defecto: 20rem) */
@utility vh-min-* {
  --vh-min: --value([*]);
}

/* Define el multiplicador mínimo (por defecto: 0.88 = 88%) */
@utility fluid-min-mult-* {
  --fluid-min-mult: --value([*]);
}

/* Define el multiplicador máximo (por defecto: 1.2 = 120%) */
@utility fluid-max-mult-* {
  --fluid-max-mult: --value([*]);
}

/* ========================================
   UTILIDADES FLUID PRINCIPALES
   ======================================== */

/*
 * Width con fluid inteligente
 * Usa viewport para escalado fluido entre viewports 320px (móvil) y 1920px (desktop)
 * Fórmula lineal: min + (max - min) * ((100vw - 320px) / (1920 - 320))
 */
 @utility w-fluid-* {
  --current-scale: 1;
  --vw-min: 20rem;
  --fluid-min-mult: 0.88;
  --fluid-max-mult: 1.2;
  
  /* Primero captura el valor en una variable */
  --fluid-base: --value([*]);
  
  /* Luego usa esa variable en los cálculos */
  --base: calc(var(--fluid-base) * var(--current-scale));
  --min: calc(var(--fluid-base) * var(--fluid-min-mult));
  --max: calc(var(--fluid-base) * var(--fluid-max-mult));
  
  width: clamp(
    var(--min),
    calc(var(--min) + (var(--max) - var(--min)) * (100vw - var(--vw-min)) / (100vw - var(--vw-min))),
    var(--max)
  );
}
/*
 * Height con fluid inteligente
 * Usa viewport para escalado fluido entre viewports 320px y 1080px
 * Fórmula lineal: min + (max - min) * ((100vh - 320px) / (1080 - 320))
 */
@utility h-fluid-* {
  --current-scale: 1;
  --vh-min: 20rem;
  --fluid-min-mult: 0.88;
  --fluid-max-mult: 1.2;

  /* Primero captura el valor en una variable */
  --fluid-base: --value([*]);

  /* Luego usa esa variable en los cálculos */
  --base: calc(var(--fluid-base) * var(--current-scale));
  --min: calc(var(--fluid-base) * var(--fluid-min-mult));
  --max: calc(var(--fluid-base) * var(--fluid-max-mult));

  height: clamp(
    var(--min),
    calc(var(--min) + (var(--max) - var(--min)) * (100vh - var(--vh-min)) / (100vh - var(--vh-min))),
    var(--max)
  );
}

/*
 * Font-size con fluid inteligente
 * - Si defines --fluid-text-min/--fluid-text-max, los usa
 * - Si no, calcula automáticamente (min: 88%, max: 120%)
 */
@utility text-fluid-* {
  --current-scale: 1;
  --vw-min: 20rem;
  --fluid-min-mult: 0.88;
  --fluid-max-mult: 1.2;

  /* Primero captura el valor en una variable */
  --fluid-base: --value([*]);

  /* Luego usa esa variable en los cálculos */
  --base: calc(var(--fluid-base) * var(--current-scale));
  --min: calc(var(--fluid-base) * var(--fluid-min-mult));
  --max: calc(var(--fluid-base) * var(--fluid-max-mult));

  font-size: clamp(
    var(--min),
    calc(var(--min) + (var(--max) - var(--min)) * (100vw - var(--vw-min)) / (100vw - var(--vw-min))),
    var(--max)
  );
}

/*
 * Line-height con fluid inteligente
 * - Si defines --fluid-leading-min/--fluid-leading-max, los usa
 * - Si no, calcula automáticamente (min: 88%, max: 120%)
 */
@utility leading-fluid-* {
  --current-scale: 1;
  --vw-min: 20rem;
  --fluid-min-mult: 0.88;
  --fluid-max-mult: 1.2;

  /* Primero captura el valor en una variable */
  --fluid-base: --value([*]);

  /* Luego usa esa variable en los cálculos */
  --base: calc(var(--fluid-base) * var(--current-scale));
  --min: calc(var(--fluid-base) * var(--fluid-min-mult));
  --max: calc(var(--fluid-base) * var(--fluid-max-mult));

  line-height: clamp(
    var(--min),
    calc(var(--min) + (var(--max) - var(--min)) * (100vw - var(--vw-min)) / (100vw - var(--vw-min))),
    var(--max)
  );
}

/* ========================================
   UTILIDADES FLUID CON CONTAINER QUERIES
   ======================================== */

/* 
 * Width con fluid responsive a container
 * Se adapta según el tamaño del contenedor padre
 * - Contenedor < 400px: más compresión (85% - 115%)
 * - Contenedor 400px-800px: balance (90% - 130%)
 * - Contenedor > 800px: valor fijo
 */
@utility w-fluid-cq-* {
  --fluid-base: --value([*]);
  --fluid-cq-min-ratio: 0.85;
  --fluid-cq-max-ratio: 1.15;
  
  width: clamp(
    var(--fluid-min, calc(var(--fluid-base) * var(--fluid-cq-min-ratio))),
    var(--fluid-base),
    var(--fluid-max, calc(var(--fluid-base) * var(--fluid-cq-max-ratio)))
  );
  
  @container (min-width: 400px) {
    width: clamp(
      var(--fluid-min, calc(var(--fluid-base) * 0.9)),
      var(--fluid-base),
      var(--fluid-max, calc(var(--fluid-base) * 1.3))
    );
  }
  
  @container (min-width: 800px) {
    width: var(--fluid-override, var(--fluid-base));
  }
}

/*
 * Height con fluid responsive a container
 */
@utility h-fluid-cq-* {
  --fluid-base: --value([*]);
  --fluid-cq-min-ratio: 0.85;
  --fluid-cq-max-ratio: 1.15;

  height: clamp(
    var(--fluid-min, calc(var(--fluid-base) * var(--fluid-cq-min-ratio))),
    var(--fluid-base),
    var(--fluid-max, calc(var(--fluid-base) * var(--fluid-cq-max-ratio)))
  );

  @container (min-width: 400px) {
    height: clamp(
      var(--fluid-min, calc(var(--fluid-base) * 0.9)),
      var(--fluid-base),
      var(--fluid-max, calc(var(--fluid-base) * 1.3))
    );
  }

  @container (min-width: 800px) {
    height: var(--fluid-override, var(--fluid-base));
  }
}

/*
 * Font-size con fluid responsive a container
 * Se adapta según el tamaño del contenedor padre
 * - Contenedor < 400px: más compresión (85% - 115%)
 * - Contenedor 400px-800px: balance (90% - 130%)
 * - Contenedor > 800px: valor fijo
 */
@utility text-fluid-cq-* {
  --fluid-text-base: --value([*]);
  --fluid-text-cq-min-ratio: 0.85;
  --fluid-text-cq-max-ratio: 1.15;

  font-size: clamp(
    var(--fluid-text-min, calc(var(--fluid-text-base) * var(--fluid-text-cq-min-ratio))),
    var(--fluid-text-base),
    var(--fluid-text-max, calc(var(--fluid-text-base) * var(--fluid-text-cq-max-ratio)))
  );

  @container (min-width: 400px) {
    font-size: clamp(
      var(--fluid-text-min, calc(var(--fluid-text-base) * 0.9)),
      var(--fluid-text-base),
      var(--fluid-text-max, calc(var(--fluid-text-base) * 1.3))
    );
  }

  @container (min-width: 800px) {
    font-size: var(--fluid-text-override, var(--fluid-text-base));
  }
}

/*
 * Line-height con fluid responsive a container
 * Se adapta según el tamaño del contenedor padre
 * - Contenedor < 400px: más compresión (85% - 115%)
 * - Contenedor 400px-800px: balance (90% - 130%)
 * - Contenedor > 800px: valor fijo
 */
@utility leading-fluid-cq-* {
  --fluid-leading-base: --value([*]);
  --fluid-leading-cq-min-ratio: 0.85;
  --fluid-leading-cq-max-ratio: 1.15;

  line-height: clamp(
    var(--fluid-leading-min, calc(var(--fluid-leading-base) * var(--fluid-leading-cq-min-ratio))),
    var(--fluid-leading-base),
    var(--fluid-leading-max, calc(var(--fluid-leading-base) * var(--fluid-leading-cq-max-ratio)))
  );

  @container (min-width: 400px) {
    line-height: clamp(
      var(--fluid-leading-min, calc(var(--fluid-leading-base) * 0.9)),
      var(--fluid-leading-base),
      var(--fluid-leading-max, calc(var(--fluid-leading-base) * 1.3))
    );
  }

  @container (min-width: 800px) {
    line-height: var(--fluid-leading-override, var(--fluid-leading-base));
  }
}

/* ========================================
   UTILIDADES FLUID PARA MAX-WIDTH
   ======================================== */

/* 
 * Max-width con fluid inteligente
 * - Si defines --fluid-max-w-min/--fluid-max-w-max, los usa
 * - Si no, calcula automáticamente (min: 88%, max: 120%)
 */
@utility max-w-fluid-* {
  max-width: clamp(
    var(--fluid-max-w-min, calc(--value([*]) * 0.88)),
    --value([*]),
    var(--fluid-max-w-max, calc(--value([*]) * 1.2))
  );
}

/* 
 * Max-height con fluid inteligente
 * Mismo comportamiento que max-w-fluid
 */
@utility max-h-fluid-* {
  max-height: clamp(
    var(--fluid-max-w-min, calc(--value([*]) * 0.88)),
    --value([*]),
    var(--fluid-max-w-max, calc(--value([*]) * 1.2))
  );
}

/* ========================================
   UTILIDADES FLUID PARA MAX-WIDTH CON CONTAINER QUERIES
   ======================================== */

/* 
 * Max-width con fluid responsive a container
 * Se adapta según el tamaño del contenedor padre
 * - Contenedor < 400px: más compresión (85% - 115%)
 * - Contenedor 400px-800px: balance (90% - 130%)
 * - Contenedor > 800px: valor fijo
 */
@utility max-w-fluid-cq-* {
  max-width: clamp(
    var(--fluid-max-w-min, calc(--value([*]) * 0.85)),
    --value([*]),
    var(--fluid-max-w-max, calc(--value([*]) * 1.15))
  );
  
  @container (min-width: 400px) {
    max-width: clamp(
      var(--fluid-max-w-min, calc(--value([*]) * 0.9)),
      --value([*]),
      var(--fluid-max-w-max, calc(--value([*]) * 1.3))
    );
  }
  
  @container (min-width: 800px) {
    max-width: var(--fluid-max-w-override, --value([*]));
  }
}

/* 
 * Max-height con fluid responsive a container
 */
@utility max-h-fluid-cq-* {
  max-height: clamp(
    var(--fluid-max-w-min, calc(--value([*]) * 0.85)),
    --value([*]),
    var(--fluid-max-w-max, calc(--value([*]) * 1.15))
  );
  
  @container (min-width: 400px) {
    max-height: clamp(
      var(--fluid-max-w-min, calc(--value([*]) * 0.9)),
      --value([*]),
      var(--fluid-max-w-max, calc(--value([*]) * 1.3))
    );
  }
  
  @container (min-width: 800px) {
    max-height: var(--fluid-max-w-override, --value([*]));
  }
}