/* === app.css ===
   NO duplicar styles.css. Prioridad: styles.css → Tailwind estándar → app.css.
*/
/* === Índice ===
   1) Utilities (nuevas)
   2) Componentes / bloques existentes (sin reordenar)
*/

/* === Utilities (nuevas) === */

:root {
    --tw-gray-700: #374151;
    --tw-light-active: #f9f9f9;
    --tw-rotate: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-skew-y: 0;
    --tw-border-style: solid;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-shadow-color: rgb(0 0 0 / 0);
    --tw-backdrop-brightness: brightness(1);
    --tw-backdrop-contrast: contrast(1);
    --tw-backdrop-grayscale: grayscale(0);
    --tw-backdrop-hue-rotate: hue-rotate(0deg);
    --tw-backdrop-invert: invert(0);
    --tw-backdrop-opacity: opacity(1);
    --tw-backdrop-saturate: saturate(1);
    --tw-backdrop-sepia: sepia(0);
    --tw-leading: normal;

    --color-muted: #D9D9D9; 
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-300-fallback: #d1d5db;
    --color-gray-800: #333333;
    --color-gray-900: oklch(27.8% 0.033 256.848);
    --color-gray-900-fallback: #1f2937;
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-400-fallback: #4ade80;
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-300-fallback: #fca5a5;
    --color-red-500: oklch(64% 0.245 27.325);
    --color-red-500-fallback: #ef4444; /* aproximado */

    /* Slate palette (Tailwind CSS v4 standard) */
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-50-fallback: #f8fafc;
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-100-fallback: #f1f5f9;
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-200-fallback: #e2e8f0;
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-400-fallback: #94a3b8;
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-500-fallback: #64748b;
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-600-fallback: #475569;
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-700-fallback: #334155;
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-800-fallback: #1e293b;

    /* Emerald palette (Tailwind CSS v4 standard) */
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-50-fallback: #ecfdf5;
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-500-fallback: #10b981;
    --color-emerald-600: oklch(62.7% 0.166 162.48);
    --color-emerald-600-fallback: #059669;

    /* Amber palette (Tailwind CSS v4 standard) */
    --color-amber-50: oklch(98.7% 0.026 102.212);
    --color-amber-50-fallback: #fffbeb;
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-500-fallback: #f59e0b;

    /* Blue extended palette */
    --color-blue-100: oklch(93.2% 0.032 254.601);
    --color-blue-100-fallback: #dbeafe;
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-600-fallback: #2563eb;

    --color-title: oklch(32% 0.07 255);
    --color-title-fallback: #036;
    --color-subtitle: oklch(60% 0.02 255);
    --color-subtitle-fallback: #444;
    --font-weight-bold: 700; /* valor estándar para bold */
    --font-family-nunito: 'Nunito', sans-serif;
}

/* Base layout helpers */
.min-h-screen { min-height: 100vh; }
.min-h-0 { min-height: 0; }
.h-screen { height: 100vh; }
.max-h-screen { max-height: 100vh; }

/* Display & layout */
@media (min-width: 40rem) {
    .sm\:hidden { display: none; }
}
@media (min-width: 48rem) {
    .md\:inline-flex { display: inline-flex; }
}

/* Flex utilities */
@media (min-width: 40rem) {
    .sm\:flex-col { flex-direction: column; }
    .sm\:items-start { align-items: flex-start; }
}
@media (min-width: 48rem) {
    .md\:flex-col { flex-direction: column; }
    .md\:flex-wrap { flex-wrap: wrap; }
    .md\:items-start { align-items: flex-start; }
    .md\:items-end { align-items: flex-end; }
    .md\:justify-center { justify-content: center; }
}

/* Grid utilities */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-12 { grid-column: span 12 / span 12; }
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.gap-x-2 { column-gap: calc(var(--spacing) * 2); }
.gap-x-4 { column-gap: calc(var(--spacing) * 4); }
.gap-y-2 { row-gap: calc(var(--spacing) * 2); }
.gap-y-4 { row-gap: calc(var(--spacing) * 4); }
@media (min-width: 48rem) {
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:col-span-8 { grid-column: span 8 / span 8; }
    .md\:col-span-12 { grid-column: span 12 / span 12; }
    .md\:col-start-2 { grid-column-start: 2; }
    .md\:gap-x-6 { column-gap: calc(var(--spacing) * 6); }
    .md\:gap-y-6 { row-gap: calc(var(--spacing) * 6); }
}

/* Spacing (padding/margin + negativo) */
.p-6 { padding: calc(var(--spacing) * 6); }
.p-12 { padding: calc(var(--spacing) * 12); }
.p-16 { padding: calc(var(--spacing) * 16); }
.px-6 { padding-inline: calc(var(--spacing) * 6); }
.px-8 { padding-inline: calc(var(--spacing) * 8); }
.px-12 { padding-inline: calc(var(--spacing) * 12); }
.px-16 { padding-inline: calc(var(--spacing) * 16); }
.py-6 { padding-block: calc(var(--spacing) * 6); }
.py-7 { padding-block: calc(var(--spacing) * 7); }
.py-8 { padding-block: calc(var(--spacing) * 8); }
.py-12 { padding-block: calc(var(--spacing) * 12); }
.pt-7 { padding-top: calc(var(--spacing) * 7); }
.pt-10 { padding-top: calc(var(--spacing) * 10); }
.pt-12 { padding-top: calc(var(--spacing) * 12); }
.pt-16 { padding-top: calc(var(--spacing) * 16); }
.pb-8 { padding-bottom: calc(var(--spacing) * 8); }
.pb-12 { padding-bottom: calc(var(--spacing) * 12); }
.pb-16 { padding-bottom: calc(var(--spacing) * 16); }
.pl-0 { padding-left: calc(var(--spacing) * 0); }
.pl-1 { padding-left: calc(var(--spacing) * 1); }
.pl-3 { padding-left: calc(var(--spacing) * 3); }
.pl-4 { padding-left: calc(var(--spacing) * 4); }
.pl-5 { padding-left: calc(var(--spacing) * 5); }
.pl-7 { padding-left: calc(var(--spacing) * 7); }
.pl-8 { padding-left: calc(var(--spacing) * 8); }
.pl-10 { padding-left: calc(var(--spacing) * 10); }
.pl-12 { padding-left: calc(var(--spacing) * 12); }
.pl-16 { padding-left: calc(var(--spacing) * 16); }
.pr-0 { padding-right: calc(var(--spacing) * 0); }
.pr-1 { padding-right: calc(var(--spacing) * 1); }
.pr-4 { padding-right: calc(var(--spacing) * 4); }
.pr-5 { padding-right: calc(var(--spacing) * 5); }
.pr-6 { padding-right: calc(var(--spacing) * 6); }
.pr-7 { padding-right: calc(var(--spacing) * 7); }
.pr-8 { padding-right: calc(var(--spacing) * 8); }
.pr-10 { padding-right: calc(var(--spacing) * 10); }
.pr-12 { padding-right: calc(var(--spacing) * 12); }
.pr-16 { padding-right: calc(var(--spacing) * 16); }
.m-3 { margin: calc(var(--spacing) * 3); }
.m-4 { margin: calc(var(--spacing) * 4); }
.m-5 { margin: calc(var(--spacing) * 5); }
.m-6 { margin: calc(var(--spacing) * 6); }
.m-7 { margin: calc(var(--spacing) * 7); }
.m-8 { margin: calc(var(--spacing) * 8); }
.m-10 { margin: calc(var(--spacing) * 10); }
.m-12 { margin: calc(var(--spacing) * 12); }
.m-16 { margin: calc(var(--spacing) * 16); }
.mx-0 { margin-inline: calc(var(--spacing) * 0); }
.mx-3 { margin-inline: calc(var(--spacing) * 3); }
.mx-4 { margin-inline: calc(var(--spacing) * 4); }
.mx-6 { margin-inline: calc(var(--spacing) * 6); }
.mx-8 { margin-inline: calc(var(--spacing) * 8); }
.mx-10 { margin-inline: calc(var(--spacing) * 10); }
.mx-12 { margin-inline: calc(var(--spacing) * 12); }
.mx-16 { margin-inline: calc(var(--spacing) * 16); }
.my-0 { margin-block: calc(var(--spacing) * 0); }
.my-3 { margin-block: calc(var(--spacing) * 3); }
.my-6 { margin-block: calc(var(--spacing) * 6); }
.my-12 { margin-block: calc(var(--spacing) * 12); }
.my-16 { margin-block: calc(var(--spacing) * 16); }
.mt-0 { margin-top: calc(var(--spacing) * 0); }
.mt-auto { margin-top: auto; }
.mt-10 { margin-top: calc(var(--spacing) * 10); }
.space-y-1 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
}
.space-y-6 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
.space-y-8 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}
.space-y-10 > :not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
}
.-space-x-2 > :not(:last-child) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
}
@media (min-width: 40rem) {
    .sm\:p-4 { padding: calc(var(--spacing) * 4); }
    .sm\:px-4 { padding-inline: calc(var(--spacing) * 4); }
    .sm\:pb-16 { padding-bottom: calc(var(--spacing) * 16); }
    .sm\:text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
}
@media (min-width: 48rem) {
    .md\:gap-2 { gap: calc(var(--spacing) * 2); }
    .md\:gap-4 { gap: calc(var(--spacing) * 4); }
    .md\:gap-6 { gap: calc(var(--spacing) * 6); }
    .md\:px-4 { padding-inline: calc(var(--spacing) * 4); }
    .md\:px-6 { padding-inline: calc(var(--spacing) * 6); }
    .md\:px-8 { padding-inline: calc(var(--spacing) * 8); }
    .md\:py-8 { padding-block: calc(var(--spacing) * 8); }
    .md\:p-6 { padding: calc(var(--spacing) * 6); }
    .md\:p-8 { padding: calc(var(--spacing) * 8); }
}
@media (min-width: 64rem) {
    .lg\:p-8 { padding: calc(var(--spacing) * 8); }
    .lg\:px-8 { padding-inline: calc(var(--spacing) * 8); }
}

/* Sizing (w/h/min/max + fracciones) */
.w-6 { width: calc(var(--spacing) * 6); }
.w-64 { width: calc(var(--spacing) * 64); }
.w-72 { width: calc(var(--spacing) * 72); }
.w-130 { width: calc(var(--spacing) * 130); }
.w-\[72px\] { width: 72px; }
.w-\[42%\] { width: 42%; }
.w-\[90%\] { width: 90%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.w-max { width: max-content; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }
.min-w-0 { min-width: 0; }
.min-w-\[60px\] { min-width: 60px; }
.min-w-\[80px\] { min-width: 80px; }
.min-w-\[700px\] { min-width: 700px; }
.min-h-24 { min-height: calc(var(--spacing) * 24); }
.h-14 { height: calc(var(--spacing) * 14); }
.h-16 { height: calc(var(--spacing) * 16); }
.h-64 { height: calc(var(--spacing) * 64); }
.h-75 { height: calc(var(--spacing) * 75); }
.h-85 { height: calc(var(--spacing) * 85); }
.h-\[600px\] { height: 600px; }
.h-\[80%\] { height: 80%; }
.max-h-\[500px\] { max-height: 500px; }
.max-h-\[60%\] { max-height: 60%; }
.max-h-\[70vh\] { max-height: 70vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[calc\(100vh-10rem\)\] { max-height: calc(100vh - 10rem); }
.max-w-\[100px\] { max-width: 100px; }
.max-w-\[45px\] { max-width: 45px; }
.max-w-\[550px\] { max-width: 550px; }
.max-w-\[60%\] { max-width: 60%; }
.max-w-\[80vw\] { max-width: 80vw; }
.max-w-\[90%\] { max-width: 90%; }
@media (min-width: 48rem) {
    .md\:w-full { width: 100%; }
    .md\:w-auto { width: auto; }
    .md\:w-fit { width: fit-content; }
    .md\:w-1\/2 { width: 50%; }
    .md\:w-1\/3 { width: 33.333333%; }
    .md\:w-2\/3 { width: 66.666667%; }
    .md\:w-3\/4 { width: 75%; }
    .md\:max-w-2xl { max-width: 42rem; }
    .md\:max-w-4xl { max-width: 56rem; }
    .md\:w-\[350px\] { width: 350px; }
    .md\:min-w-\[170px\] { min-width: 170px; }
}
@media (min-width: 64rem) {
    .lg\:max-w-6xl { max-width: 72rem; }
    .lg\:w-2\/3 { width: 66.666667%; }
}

/* Positioning / Z-index / Insets (incl. negativos) */
.top-14 { top: calc(var(--spacing) * 14); }
.top-16 { top: calc(var(--spacing) * 16); }
.top-20 { top: calc(var(--spacing) * 20); }
.left-3\.5 { left: calc(var(--spacing) * 3.5); }
.z-0 { z-index: 0; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.-bottom-2 { bottom: calc(var(--spacing) * -2); }
.-bottom-10 { bottom: calc(var(--spacing) * -10); }
.-bottom-20 { bottom: calc(var(--spacing) * -20); }
.-top-0\.5 { top: calc(var(--spacing) * -0.5); }
.-top-16 { top: calc(var(--spacing) * -16); }
@media (min-width: 48rem) {
    .md\:relative { position: relative; }
    .md\:fixed { position: fixed; }
    .md\:sticky { position: sticky; }
    .md\:top-0 { top: 0; }
    .md\:left-0 { left: 0; }
    .md\:right-0 { right: 0; }
    .md\:bottom-0 { bottom: 0; }
    .md\:top-16 { top: calc(var(--spacing) * 16); }
    .md\:z-10 { z-index: 10; }
    .md\:z-20 { z-index: 20; }
    .md\:z-50 { z-index: 50; }
}

/* Transforms / Transitions */
.duration-200 { transition-duration: 200ms; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.translate-x-0 {
    --tw-translate-x: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
    --tw-translate-y: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full {
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-full {
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * -2);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-skew-x-\[18deg\] {
    --tw-skew-x: -18deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.opacity-20 { opacity: 0.2; }
.opacity-55 { opacity: 0.55; }
.opacity-100 { opacity: 1; }
@media (min-width: 48rem) {
    .md\:translate-x-0 {
        --tw-translate-x: 0;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .md\:-translate-x-full {
        --tw-translate-x: -100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .md\:translate-y-0 {
        --tw-translate-y: 0;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .md\:visible { visibility: visible; }
    .md\:invisible { visibility: hidden; }
    .md\:opacity-100 { opacity: 1; }
    .md\:opacity-0 { opacity: 0; }
}

/* Overflow / Scroll */
@media (min-width: 48rem) {
    .md\:overflow-auto { overflow: auto; }
    .md\:overflow-y-auto { overflow-y: auto; }
}

/* Typography */
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
@media (min-width: 48rem) {
    .md\:text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
}
@media (min-width: 64rem) {
    .lg\:text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
    }
}

/* Borders / Shadows */
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_8px_rgba\(15\,23\,42\,0\.25\)\] {
    box-shadow: 0 4px 8px rgba(15,23,42,0.25);
}
.shadow-\[0_10px_18px_-8px_rgba\(15\,23\,42\,0\.45\)\] {
    box-shadow: 0 10px 18px -8px rgba(15,23,42,0.45);
}
.shadow-\[0_6px_10px_-4px_rgba\(15\,23\,42\,0\.35\)\] {
    box-shadow: 0 6px 10px -4px rgba(15,23,42,0.35);
}
.shadow-\[0_3px_8px_rgba\(15\,23\,42\,0\.25\)\] {
    box-shadow: 0 3px 8px rgba(15,23,42,0.25);
}

/* Border colors */
.border-blue-300 { border-color: var(--color-blue-300); }
.border-green-400 { border-color: var(--color-green-400); }
.border-red-300 { border-color: var(--color-red-300); }
.border-slate-100 { border-color: var(--color-slate-100, var(--color-slate-100-fallback)); }
.border-slate-200 { border-color: var(--color-slate-200, var(--color-slate-200-fallback)); }

/* Border radius */
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-r-\[56px\] { border-top-right-radius: 56px; border-bottom-right-radius: 56px; }
.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-\[999px\] { border-radius: 999px; }
.rounded-\[10px\] { border-radius: 10px; }

/* Background colors */
.bg-muted { background-color: var(--color-muted);}
.bg-blue-500 { background-color: var(--color-blue-500); }
.bg-blue-50 { background-color: var(--color-blue-50); }
.bg-blue-100 { background-color: var(--color-blue-100, var(--color-blue-100-fallback)); }
.bg-sky-700 { background-color: var(--color-sky-700, #0369a1); }
.bg-red-500 { background-color: var(--color-red-500, var(--color-red-500-fallback)); }
.bg-slate-50 { background-color: var(--color-slate-50, var(--color-slate-50-fallback)); }
.bg-slate-100 { background-color: var(--color-slate-100, var(--color-slate-100-fallback)); }
.bg-emerald-50 { background-color: var(--color-emerald-50, var(--color-emerald-50-fallback)); }
.bg-amber-50 { background-color: var(--color-amber-50, var(--color-amber-50-fallback)); }

/* Text colors */
.text-blue-600 { color: var(--color-blue-600); }
.text-red-600 { color: var(--color-red-600); }
.text-slate-400 { color: var(--color-slate-400, var(--color-slate-400-fallback)); }
.text-slate-500 { color: var(--color-slate-500, var(--color-slate-500-fallback)); }
.text-slate-600 { color: var(--color-slate-600, var(--color-slate-600-fallback)); }
.text-slate-700 { color: var(--color-slate-700, var(--color-slate-700-fallback)); }
.text-slate-800 { color: var(--color-slate-800, var(--color-slate-800-fallback)); }
.text-emerald-500 { color: var(--color-emerald-500, var(--color-emerald-500-fallback)); }
.text-amber-500 { color: var(--color-amber-500, var(--color-amber-500-fallback)); }

.font-light { font-weight: 300; }

.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }

/* Arbitrary text sizes */
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[15px\] { font-size: 15px; }
.text-\[20px\] { font-size: 20px; }
.text-\[24px\] { font-size: 24px; }

/* Arbitrary widths */
.w-\[110px\] { width: 110px; }
.w-\[120px\] { width: 120px; }
.w-\[130px\] { width: 130px; }
.w-\[150px\] { width: 150px; }
.w-\[18px\] { width: 18px; }
.w-\[35px\] { width: 35px; }
.max-w-\[720px\] { max-width: 720px; }
.max-w-\[760px\] { max-width: 760px; }
.min-w-\[180px\] { min-width: 180px; }

/* Arbitrary heights */
.h-\[18px\] { height: 18px; }
.h-\[38px\] { height: 38px; }

/* Responsive: lg breakpoint (1024px) */
@media (min-width: 64rem) {
    .lg\:items-start { align-items: flex-start; }
    .lg\:items-center { align-items: center; }
    .lg\:w-auto { width: auto; }
    .lg\:w-\[360px\] { width: 360px; }
    .lg\:gap-3 { gap: calc(var(--spacing) * 3); }
    .lg\:py-10 { padding-block: calc(var(--spacing) * 10); }
}

/* Form states */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-1:focus {
    --tw-ring-shadow: 0 0 0 1px var(--tw-ring-color, rgb(59 130 246 / 0.5));
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
    --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color, rgb(59 130 246 / 0.5));
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
}
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* Hover states */
@media (hover: hover) {
    .hover\:bg-primary\/90:hover {
        background-color: color-mix(in srgb, var(--primary) 90%, transparent);
    }
    .hover\:bg-red-600:hover {
        background-color: #DC2626;
    }
    .hover\:underline:hover {
        text-decoration-line: underline;
    }
    .hover\:-translate-y-0\.5:hover {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .hover\:bg-sky-700:hover {
        background-color: rgb(3 105 161 / 1);
    }

    .hover\:text-sky-700:hover {
        color: rgb(3 105 161 / 1);
    }

    .hover\:text-white:hover {
        color: rgb(255 255 255 / 1);
    }

    .hover\:text-sky-800:hover {
        color: rgb(7 89 133 / 1);
    }

    .hover\:shadow-sm:hover {
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .group:hover .group-hover\:visible {
        visibility: visible;
    }
}

.bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9);
}

.bg-sky-600 {
    background-color: rgb(2 132 199 / 1);
}

.bg-slate-950\/40 {
    background-color: rgb(2 6 23 / 0.4);
}

.text-slate-900 {
    color: rgb(15 23 42 / 1);
}

.text-white\/60 {
    color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
    color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}

.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}

.font-extrabold {
    font-weight: 800;
}

.w-\[86\%\] {
    width: 86%;
}

.max-w-\[360px\] {
    max-width: 360px;
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.h-\[360px\] {
    height: 360px;
}

.duration-500 {
    transition-duration: 500ms;
}

.duration-700 {
    transition-duration: 700ms;
}

.duration-\[5000ms\] {
    transition-duration: 5000ms;
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.will-change-transform {
    will-change: transform;
}

.from-slate-950\/55 {
    --tw-gradient-from: rgb(2 6 23 / 0.55) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-slate-950\/25 {
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.bg-white\/70 {
    background-color: rgb(255 255 255 / 0.7);
}

.bg-slate-950\/25 {
    background-color: rgb(2 6 23 / 0.25);
}

.text-white\/75 {
    color: rgb(255 255 255 / 0.75);
}

.text-white\/90 {
    color: rgb(255 255 255 / 0.9);
}

.text-sky-700 {
    color: rgb(3 105 161 / 1);
}

.leading-snug {
    line-height: 1.375;
}

.right-3 {
    right: calc(var(--spacing) * 3);
}

.dot {
    width: calc(var(--spacing) * 2.5);
    cursor: pointer;
}

.team-slide {
    flex: 0 0 auto;
}

@media (min-width: 40rem) {
    .sm\:inline-flex { display: inline-flex; }
    .sm\:items-end { align-items: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:p-8 { padding: calc(var(--spacing) * 8); }
    .sm\:h-\[460px\] { height: 460px; }
    .sm\:text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .sm\:text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    .sm\:text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
}

@media (min-width: 64rem) {
    .lg\:h-\[560px\] { height: 560px; }
    .lg\:px-14 { padding-inline: calc(var(--spacing) * 14); }
    .lg\:text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
}

/* Utilities used by CentroMedico/Nosotros */
.bottom-10 { bottom: calc(var(--spacing) * 10); }
.mt-\[-70px\] { margin-top: -70px; }
.h-\[220px\] { height: 220px; }
.h-\[260px\] { height: 260px; }
.gap-y-8 { row-gap: calc(var(--spacing) * 8); }

.bg-\[\#0b2f63\] { background-color: #0b2f63; }
.bg-\[\#1f6fa5\]\/45 { background-color: rgb(31 111 165 / 0.45); }
.border-white\/30 { border-color: rgb(255 255 255 / 0.3); }

.text-\[\#03245b\] { color: #03245b; }
.text-\[\#2a66b0\] { color: #2a66b0; }

.leading-\[15px\] { line-height: 15px; }
.leading-\[24px\] { line-height: 24px; }
.leading-\[30px\] { line-height: 30px; }

@media (min-width: 40rem) {
    .sm\:absolute { position: absolute; }
    .sm\:left-0 { left: 0; }
    .sm\:top-1\/2 { top: 50%; }
    .sm\:bottom-12 { bottom: calc(var(--spacing) * 12); }
    .sm\:mt-0 { margin-top: 0; }
    .sm\:h-\[260px\] { height: 260px; }
    .sm\:h-\[360px\] { height: 360px; }
    .sm\:text-\[34px\] { font-size: 34px; }
    .sm\:-translate-y-1\/2 {
        --tw-translate-y: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
}

@media (min-width: 64rem) {
    .lg\:h-\[320px\] { height: 320px; }
    .lg\:pb-14 { padding-bottom: calc(var(--spacing) * 14); }
    .lg\:py-14 { padding-block: calc(var(--spacing) * 14); }
    .lg\:py-16 { padding-block: calc(var(--spacing) * 16); }
}

@media (min-width: 80rem) {
    .xl\:gap-x-7 { column-gap: calc(var(--spacing) * 7); }
}

/* === Fin Utilities === */

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/*** Inicio Color ***/

.inset-0 {
    inset: 0px;
}

.inset-x-0 {
    left: 0px;
    right: 0px;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.opacity-0 {
    opacity: 0;
}

@media (hover: hover) {
    .group:hover .group-hover\:opacity-100 {
        opacity: 1;
    }

    .hover\:opacity-100:hover {
        opacity: 1;
    }
}

.text-black {
    color: var(--color-black);
}

.text-danger {
    color: var(--color-red-600);
}

.text-purple {
    color: #360ccc !important;
}

.text-coffee {
    color: #4c2f27 !important;
}


.ml-1 {
    margin-left: calc(var(--spacing) * 1);
}

.ml-2 {
    margin-left: calc(var(--spacing) * 2);
}

.ml-3 {
    margin-left: calc(var(--spacing) * 3);
}

.ml-4 {
    margin-left: calc(var(--spacing) * 4);
}

.ml-5 {
    margin-left: calc(var(--spacing) * 5);
}

.ml-6 {
    margin-left: calc(var(--spacing) * 6);
}

.ml-12 {
    margin-left: calc(var(--spacing) * 12);
}

.ml-14 {
    margin-left: calc(var(--spacing) * 14);
}

.ml-16 {
    margin-left: calc(var(--spacing) * 16);
}

.ml-18 {
    margin-left: calc(var(--spacing) * 18);
}

.ml-20 {
    margin-left: calc(var(--spacing) * 20);
}
.mt-8 {
    margin-top: calc(var(--spacing) * 8);
}

.mt-12 {
    margin-top: calc(var(--spacing) * 12);
}

.mt-14 {
    margin-top: calc(var(--spacing) * 14);
}

.mt-16 {
    margin-top: calc(var(--spacing) * 16);
}

.mt-18 {
    margin-top: calc(var(--spacing) * 18);
}

.mt-20 {
    margin-top: calc(var(--spacing) * 20);
}

.-top-4 {
    top: calc(var(--spacing) * -4);
}

.-top-6 {
    top: calc(var(--spacing) * -6);
}

.-top-8 {
    top: calc(var(--spacing) * -8);
}

.-top-10 {
    top: calc(var(--spacing) * -10);
}

.-top-12 {
    top: calc(var(--spacing) * -12);
}

.-top-14 {
    top: calc(var(--spacing) * -14);
}

.-top-16 {
    top: calc(var(--spacing) * -16);
}

.-bottom-4 {
    bottom: calc(var(--spacing) * -4);
}

.-bottom-6 {
    bottom: calc(var(--spacing) * -6);
}

.-bottom-8 {
    bottom: calc(var(--spacing) * -8);
}

.-bottom-10 {
    bottom: calc(var(--spacing) * -10);
}

.-bottom-12 {
    bottom: calc(var(--spacing) * -12);
}

.-bottom-14 {
    bottom: calc(var(--spacing) * -14);
}

.-bottom-16 {
    bottom: calc(var(--spacing) * -16);
}

.-bottom-18 {
    bottom: calc(var(--spacing) * -18);
}

.-bottom-20 {
    bottom: calc(var(--spacing) * -20);
}


.left-1\/2 {
    left: 50%;
}


.border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
}

.border-6 {
    border-style: var(--tw-border-style);
    border-width: 6px;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.translate-y-4 {
    --tw-translate-y: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.top-14 {
    top: calc(var(--spacing) * 14);
}

.top-16 {
    top: calc(var(--spacing) * 16);
}

.top-20 {
    top: calc(var(--spacing) * 20);
}

.z-0 {
    z-index: 0;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.duration-200 {
    transition-duration: 200ms;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.translate-x-0 {
    --tw-translate-x: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
    --tw-translate-y: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-full {
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-bottom-2 {
    bottom: calc(var(--spacing) * -2);
}

.-bottom-10 {
    bottom: calc(var(--spacing) * -10);
}

.-bottom-20 {
    bottom: calc(var(--spacing) * -20);
}

.-top-0\.5 {
    top: calc(var(--spacing) * -0.5);
}

.-top-16 {
    top: calc(var(--spacing) * -16);
}

.-translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * -2);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-space-x-2 > :not(:last-child) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
}

.-skew-x-\[18deg\] {
    --tw-skew-x: -18deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-full {
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.opacity-100 {
    opacity: 1;
}

.h-screen {
    height: 100vh;
}

.max-h-screen {
    max-height: 100vh;
}

.min-h-0 {
    min-height: 0;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: fit-content;
}

.w-max {
    width: max-content;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-1\/4 {
    width: 25%;
}

.w-3\/4 {
    width: 75%;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-3 {
    grid-column-start: 3;
}

.gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
}

.gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
}

.gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
}

.gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
}

/*** Fin Color ***/

/*** Inicio Button ***/

.add-button-cicle {
    color: #FFA500;
    width: 40px;
    height: 40px;
    border: 2px solid #FFA500;
    background: transparent;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
}

.button-reserved {
    color: #FFA500;
    width: 40px;
    height: 40px;
    border: 2px solid #FFA500;
    background: transparent;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
}

/*** Fin Button ***/

/****** Inicio Load Bar *****/
div.loadbartext {
    width: 1.5rem;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
}

    div.loadbartext span {
        width: 0.2rem;
        height: 100%;
        /*background-color: #fff;*/
        animation: loading 2s infinite ease-in-out;
    }

        div.loadbartext span:nth-child(1) {
            animation-delay: 0.5s;
        }

        div.loadbartext span:nth-child(2) {
            animation-delay: 0.9s;
        }

        div.loadbartext span:nth-child(3) {
            animation-delay: 1.7s;
        }

@keyframes loading {
    0%, 100% {
        transform: scaleY(100%);
    }

    50% {
        transform: scaleY(60%);
        background-color: #30c57a;
    }
}
/****** Fin Load Bar *****/

/****** Inicio Formulario *****/

@keyframes handTop {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
    }

    100% {
        opacity: 1;
        transform: translateY(-50px) translateX(-20px);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(6px); opacity: 0;
    }

    100% {
        transform: translateY(0); opacity: 1;
    }
}

.animate-handTop {
    animation: handTop 2s ease-out infinite;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-slideIn {
    animation: slideIn .6s ease-out both;
}

.text-title {
    color: var(--color-title, var(--color-title-fallback));
}

.text-subtitle {
    color: var(--color-subtitle, var(--color-subtitle-fallback));
}

.text-gray-800 {
    color: var(--color-gray-800);
}

.title-stroke {
    text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 3px 8px rgba(0,0,0,.75);
}
.max-w-\[800px\] {
    max-width: 800px;
}

.max-w-\[850px\] {
    max-width: 850px;
}

.max-w-\[900px\] {
    max-width: 900px;
}

.max-w-\[1000px\] {
    max-width: 1000px;
}

.max-w-\[1800px\] {
    max-width: 1800px;
}

.bg-neutral-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}

.scroll-smooth {
    scroll-behavior: smooth;
}

.mr-4 {
    margin-right: calc(var(--spacing) * 4);
}

/* Accesibilidad: quitar enfoque por ratón, mantener por teclado */
.focus-ring:focus-visible {
    outline: 3px solid #fb923c;
    outline-offset: 2px;
}

.border-bs-primary {
    border: 2px solid #e3ebf6;
    border-top: 5px solid #5ea4f3;
}

.border-2-b-blue-500 {
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-bottom-color: var(--color-blue-500);
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}

.translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * 1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.bg-slate-950\/50 {
    background-color: rgb(2 6 23 / 0.5);
}

.bg-slate-950 {
    background-color: rgb(2 6 23 / 1);
}

.shadow-\[0_18px_35px_-20px_rgba\(15\,23\,42\,0\.7\)\] {
    box-shadow: 0 18px 35px -20px rgba(15,23,42,0.7);
}

@media (hover: hover) {
    .group:hover .group-hover\:translate-y-0 {
        --tw-translate-y: 0;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
}

@media (min-width: 40rem) {
    .sm\:text-left {
        text-align: left;
    }

    .sm\:w-\[calc\(50\%-10px\)\] {
        width: calc(50% - 10px);
    }
}

@media (min-width: 64rem) {
    .lg\:text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .lg\:w-\[calc\(25\%-15px\)\] {
        width: calc(25% - 15px);
    }
}


.hero-bg {
    background-image: url('/assets/media/images/2600x1200/bg-10.png');
}

.formfluid {
    width: 100%;
    max-width: 95%;
}

.form2xl {
    width: 100%;
    max-width: 1535.99px;
}

.formxl {
    width: 100%;
    max-width: 1279.99px;
}

.formlg {
    width: 100%;
    max-width: 1023.99px;
}

.formmd {
    width: 100%;
    max-width: 767.99px;
}

.formsm {
    width: 100%;
    max-width: 639.99px;
}

.formxs {
    width: 100%;
    max-width: 359.99px;
}

.formbg {
    background-position: center center;
    background-size: cover;
    background-repeat: repeat;
    background-color: rgba(0,0,0,0.04);
}

/* Scoped override: avoid redefining global .kt-card-header (lives in styles.css). */
form.kt-card.formfluid .kt-card-header,
form.kt-card.form2xl .kt-card-header,
form.kt-card.formxl .kt-card-header,
form.kt-card.formlg .kt-card-header,
form.kt-card.formmd .kt-card-header,
form.kt-card.formsm .kt-card-header,
form.kt-card.formxs .kt-card-header {
    min-height: calc(var(--spacing) * 10);
    background-color: var(--muted);
    border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
}

.formtitle {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 0.2rem;
    font-weight: 600;
    padding-top: 0.1rem;
    padding-bottom: 0.7rem;
}


.modal-body-sides {
    border-left: 1px solid #9ba7ca;
    border-right: 1px solid #9ba7ca;
    padding: 4px 8px;
}

.btn-silver {
    color: #495057 !important;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da !important;
}

.kt-btn-success {
    background-color: var(--color-green-500);
    color: var(--color-white);
}

.modal-footer-sides {
    border-left: 1px solid #9ba7ca;
    border-right: 1px solid #9ba7ca;
    border-bottom: 1px solid #9ba7ca;
    padding-top: 8px;
    padding-bottom: 8px;
}

/****** Fin Formulario *****/



/***Quick Grid Inicio***/

.page-size-chooser {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .page-size-chooser select {
        margin: 0 1rem;
        padding: 0.25rem 0.5rem;
    }



/*** Inicio Ancho ***/

.min-w-\[15\%\] {
    min-width: 15%;
}

.min-w-\[25\%\] {
    min-width: 25%;
}

.min-w-\[30\%\] {
    min-width: 30%;
}

.min-w-\[35\%\] {
    min-width: 35%;
}

.min-w-\[40\%\] {
    min-width: 40%;
}

.min-w-\[45\%\] {
    min-width: 45%;
}

.min-w-\[50\%\] {
    min-width: 50%;
}

.min-w-\[55\%\] {
    min-width: 55%;
}

.min-w-\[60\%\] {
    min-width: 60%;
}

.min-w-\[65\%\] {
    min-width: 65%;
}

.min-w-\[70\%\] {
    min-width: 70%;
}

.min-w-\[75\%\] {
    min-width: 75%;
}

.min-w-\[80\%\] {
    min-width: 80%;
}

.min-w-\[85\%\] {
    min-width: 85%;
}

.min-w-\[90\%\] {
    min-width: 90%;
}

.min-w-\[95\%\] {
    min-width: 95%;
}

@media (min-width: 48rem) {
    .md\:min-w-\[65\%\] {
        min-width: 65%;
    }
}

/*** Fin Ancho ***/

/*** Inicio Margin ***/

.me-0\.5 {
    margin-inline-end: calc(var(--spacing) * 0.5);
}

/*** Fin Margin ***/


/*** Inicio btn ***/

.kt-btn-xs {
    height: calc(var(--spacing) * 5.90);
    gap: calc(var(--spacing) * 1.05);
    border-radius: calc(var(--radius) - 2px);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
}

.kt-btn-xs svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
}

.kt-btn-xs i {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
}

.kt-btn-xs.kt-btn-icon {
    width: calc(var(--spacing) * 5.90);
    height: calc(var(--spacing) * 5.90);
    padding: calc(var(--spacing) * 0);
}

/*** Fin btn ***/

.search-box {
    border: solid 1px #0a58ca;
    border-radius: 5px;
    padding: 5px;
    width: 20rem;
}

.icon-delete {
    border: solid 1px #0a58ca;
    border-radius: 5px;
    padding: 2px;
    background-image: url('data:image/svg+xml;utf8,<svg id="katman_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css"> .st0{fill: #3997D3;}.st1 {fill: #2981BA;}.st2 {fill: #FFFFFF;}</style > <g > <g > <circle class="st0" cx="256" cy="256" r="250"/ > </g > <path class="st1" d="M506,258.3c-0.2-0.3-0.4-0.5-0.7-0.8c-39.9-39.8-79.7-79.6-119.5-119.5c-2.3-2.3-4.8-3.3-8.1-3.3   c-18.9,0.1-37.8,0-56.6,0.1c-1.5,0-2.5-0.4-3.6-1.5c-7.2-7.3-14.5-14.5-21.7-21.8c-3.4-3.5-7.4-5.1-12.2-5.1c-9,0.1-18.1,0-27.1,0   c-9,0-17.9,0-26.9,0c-3.7,0-7.1,1-10,3.4c-3.2,2.8-4.9,6.3-4.9,10.5c0,4.6,0,9.3,0,14.3c-1.3,0-2.2,0-3.1,0c-25.1,0-50.2,0-75.4,0   c-0.8,0-1.6,0-2.4,0c-3.4,0.3-6,2.5-6.7,5.6c-0.6,2.7,0.3,5,2.2,7c5.2,5.2,10.3,10.5,15.7,15.6c2,1.9,2.9,3.9,2.9,6.7   c0.6,17.1,1.3,34.2,1.9,51.3c0.4,11,0.8,22.1,1.2,33.1c0.6,15.3,1.2,30.5,1.8,45.8c0.4,9.7,0.7,19.5,1.1,29.3   c0.6,16,1.2,32,1.9,47.9c0.1,2.8,0.2,5.6,0.7,8.4c1,6.1,4.3,10.9,8.6,15.2c21.4,21.3,42.8,42.7,64.2,64.1   c13.4,13.4,26.8,26.8,40.2,40.2c0.3,0.3,0.6,0.6,0.9,0.8C401,498.1,504.8,390.5,506,258.3z"/ > <g > <path class="st2" d="M378.7,134.3h-80.6V120c0-7.7-6.3-14-14-14h-56.1c-7.7,0-14,6.3-14,14v14.2h-80.6c-3.9,0-7.1,3.2-7.1,7.1    c0,3.9,3.2,7.1,7.1,7.1h13.1l8.9,232.3c0.5,14.2,12.1,25.4,26.3,25.4h148.7c14.2,0,25.8-11.1,26.3-25.4l8.9-232.3h13.1    c3.9,0,7.1-3.2,7.1-7.1C385.8,137.4,382.6,134.3,378.7,134.3z M228,120.1H284v14.1H228V120.1z M342.6,380.1    c-0.3,6.6-5.6,11.8-12.2,11.8H181.6c-6.6,0-12-5.2-12.2-11.8l-8.9-231.7h191L342.6,380.1z"/ > <path class="st2" d="M206,205.5c0,0-0.1,0-0.1,0c-3.9,0.1-7,3.3-6.9,7.2l2.2,115.2c0.1,3.9,3.2,6.9,7.1,6.9c0,0,0.1,0,0.1,0    c3.9-0.1,7-3.3,6.9-7.2L213,212.4C212.9,208.5,209.8,205.5,206,205.5z"/ > <path class="st2" d="M256,205.5c-3.9,0-7.1,3.2-7.1,7.1v115.2c0,3.9,3.2,7.1,7.1,7.1c3.9,0,7.1-3.2,7.1-7.1V212.5    C263.1,208.6,259.9,205.5,256,205.5z"/ > <path class="st2" d="M303.7,334.8c0,0,0.1,0,0.1,0c3.8,0,7-3.1,7.1-6.9l2.2-115.2c0.1-3.9-3-7.1-6.9-7.2c-3.9-0.1-7.1,3-7.2,6.9    l-2.2,115.2C296.7,331.5,299.8,334.7,303.7,334.8z"/ > </g > </g > </svg >') !important;
    width: 30px;
}

.icon-edit {
    padding: 2px;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" enable-background="new 0 0 91 91" version="1.1" viewBox="0 0 91 91" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M24.018,49.415L42.149,67.54l38.119-38.122L62.145,11.292L24.018,49.415z M66.444,25.118    c1.259,1.262,1.259,3.306,0,4.566L44.369,51.753c-0.629,0.633-1.455,0.946-2.278,0.946c-0.831,0-1.655-0.313-2.284-0.946    c-1.261-1.262-1.261-3.305,0-4.565l22.072-22.07C63.138,23.857,65.183,23.857,66.444,25.118z" fill="#6EC4A7" /><polygon fill="#65B794" points="15.72,75.578 35.863,70.393 21.111,55.641   " /><path d="M87.621,12.533l-8.593-8.596c-2.548-2.546-6.992-2.543-9.53,0L66.706,6.73l18.129,18.124l2.786-2.788    C90.244,19.436,90.244,15.159,87.621,12.533z" fill="#65B794" /></g><path d="M79.585,89.554H3.461c-1.833,0-3.318-1.486-3.318-3.319V5.512c0-1.833,1.484-3.318,3.318-3.318h51.113   c1.835,0,3.317,1.485,3.317,3.318c0,1.832-1.482,3.318-3.317,3.318H6.779v74.086h72.806c2.592,0,4.701-2.108,4.701-4.701V36.588   c0-1.833,1.484-3.318,3.317-3.318c1.832,0,3.318,1.485,3.318,3.318v41.627C90.922,84.467,85.836,89.554,79.585,89.554z" fill="#647F94" /></g></svg>') !important;
    width: 30px;
    height: 30px;
}

.detail-search {
    outline: none;
    border: none;
    width: 17rem;
}

input:focus .detail-search {
    outline: none;
}

.quickgrid[theme=fancy-table] td, 
.quickgrid[theme=fancy-table] th {
    padding: 1px 2px;
}

.quickgrid[theme=fancy-table] thead th {
    background-color: #f4f7fa;
    color: var(--tw-gray-700) !important;
    font-weight: bold;
    border-bottom-width: 2px;
    border-color: #e3e7eb;
    min-height: 2rem !important;
    border-radius: 0 !important;
    text-wrap: wrap !important;
}

.quickgrid[theme=fancy-table] tbody tr .td-fit, 
.quickgrid[theme=fancy-table] tbody tr .th-fit {
    width: 1%;
    white-space: nowrap;
}

.col-title-text {
    white-space: normal !important;
}

.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}

.pointer-events-none {
    pointer-events: none;
}

.via-black\/40 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-transparent {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-black\/20 {
    --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}

.from-black\/75 {
    --tw-gradient-from: rgb(0 0 0 / 0.75) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

/* Gradiente hacia la derecha */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Gradiente hacia la esquina inferior derecha */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.h-1\/2 {
    height: 50%;
}

.tempC .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.0256 6.6C13.0256 8.58823 11.4185 10.2 9.4359 10.2C7.45334 10.2 5.84615 8.58823 5.84615 6.6C5.84615 4.61177 7.45334 3 9.4359 3C11.4185 3 13.0256 4.61177 13.0256 6.6Z" fill="#030D45"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.6C2 6.17395 2.3444 5.82857 2.76923 5.82857H5.84615C6.27099 5.82857 6.61539 6.17395 6.61539 6.6C6.61539 7.02605 6.27099 7.37143 5.84615 7.37143H2.76923C2.3444 7.37143 2 7.02605 2 6.6Z" fill="#030D45"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3077 6.6C14.3077 6.17395 14.6521 5.82857 15.0769 5.82857L21.2308 5.82857C21.6556 5.82857 22 6.17395 22 6.6C22 7.02605 21.6556 7.37143 21.2308 7.37143L15.0769 7.37143C14.6521 7.37143 14.3077 7.02605 14.3077 6.6Z" fill="#030D45"/> <path d="M10.9744 17.4C10.9744 19.3882 12.5815 21 14.5641 21C16.5467 21 18.1538 19.3882 18.1538 17.4C18.1538 15.4118 16.5467 13.8 14.5641 13.8C12.5815 13.8 10.9744 15.4118 10.9744 17.4Z" fill="#030D45"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M22 17.4C22 16.974 21.6556 16.6286 21.2308 16.6286H18.1538C17.729 16.6286 17.3846 16.974 17.3846 17.4C17.3846 17.826 17.729 18.1714 18.1538 18.1714H21.2308C21.6556 18.1714 22 17.826 22 17.4Z" fill="#030D45"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.69231 17.4C9.69231 16.974 9.34791 16.6286 8.92308 16.6286L2.76923 16.6286C2.3444 16.6286 2 16.974 2 17.4C2 17.826 2.3444 18.1714 2.76923 18.1714L8.92308 18.1714C9.34791 18.1714 9.69231 17.826 9.69231 17.4Z" fill="#030D45"/> </svg>');
}

.detail .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
}

.quickgrid[theme=fancy-table] tbody tr:hover td {
    background: rgb(23, 198, 83, .1); /*verde*/
}

.quickgrid[theme=fancy-table] tbody tr:nth-child(odd) {
   background: rgb(241, 245, 249, 0.3); /*gris*/
}

.quickgrid[theme=fancy-table] tr:nth-child(even) {
    background: transparent;
}

.icon-actions {
    padding: 1px 5px;
}

/***Quick Grid Fin***/


.space-x-2 > :not(:last-child) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
}

/*** Inicio Grid ***/

.justify-around {
    justify-content: space-around;
}

@media (min-width: 48rem) {
    .md\:justify-around {
        justify-content: space-around;
    }
}

@media (min-width: 40rem) {
    .sm\:justify-end { justify-content: flex-end; }
    .sm\:gap-1\.5 { gap: calc(var(--spacing) * 1.5); }
    .sm\:gap-2 { gap: calc(var(--spacing) * 2); }
    .sm\:gap-2\.5 { gap: calc(var(--spacing) * 2.5); }
    .sm\:gap-3 { gap: calc(var(--spacing) * 3); }
    .sm\:gap-3\.5 { gap: calc(var(--spacing) * 3.5); }
    .sm\:gap-4 { gap: calc(var(--spacing) * 4); }
    .sm\:gap-4\.5 { gap: calc(var(--spacing) * 4.5); }
    .sm\:gap-5 { gap: calc(var(--spacing) * 5); }
    .sm\:gap-6 { gap: calc(var(--spacing) * 6); }
    .sm\:gap-7\.5 { gap: calc(var(--spacing) * 7.5); }
    .sm\:gap-9 { gap: calc(var(--spacing) * 9); }
    .sm\:gap-10 { gap: calc(var(--spacing) * 10); }
    .sm\:gap-11 { gap: calc(var(--spacing) * 11); }
    .sm\:gap-12 { gap: calc(var(--spacing) * 12); }
    .sm\:gap-14 { gap: calc(var(--spacing) * 14); }
    .sm\:gap-20 { gap: calc(var(--spacing) * 20); }
    .sm\:overflow-hidden { overflow: hidden; }
    .sm\:overflow-visible { overflow: visible; }
    .sm\:rounded-none { border-radius: 0; }
    .sm\:rounded-xl { border-radius: calc(var(--radius) + 4px); }
    .sm\:rounded-e-xl {
        border-start-end-radius: calc(var(--radius) + 4px);
        border-end-end-radius: calc(var(--radius) + 4px);
    }
    .sm\:rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
    .sm\:rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .sm\:rounded-l-xl {
        border-top-left-radius: calc(var(--radius) + 4px);
        border-bottom-left-radius: calc(var(--radius) + 4px);
    }
    .sm\:rounded-tl-xl { border-top-left-radius: calc(var(--radius) + 4px); }
    .sm\:rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .sm\:border { border-style: var(--tw-border-style); border-width: 1px; }
    .sm\:border-0 { border-style: var(--tw-border-style); border-width: 0px; }
    .sm\:border-s { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; }
    .sm\:border-e { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; }
    .sm\:border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; }
    .sm\:border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; }
    .sm\:border-border { border-color: var(--border); }
    .sm\:border-s-border { border-inline-start-color: var(--border); }
    .sm\:border-e-border { border-inline-end-color: var(--border); }
    .sm\:border-t-border { border-top-color: var(--border); }
    .sm\:border-r-border { border-right-color: var(--border); }
    .sm\:p-0 { padding: calc(var(--spacing) * 0); }
    .sm\:p-7 { padding: calc(var(--spacing) * 7); }
    .sm\:p-7\.5 { padding: calc(var(--spacing) * 7.5); }
    .sm\:p-10 { padding: calc(var(--spacing) * 10); }
    .sm\:p-12 { padding: calc(var(--spacing) * 12); }
    .sm\:p-16 { padding: calc(var(--spacing) * 16); }
    .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); }
    .sm\:px-7 { padding-inline: calc(var(--spacing) * 7); }
    .sm\:px-7\.5 { padding-inline: calc(var(--spacing) * 7.5); }
    .sm\:px-8 { padding-inline: calc(var(--spacing) * 8); }
    .sm\:px-10 { padding-inline: calc(var(--spacing) * 10); }
    .sm\:py-0 { padding-block: calc(var(--spacing) * 0); }
    .sm\:py-3\.5 { padding-block: calc(var(--spacing) * 3.5); }
    .sm\:py-4 { padding-block: calc(var(--spacing) * 4); }
    .sm\:py-5 { padding-block: calc(var(--spacing) * 5); }
    .sm\:py-6 { padding-block: calc(var(--spacing) * 6); }
    .sm\:py-7\.5 { padding-block: calc(var(--spacing) * 7.5); }
    .sm\:py-9 { padding-block: calc(var(--spacing) * 9); }
    .sm\:py-10 { padding-block: calc(var(--spacing) * 10); }
    .sm\:ps-0 { padding-inline-start: calc(var(--spacing) * 0); }
    .sm\:ps-4 { padding-inline-start: calc(var(--spacing) * 4); }
    .sm\:ps-5 { padding-inline-start: calc(var(--spacing) * 5); }
    .sm\:pe-0 { padding-inline-end: calc(var(--spacing) * 0); }
    .sm\:pe-3 { padding-inline-end: calc(var(--spacing) * 3); }
    .sm\:pe-5 { padding-inline-end: calc(var(--spacing) * 5); }
    .sm\:pe-6 { padding-inline-end: calc(var(--spacing) * 6); }
    .sm\:pe-8 { padding-inline-end: calc(var(--spacing) * 8); }
    .sm\:pe-10 { padding-inline-end: calc(var(--spacing) * 10); }
    .sm\:pe-12 { padding-inline-end: calc(var(--spacing) * 12); }
    .sm\:pe-12\.5 { padding-inline-end: calc(var(--spacing) * 12.5); }
    .sm\:pt-0 { padding-top: calc(var(--spacing) * 0); }
    .sm\:pt-4 { padding-top: calc(var(--spacing) * 4); }
    .sm\:pt-5 { padding-top: calc(var(--spacing) * 5); }
    .sm\:pt-6 { padding-top: calc(var(--spacing) * 6); }
    .sm\:pt-7 { padding-top: calc(var(--spacing) * 7); }
    .sm\:pt-7\.5 { padding-top: calc(var(--spacing) * 7.5); }
    .sm\:pt-9 { padding-top: calc(var(--spacing) * 9); }
    .sm\:pt-10 { padding-top: calc(var(--spacing) * 10); }
    .sm\:pr-12\.5 { padding-right: calc(var(--spacing) * 12.5); }
    .sm\:pb-0 { padding-bottom: calc(var(--spacing) * 0); }
    .sm\:pb-2\.5 { padding-bottom: calc(var(--spacing) * 2.5); }
    .sm\:pb-4 { padding-bottom: calc(var(--spacing) * 4); }
    .sm\:pb-5 { padding-bottom: calc(var(--spacing) * 5); }
    .sm\:pb-7 { padding-bottom: calc(var(--spacing) * 7); }
    .sm\:pb-7\.5 { padding-bottom: calc(var(--spacing) * 7.5); }
    .sm\:pb-9 { padding-bottom: calc(var(--spacing) * 9); }
    .sm\:pb-10 { padding-bottom: calc(var(--spacing) * 10); }
    .sm\:text-end { text-align: end; }
    .sm\:text-right { text-align: right; }
    .sm\:text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .sm\:text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
}

@media (min-width: 48rem) {
    .md\:justify-end { justify-content: flex-end; }
    .md\:gap-1\.5 { gap: calc(var(--spacing) * 1.5); }
    .md\:gap-2 { gap: calc(var(--spacing) * 2); }
    .md\:gap-2\.5 { gap: calc(var(--spacing) * 2.5); }
    .md\:gap-3 { gap: calc(var(--spacing) * 3); }
    .md\:gap-3\.5 { gap: calc(var(--spacing) * 3.5); }
    .md\:gap-4 { gap: calc(var(--spacing) * 4); }
    .md\:gap-4\.5 { gap: calc(var(--spacing) * 4.5); }
    .md\:gap-5 { gap: calc(var(--spacing) * 5); }
    .md\:gap-6 { gap: calc(var(--spacing) * 6); }
    .md\:gap-7\.5 { gap: calc(var(--spacing) * 7.5); }
    .md\:gap-9 { gap: calc(var(--spacing) * 9); }
    .md\:gap-10 { gap: calc(var(--spacing) * 10); }
    .md\:gap-11 { gap: calc(var(--spacing) * 11); }
    .md\:gap-12 { gap: calc(var(--spacing) * 12); }
    .md\:gap-14 { gap: calc(var(--spacing) * 14); }
    .md\:gap-20 { gap: calc(var(--spacing) * 20); }
    .md\:inline-flex { display: inline-flex; }
    .md\:flex-col { flex-direction: column; }
    .md\:flex-wrap { flex-wrap: wrap; }
    .md\:items-start { align-items: flex-start; }
    .md\:items-end { align-items: flex-end; }
    .md\:justify-center { justify-content: center; }
    .md\:px-4 { padding-inline: calc(var(--spacing) * 4); }
    .md\:px-8 { padding-inline: calc(var(--spacing) * 8); }
    .md\:py-8 { padding-block: calc(var(--spacing) * 8); }
    .md\:p-8 { padding: calc(var(--spacing) * 8); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:overflow-hidden { overflow: hidden; }
    .md\:overflow-visible { overflow: visible; }
    .md\:rounded-none { border-radius: 0; }
    .md\:rounded-xl { border-radius: calc(var(--radius) + 4px); }
    .md\:rounded-e-xl {
        border-start-end-radius: calc(var(--radius) + 4px);
        border-end-end-radius: calc(var(--radius) + 4px);
    }
    .md\:rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
    .md\:rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .md\:rounded-l-xl {
        border-top-left-radius: calc(var(--radius) + 4px);
        border-bottom-left-radius: calc(var(--radius) + 4px);
    }
    .md\:rounded-tl-xl { border-top-left-radius: calc(var(--radius) + 4px); }
    .md\:rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .md\:border { border-style: var(--tw-border-style); border-width: 1px; }
    .md\:border-0 { border-style: var(--tw-border-style); border-width: 0px; }
    .md\:border-s { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; }
    .md\:border-e { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; }
    .md\:border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; }
    .md\:border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; }
    .md\:border-border { border-color: var(--border); }
    .md\:border-s-border { border-inline-start-color: var(--border); }
    .md\:border-e-border { border-inline-end-color: var(--border); }
    .md\:border-t-border { border-top-color: var(--border); }
    .md\:border-r-border { border-right-color: var(--border); }
    .md\:p-0 { padding: calc(var(--spacing) * 0); }
    .md\:p-2 { padding: calc(var(--spacing) * 2); }
    .md\:p-7 { padding: calc(var(--spacing) * 7); }
    .md\:p-7\.5 { padding: calc(var(--spacing) * 7.5); }
    .md\:p-10 { padding: calc(var(--spacing) * 10); }
    .md\:p-12 { padding: calc(var(--spacing) * 12); }
    .md\:p-16 { padding: calc(var(--spacing) * 16); }
    .md\:px-6 { padding-inline: calc(var(--spacing) * 6); }
    .md\:px-7 { padding-inline: calc(var(--spacing) * 7); }
    .md\:px-7\.5 { padding-inline: calc(var(--spacing) * 7.5); }
    .md\:px-10 { padding-inline: calc(var(--spacing) * 10); }
    .md\:py-0 { padding-block: calc(var(--spacing) * 0); }
    .md\:py-3\.5 { padding-block: calc(var(--spacing) * 3.5); }
    .md\:py-4 { padding-block: calc(var(--spacing) * 4); }
    .md\:py-5 { padding-block: calc(var(--spacing) * 5); }
    .md\:py-6 { padding-block: calc(var(--spacing) * 6); }
    .md\:py-7\.5 { padding-block: calc(var(--spacing) * 7.5); }
    .md\:py-9 { padding-block: calc(var(--spacing) * 9); }
    .md\:py-10 { padding-block: calc(var(--spacing) * 10); }
    .md\:ps-0 { padding-inline-start: calc(var(--spacing) * 0); }
    .md\:ps-4 { padding-inline-start: calc(var(--spacing) * 4); }
    .md\:ps-5 { padding-inline-start: calc(var(--spacing) * 5); }
    .md\:pe-0 { padding-inline-end: calc(var(--spacing) * 0); }
    .md\:pe-3 { padding-inline-end: calc(var(--spacing) * 3); }
    .md\:pe-5 { padding-inline-end: calc(var(--spacing) * 5); }
    .md\:pe-6 { padding-inline-end: calc(var(--spacing) * 6); }
    .md\:pe-8 { padding-inline-end: calc(var(--spacing) * 8); }
    .md\:pe-10 { padding-inline-end: calc(var(--spacing) * 10); }
    .md\:pe-12 { padding-inline-end: calc(var(--spacing) * 12); }
    .md\:pe-12\.5 { padding-inline-end: calc(var(--spacing) * 12.5); }
    .md\:pt-0 { padding-top: calc(var(--spacing) * 0); }
    .md\:pt-4 { padding-top: calc(var(--spacing) * 4); }
    .md\:pt-5 { padding-top: calc(var(--spacing) * 5); }
    .md\:pt-6 { padding-top: calc(var(--spacing) * 6); }
    .md\:pt-7 { padding-top: calc(var(--spacing) * 7); }
    .md\:pt-7\.5 { padding-top: calc(var(--spacing) * 7.5); }
    .md\:pt-9 { padding-top: calc(var(--spacing) * 9); }
    .md\:pt-10 { padding-top: calc(var(--spacing) * 10); }
    .md\:pr-12\.5 { padding-right: calc(var(--spacing) * 12.5); }
    .md\:pb-0 { padding-bottom: calc(var(--spacing) * 0); }
    .md\:pb-2\.5 { padding-bottom: calc(var(--spacing) * 2.5); }
    .md\:pb-4 { padding-bottom: calc(var(--spacing) * 4); }
    .md\:pb-5 { padding-bottom: calc(var(--spacing) * 5); }
    .md\:pb-7 { padding-bottom: calc(var(--spacing) * 7); }
    .md\:pb-7\.5 { padding-bottom: calc(var(--spacing) * 7.5); }
    .md\:pb-9 { padding-bottom: calc(var(--spacing) * 9); }
    .md\:pb-10 { padding-bottom: calc(var(--spacing) * 10); }
    .md\:text-end { text-align: end; }
    .md\:text-right { text-align: right; }
    .md\:text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .md\:text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .lg\:p-2 {
        padding: calc(var(--spacing) * 2);
    }

    .lg\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:text-3xl {
        font-size: var(--text-3xl);
    }
}

/*** Fin Grid ****/


    .color-title-text {
    color: #00275f;
}

/*** inicio Font ***/

.font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}

/*** fin Font***/

/*** inicio Margin ***/
.m-0\.5 {
    margin: calc(var(--spacing) * 0.5);
}

.m-1\.5 {
    margin: calc(var(--spacing) * 1.5);
}

.m-1 {
    margin: calc(var(--spacing) * 1);
}

.m-2 {
    margin: calc(var(--spacing) * 2);
}

.mb-6 {
    margin-bottom: 1.5rem;
}
/*** fin Margin ***/

/*** Inicio grid-cols ***/


.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-full {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sm\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  
    .sm\:col-span-1 {
      grid-column: span 1 / span 1;
    }
  
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  
    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .sm\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .sm\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .sm\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .sm\:w-5 {
        max-width: 1.25rem; /* 20px */
    }

    .sm\:w-52 {
        max-width: 13rem; /* 208px */
    }

    .sm\:w-56 {
        max-width: 14rem; /* 224px */
    }

    .sm\:w-60 {
        max-width: 15rem;
    }

    .sm\:w-64 {
        max-width: 16rem;
    }

    .sm\:w-72 {
        max-width: 18rem; 
    }

    .sm\:max-w-6 {
        max-width: 1.5rem; /* 24px */
    }

    .sm\:max-w-7 {
        max-width: 1.75rem; /* 28px */
    }

    .sm\:max-w-8 {
        max-width: 2rem; /* 32px */
    }

    .sm\:max-w-9 {
        max-width: 2.25rem; /* 36px */
    }

    .sm\:max-w-10 {
        max-width: 2.5rem; /* 40px */
    }

    .sm\:max-w-11 {
        max-width: 2.75rem; /* 44px */
    }

    .sm\:max-w-12 {
        max-width: 3rem; /* 48px */
    }

    .sm\:max-w-14 {
        max-width: 3.5rem; /* 56px */
    }

    .sm\:max-w-16 {
        max-width: 4rem; /* 64px */
    }

    .sm\:max-w-20 {
        max-width: 5rem; /* 80px */
    }

    .sm\:max-w-24 {
        max-width: 6rem; /* 96px */
    }

    .sm\:max-w-28 {
        max-width: 7rem; /* 112px */
    }

    .sm\:max-w-32 {
        max-width: 8rem; /* 128px */
    }

    .sm\:max-w-36 {
        max-width: 9rem; /* 144px */
    }

    .sm\:max-w-40 {
        max-width: 10rem; /* 160px */
    }

    .sm\:max-w-44 {
        max-width: 11rem; /* 176px */
    }

    .sm\:max-w-48 {
        max-width: 12rem; /* 192px */
    }

    .sm\:max-w-52 {
        max-width: 13rem; /* 208px */
    }

    .sm\:max-w-56 {
        max-width: 14rem; /* 224px */
    }

    .sm\:max-w-60 {
        max-width: 15rem;
    }

    .sm\:max-w-64 {
        max-width: 16rem;
    }

    .sm\:max-w-72 {
        max-width: 18rem;
    }

    .sm\:mr-5 {
        margin-right: 1.25rem;
    }

    .sm\:mr-6 {
        margin-right: 1.5rem;
    }

    .sm\:ml-5 {
        margin-left: 1.25rem;
    }

    .sm\:ml-6 {
        margin-left: 1.5rem;
    }

    .sm\:wl-7 {
        margin-left: 1.75rem; /* 28px */
    }

    .sm\:wl-8 {
        margin-left: 2rem; /* 32px */
    }

    .sm\:wl-9 {
        margin-left: 2.25rem; /* 36px */
    }

    .sm\:w-1\/2 {
        width: 50%;
    }

    .sm\:w-1\/3 {
        width: 33%;
    }

    .sm\:w-1\/4 {
        width: 25%;
    }
}

@media (min-width: 48rem) {
    .md\:w-50 {
        width: calc(var(--spacing) * 50);
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  
    .md\:col-span-1 {
      grid-column: span 1 / span 1;
    }
  
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  
    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .md\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .md\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .md\:max-w-6 {
        max-width: 1.5rem; /* 24px */
    }

    .md\:max-w-7 {
        max-width: 1.75rem; /* 28px */
    }

    .md\:max-w-8 {
        max-width: 2rem; /* 32px */
    }

    .md\:max-w-9 {
        max-width: 2.25rem; /* 36px */
    }

    .md\:max-w-10 {
        max-width: 2.5rem; /* 40px */
    }

    .md\:max-w-11 {
        max-width: 2.75rem; /* 44px */
    }

    .md\:max-w-12 {
        max-width: 3rem; /* 48px */
    }

    .md\:max-w-14 {
        max-width: 3.5rem; /* 56px */
    }

    .md\:max-w-16 {
        max-width: 4rem; /* 64px */
    }

    .md\:max-w-20 {
        max-width: 5rem; /* 80px */
    }

    .md\:max-w-24 {
        max-width: 6rem; /* 96px */
    }

    .md\:max-w-28 {
        max-width: 7rem; /* 112px */
    }

    .md\:max-w-32 {
        max-width: 8rem; /* 128px */
    }

    .md\:max-w-36 {
        max-width: 9rem; /* 144px */
    }

    .md\:max-w-40 {
        max-width: 10rem; /* 160px */
    }

    .md\:max-w-44 {
        max-width: 11rem; /* 176px */
    }

    .md\:max-w-48 {
        max-width: 12rem; /* 192px */
    }

    .md\:max-w-52 {
        max-width: 13rem; /* 208px */
    }

    .md\:max-w-56 {
        max-width: 14rem; /* 224px */
    }

    .md\:max-w-60 {
        max-width: 15rem; /* 236px */
    }

    .md\:mr-5 {
        margin-right: 1.25rem;
    }

    .md\:mr-6 {
        margin-right: 1.5rem;
    }

    .md\:ml-5 {
        margin-left: 1.25rem;
    }

    .md\:ml-6 {
        margin-left: 1.5rem;
    }

    .md\:wl-7 {
        margin-left: 1.75rem; /* 28px */
    }

    .md\:wl-8 {
        margin-left: 2rem; /* 32px */
    }

    .md\:wl-9 {
        margin-left: 2.25rem; /* 36px */
    }

    .md\:w-1\/2 {
        width: 50%;
    }

    .md\:w-1\/3 {
        width: 50%;
    }

    .md\:w-1\/4 {
        width: 25%;
    }

    .md\:w-450 {
        width: 450px;
    }

    /***Inica Text***/
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .md\:text-22px {
        font-size: 22px; /* tamaño de letra */
        line-height: 28px; /* altura de línea */
    }

    /***fin Text***/
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .lg\:max-w-6 {
        max-width: 1.5rem; /* 24px */
    }

    .lg\:max-w-7 {
        max-width: 1.75rem; /* 28px */
    }

    .lg\:max-w-8 {
        max-width: 2rem; /* 32px */
    }

    .lg\:max-w-9 {
        max-width: 2.25rem; /* 36px */
    }

    .lg\:max-w-10 {
        max-width: 2.5rem; /* 40px */
    }

    .lg\:max-w-11 {
        max-width: 2.75rem; /* 44px */
    }

    .lg\:max-w-12 {
        max-width: 3rem; /* 48px */
    }

    .lg\:max-w-14 {
        max-width: 3.5rem; /* 56px */
    }

    .lg\:max-w-16 {
        max-width: 4rem; /* 64px */
    }

    .lg\:max-w-20 {
        max-width: 5rem; /* 80px */
    }

    .lg\:max-w-24 {
        max-width: 6rem; /* 96px */
    }

    .lg\:max-w-28 {
        max-width: 7rem; /* 112px */
    }

    .lg\:max-w-32 {
        max-width: 8rem; /* 128px */
    }

    .lg\:max-w-36 {
        max-width: 9rem; /* 144px */
    }

    .lg\:max-w-40 {
        max-width: 10rem; /* 160px */
    }

    .lg\:max-w-44 {
        max-width: 11rem; /* 176px */
    }

    .lg\:max-w-48 {
        max-width: 12rem; /* 192px */
    }

    .lg\:max-w-52 {
        max-width: 13rem; /* 208px */
    }

    .lg\:max-w-56 {
        max-width: 14rem; /* 224px */
    }

    .lg\:mr-5 {
        margin-right: 1.25rem;
    }

    .lg\:mr-6 {
        margin-right: 1.5rem;
    }

    .lg\:ml-5 {
        margin-left: 1.25rem;
    }

    .lg\:ml-6 {
        margin-left: 1.5rem;
    }

    .lg\:wl-7 {
        margin-left: 1.75rem; /* 28px */
    }

    .lg\:wl-8 {
        margin-left: 2rem; /* 32px */
    }

    .lg\:wl-9 {
        margin-left: 2.25rem; /* 36px */
    }

    .lg\:w-1\/2 {
        width: 50%;
    }

    .lg\:w-1\/3 {
        width: 50%;
    }

    .lg\:w-1\/4 {
        width: 25%;
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .xl\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .xl\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .xl\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .xl\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .xl\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .xl\:max-w-6 {
        max-width: 1.5rem; /* 24px */
    }

    .xl\:max-w-7 {
        max-width: 1.75rem; /* 28px */
    }

    .xl\:max-w-8 {
        max-width: 2rem; /* 32px */
    }

    .xl\:max-w-9 {
        max-width: 2.25rem; /* 36px */
    }

    .xl\:max-w-10 {
        max-width: 2.5rem; /* 40px */
    }

    .xl\:max-w-11 {
        max-width: 2.75rem; /* 44px */
    }

    .xl\:max-w-12 {
        max-width: 3rem; /* 48px */
    }

    .xl\:max-w-14 {
        max-width: 3.5rem; /* 56px */
    }

    .xl\:max-w-16 {
        max-width: 4rem; /* 64px */
    }

    .xl\:max-w-20 {
        max-width: 5rem; /* 80px */
    }

    .xl\:max-w-24 {
        max-width: 6rem; /* 96px */
    }

    .xl\:max-w-28 {
        max-width: 7rem; /* 112px */
    }

    .xl\:max-w-32 {
        max-width: 8rem; /* 128px */
    }

    .xl\:max-w-36 {
        max-width: 9rem; /* 144px */
    }

    .xl\:max-w-40 {
        max-width: 10rem; /* 160px */
    }

    .xl\:max-w-44 {
        max-width: 11rem; /* 176px */
    }

    .xl\:max-w-48 {
        max-width: 12rem; /* 192px */
    }

    .xl\:max-w-52 {
        max-width: 13rem; /* 208px */
    }

    .xl\:max-w-56 {
        max-width: 14rem; /* 224px */
    }

    .xl\:w-1\/2 {
        width: 50%;
    }

    .xl\:w-1\/3 {
        width: 50%;
    }

    .xl\:w-1\/4 {
        width: 25%;
    }
}

/*** Fin grid-cols ***/

/*** inicio bg color ***/
.bg-available {
    background-color: #FF8C00;
}

.bg-reserved {
    background-color: #2d2d2d;
}

.bg-amber-100 {
    background-color: rgb(254 243 199);
}

.bg-amber-200 {
    background-color: rgb(253 230 138);
}

.bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
}

.bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
}

.bg-white\/15 {
    background-color: color-mix(in srgb, #fff 15%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
}

.bg-white\/20 {
    background-color: color-mix(in srgb, #fff 20%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
}

.bg-white\/30 {
    background-color: color-mix(in srgb, #fff 30%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
}

.bg-white\/50 {
    background-color: color-mix(in srgb, #fff 50%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
}

.bg-white\/75 {
    background-color: color-mix(in srgb, #fff 75%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
}

.bg-white\/80 {
    background-color: color-mix(in srgb, #fff 80%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
}

.bg-white\/85 {
    background-color: color-mix(in srgb, #fff 85%, transparent);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
}

.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px); /* valor típico de Tailwind para sm */
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
@media (hover: hover) {
    .hover\:bg-white\/20:hover {
        background-color: color-mix(in srgb, #fff 20%, transparent);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
    }

    .hover\:bg-white\/30:hover {
        background-color: color-mix(in srgb, #fff 30%, transparent);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
        }
    }

    .hover\:bg-white\/40:hover {
        background-color: color-mix(in srgb, #fff 40%, transparent);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
        }
    }
}

.bg-black\/40 {
    background-color: color-mix(in oklab,var(--color-black)40%,transparent)
}

.bg-black\/50 {
    background-color: color-mix(in oklab,var(--color-black)50%,transparent)
}

.bg-orange-400 {
    background-color: var(--color-orange-400); /* Naranja */
}

.bg-orange-500 {
    background-color: #F97316; /* Naranja */
}

.bg-orange {
    background-color: #ff8700; /* Naranja */
}

.bg-red-50 {
    background-color: var(--color-red-50); /* Rojo */
}

.bg-red-100 {
    background-color: var(--color-red-100); /* Rojo */
}

.bg-red-600 {
    background-color: #DC2626; /* Rojo */
}

.bg-green-100 {
    background-color: #DCFCE7; /* Verde claro, equivalente a Tailwind bg-green-100 */
}
.bg-green-600 {
    background-color: #16A34A; /* Verde */
}

.bg-gray-200 {
    background-color: var(--color-gray-200);
}

.bg-gray-300 {
    background-color: var(--color-gray-300);
}

.bg-gray-400 {
    background-color: var(--color-gray-400);
}

.bg-gray-500 {
    background-color: var(--color-gray-500);
}

.bg-gray-600 {
    background-color: var(--color-gray-600);
}

.bg-gray-700 {
    background-color: var(--color-gray-700);
}

.bg-gray-800 {
    background-color: var(--color-gray-800);
}

.bg-blue-950 {
    background-color: var(--color-blue-950);
}

/*** fin bg color ***/

/*** Inicio switch ***/

/*** Fin switch ***/

/*** Inicio text color ***/

.text-green-50 {
    color: var(--color-green-50);
}

.text-green-100 {
    color: var(--color-green-100);
}

.text-green-200 {
    color: var(--color-green-200);
}
.text-orange-950 {
    color: var(--color-orange-950);
}

/*** Fin text color ***/


/*** Inicio w-[?px]***/

.select-none {
    -webkit-user-select: none;
    user-select: none;
}

.right-1 {
    right: calc(var(--spacing) * 1);
}
.right-2 {
    right: calc(var(--spacing) * 2);
}
.right-4 {
    right: calc(var(--spacing) * 4);
}
.right-6 {
    right: calc(var(--spacing) * 6);
}

.top-1 {
    top: calc(var(--spacing) * 1);
}

.to-gray-100 {
    --tw-gradient-to: #f3f4f6; /* Color base de gray-100 */
}

.to-blue-100 {
    --tw-gradient-to: #dbeafe; /* Color base de blue-100 */
}


.left-1 {
    left: calc(var(--spacing) * 1);
}

.left-2 {
    left: calc(var(--spacing) * 2);
}

.left-14 {
    left: calc(var(--spacing) * 14);
}

.bottom-1 {
    bottom: calc(var(--spacing) * 1);
}

.bottom-8 {
    bottom: calc(var(--spacing) * 8);
}

.w-2 {
    width: calc(var(--spacing) * 2);
}

.w-3 {
    width: calc(var(--spacing) * 3);
}

.w-3\.5 {
    width: calc(var(--spacing) * 3.5);
}

.w-4 {
    width: calc(var(--spacing) * 4);
}

.w-8 {
    width: calc(var(--spacing) * 8);
}

.w-8\.5 {
    width: calc(var(--spacing) * 8.5);
}
.w-130 {
    width: calc(var(--spacing) * 130);
}

.w-26 {
    width: calc(var(--spacing) * 26);
}
.w-30 {
    width: calc(var(--spacing) * 30);
}
.w-\[350px\] {
    width: 350px;
}

.w-\[700px\] {
    width: 700px;
}
/*** fin w-[?px] ***/

/*** Inicio h-[?px]***/

.h-0\.5 {
    height: calc(var(--spacing) * 0.5);
}

.h-3 {
    height: calc(var(--spacing) * 3);
}

.h-5\.5 {
    height: calc(var(--spacing) * 5.5);
}

.h-8 {
    height: calc(var(--spacing) * 8);
}

.h-14 {
    height: calc(var(--spacing) * 14);
}

.h-16 {
    height: calc(var(--spacing) * 16);
}

.h-26 {
    height: calc(var(--spacing) * 26);
}

.h-28 {
    height: calc(var(--spacing) * 28);
}

.h-30 {
    height: calc(var(--spacing) * 30);
}

.h-32 {
    height: calc(var(--spacing) * 32);
}

.h-64 {
    height: calc(var(--spacing) * 64);
}

.h-75 {
    height: calc(var(--spacing) * 75);
}

.h-\[600px\] {
    height: 600px;
}

.h-\[80%\] {
    height: 80%;
}

.h-\[350px\] {
    height: 350px;
}

.h-\[874px\] {
    height: 874px;
}

/*** fin h-[?px] ***/

/*** Inicio max-w ***/
.max-w-px 	{ max-width: 1px; }
.max-w-\.5	{ max-width: 0.125rem; /* 2px */ }
.max-w-1	{ max-width: 0.25rem; /* 4px */ }
.max-w-1\.5	{ max-width: 0.375rem; /* 6px */ }
.max-w-2	{ max-width: 0.5rem; /* 8px */ }
.max-w-2\.5	{ max-width: 0.625rem; /* 10px */ }
.max-w-3	{ max-width: 0.75rem; /* 12px */ }
.max-w-3\.5	{ max-width: 0.875rem; /* 14px */ }
.max-w-4	{ max-width: 1rem; /* 16px */ }
.max-w-5	{ max-width: 1.25rem; /* 20px */ }
.max-w-6	{ max-width: 1.5rem; /* 24px */ }
.max-w-7	{ max-width: 1.75rem; /* 28px */ }
.max-w-8	{ max-width: 2rem; /* 32px */ }
.max-w-9	{ max-width: 2.25rem; /* 36px */ }
.max-w-10	{ max-width: 2.5rem; /* 40px */ }
.max-w-11	{ max-width: 2.75rem; /* 44px */ }
.max-w-12	{ max-width: 3rem; /* 48px */ }
.max-w-14	{ max-width: 3.5rem; /* 56px */ }
.max-w-20	{ max-width: 5rem; /* 80px */ }
.max-w-28	{ max-width: 7rem; /* 112px */ }
.max-w-36	{ max-width: 9rem; /* 144px */ }
.max-w-40	{ max-width: 10rem; /* 160px */ }
.max-w-44	{ max-width: 11rem; /* 176px */ }
.max-w-52	{ max-width: 13rem; /* 208px */ }
.max-w-60	{ max-width: 15rem; /* 240px */ }
.max-w-80	{ max-width: 20rem; /* 320px */ }
.max-w-xs	{ max-width: 20rem; /* 320px */ }
.max-w-sm	{ max-width: 24rem; /* 384px */ }
.max-w-md	{ max-width: 28rem; /* 448px */ }
.max-w-lg	{ max-width: 32rem; /* 512px */ }
.max-w-xl	{ max-width: 36rem; /* 576px */ }
.max-w-3xl	{ max-width: 48rem; /* 768px */ }
.max-w-4xl	{ max-width: 56rem; /* 896px */ }
.max-w-5xl	{ max-width: 64rem; /* 1024px */ }
.max-w-6xl	{ max-width: 72rem; /* 1152px */ }
.max-w-7xl	{ max-width: 80rem; /* 1280px */ }
.max-w-min	{ max-width: min-content; }
.max-w-max	{ max-width: max-content; }
.max-w-fit	{ max-width: fit-content; }
.max-w-prose	{ max-width: 65ch; }
.max-w-screen-sm	{ max-width: 640px; }
.max-w-screen-md	{ max-width: 768px; }
.max-w-screen-lg	{ max-width: 1024px; }
.max-w-screen-xl	{ max-width: 1280px; }
.max-w-screen-2xl	{ max-width: 1536px; }
.max-w-\[100px\] { max-width: 100px; }
.max-w-\[45px\] { max-width: 45px; }
.max-w-\[550px\] { max-width: 550px; }
.max-w-\[60%\] { max-width: 60%; }
.max-w-\[80vw\] { max-width: 80vw; }
.max-w-\[90%\] { max-width: 90%; }
/*** Fin max-w ***/

/*** Inicio File Input ***/

.file-input {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;
    font-size: .8125rem;
    line-height: 1;
    background-color: var(--tw-light-active);
    height: 2.5rem;
    padding: 0 1rem 0 0;
    color: var(--tw-gray-700);
}

.file-input-sm {
    font-weight: 500;
    font-size: .75rem;
    height: 2rem;
    padding-right: .75rem;
}

.file-input-lg {
    font-weight: 500;
    font-size: .875rem;
    height: 3rem;
    padding-right: 1.25rem;
}

/*** Fin File Input ***/

/*** Inicio Text ***/
.text-4xl {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
}

.text-5xl {
    font-size: 3rem; /* 48px */
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem; /* 60px */
    line-height: 1;
}

.text-7xl {
    font-size: 4.5rem; /* 72px */
    line-height: 1;
}
.text-justify {
    text-align: justify; /* Justifica el texto en ambos lados */
}

.leading-relaxed {
    line-height: 1.625; /* Espaciado entre líneas ligeramente ampliado */
}
/*** Fin Text ***/

/*** Inicio Menu ***/
.menu-title {
    width: min-content;
}
/*** Fin Menu ***/

/*** Inicio Width and Height ***/
.min-w-0 {
    min-width: 0;
}

.min-w-\[60px\] {
    min-width: 60px;
}

.min-w-\[80px\] {
    min-width: 80px;
}

.min-w-\[125px\] {
    min-width: 125px;
}

.min-w-\[170px\] {
    min-width: 170px;
}

.min-w-\[125px\] {
    min-width: 125px;
}

.min-w-\[700px\] {
    min-width: 700px;
}

.min-w-\[65%\] {
    min-width: 65%;
}

.min-w-\[75%\] {
    min-width: 75%;
}

.min-w-\[90%\] {
    min-width: 90%;
}

.w-6 {
    width: calc(var(--spacing) * 6);
}

.w-64 {
    width: calc(var(--spacing) * 64);
}

.w-72 {
    width: calc(var(--spacing) * 72);
}

.w-\[1px\] {
    width: 1px;
}

.w-\[72px\] {
    width: 72px;
}

.w-\[700px\] {
    width: 700px;
}

.w-\[900px\] {
    width: 900px;
}

.w-\[42%\] {
    width: 42%;
}

.w-\[90%\] {
    width: 90%;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-1\/4 {
    width: 25%;
}

.w-3\/4 {
    width: 75%;
}

.min-h-1 {
    min-height: 0.25rem;
}

.min-h-24 {
    min-height: calc(var(--spacing) * 24);
}

.min-h-40 {
    min-height: calc(var(--spacing) * 40);
}

.min-h-44 {
    min-height: calc(var(--spacing) * 44);
}

.min-h-48 {
    min-height: calc(var(--spacing) * 48);
}

.max-h-\[500px\] {
    max-height: 500px;
}

.max-h-\[60%\] {
    max-height: 60%;
}

.max-h-\[70vh\] {
    max-height: 70vh;
}

.max-h-\[90vh\] {
    max-height: 90vh;
}

.max-h-\[calc\(100vh-10rem\)\] {
    max-height: calc(100vh - 10rem);
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-8 {
    margin-block: calc(var(--spacing) * 8);
}

.my-9 {
    margin-block: calc(var(--spacing) * 9);
}

.my-10 {
    margin-block: calc(var(--spacing) * 10);
}

/*** Fin Width and Height ***/

/*** Inicio Form ***/
.form-info {
    color: var(--tw-gray-700);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

/*** Fin Form ***/

/*** Inicio Object ***/

.object-contain {
    object-fit: contain;
}

.object-cover {
    object-fit: cover;
}

.object-fill {
    object-fit: fill;
}

.object-none {
    object-fit: none;
}

.object-scale-down {
    object-fit: scale-down;
}

@media (min-width: 40rem) {
    .sm\:object-contain {
        object-fit: contain;
    }
}

@media (min-width: 48rem) {
    .md\:object-contain {
        object-fit: contain;
    }
}

@media (min-width: 40rem) {
    .sm\:object-cover {
        object-fit: cover;
    }
}

@media (min-width: 48rem) {
    .md\:object-cover {
        object-fit: cover;
    }
}

/*** Fin Object ***/

/*** Inicio Banner ***/
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}
.carousel-container .carousel-track {
    display: flex;
    transition-property: transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.carousel-container .carousel-slide {
    flex: none;
    width: 100%;
    height: 16rem; /* h-64 */
    object-fit: cover;
}

@media (min-width: 48rem) {
    .carousel-container .carousel-slide {
        height: 24rem; /* md:h-96 */
    }
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: 9999px;
    padding: 0.5rem;
    background-color: rgb(0 0 0 / 0.4);
    color: var(--color-white);
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.carousel-btn:hover {
    background-color: rgb(0 0 0 / 0.6);
}

.carousel-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}
.carousel-indicator {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.is-active {
    background-color: var(--color-white);
}
.is-inactive {
    background-color: rgb(255 255 255 / 0.4);
}

/*** Fin Banner ***/

/*** Inicio style page ***/
.page-bg {
    background-image: url('/assets/media/images/2600x1200/bg-1.png');
}

.dark .page-bg {
    background-image: url('/assets/media/images/2600x1200/bg-1-dark.png');
}
.dark .bg-gray-700 {
    background-color: #374151;
}

/*** Fin style page ***/

/*** Inicio Font ***/

.font-nunito { font-family: var(--font-family-nunito); }

.font-title {
    font-family: 'Anton';
    src: url('fonts/Anton-Regular.ttf') format('truetype');
    color: #00275f;
}

.font-subtitle {
    font-family: 'Rajdhani';
    src: url('/fonts/Rajdhani-Bold.ttf') format('truetype');
    color: #00275f;
    font-weight: bold;
}

.font-subtitle-orange-400 {
    font-family: 'Rajdhani';
    src: url('/fonts/Rajdhani-Bold.ttf') format('truetype');
    color: var(--color-orange-400);
    font-weight: bold;
}

.border-orange-400 {
    border-color: var(--color-orange-400);
}

.border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
}


.font-paragraph {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype');
}

.font-text {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Anton';
    src: url('fonts/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

/*** Fin Font ***/

/*** Inicio Padding ***/
.pt-8 {
    padding-top: calc(var(--spacing) * 8);
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
/*** Fin Padding ***/

/*** Inicio Colors ***/

/*** Fin Colors ***/
/* Form Labels */
.form-label {
    display: flex;
    width: 100%;
    color: var(--tw-gray-700);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

    /* Required field indicator */
    .form-label.required::after,
    .form-label .required::after {
        content: "*";
        color: #ef4444;
        margin-left: 0.25rem;
        font-weight: 600;
    }

/* Input Controls */
.input {
    display: flex;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

    .input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background-color: #ffffff;
    }

    .input:hover {
        border-color: #9ca3af;
    }

    .input:disabled,
    .input[readonly] {
        background-color: #f9fafb;
        color: #6b7280;
        cursor: not-allowed;
        opacity: 0.7;
    }

    .input::placeholder {
        color: #9ca3af;
        font-style: italic;
    }

/* Input variants */
.input-solid {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

    .input-solid:focus {
        background-color: #ffffff;
        border-color: #3b82f6;
    }

/* Input with icons (input groups) */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    .input-group .input {
        border-radius: 0.5rem 0 0 0.5rem;
        border-right: none;
    }

.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background-color: #f8fafc;
    border: 1px solid #d1d5db;
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;
    color: #6b7280;
    font-size: 0.875rem;
    min-width: 45px;
}

.input-group:focus-within .input-group-text {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #3b82f6;
}

/* Input with left icon */
.input-group-left .input {
    border-radius: 0 0.5rem 0.5rem 0;
    border-left: none;
}

.input-group-left .input-group-text {
    border-radius: 0.5rem 0 0 0.5rem;
    border-right: none;
    border-left: 1px solid #d1d5db;
}

.btn-disabled {
    pointer-events: none; /* Evita clics */
    opacity: 0.5; /* Lo hace ver desactivado */
    background-color: #ccc; /* Color apagado */
    color: #666; /* Texto apagado */
    cursor: not-allowed; /* Cursor de prohibido */
    border: 1px solid #999;
}

/*** Inicio reservation ***/
.reservation-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "image"
        "text"
        "price";
    gap: 1rem;
    align-items: start;
}

.reservation-image {
    grid-area: image;
}

.reservation-text {
    grid-area: text;
}

.reservation-price {
    grid-area: price;
}

.reservation-image img {
    display: block;
    width: 100%;
    height: calc(var(--spacing) * 36);
    object-fit: cover;
}

/* Breakpoint para tablets */
@media (min-width: 48rem) {
    .reservation-card {
        grid-template-columns: 1.2fr 2.5fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "image text"
            "image price";
        gap: 1.25rem;
    }

    .reservation-image img {
        height: calc(var(--spacing) * 60);
    }

    .reservation-price {
        align-self: start;
        justify-self: stretch;
    }
}

/* Breakpoint para desktop - Layout estilo Amazon */
@media (min-width: 64rem) {
    .reservation-card {
        grid-template-columns: 1fr 3fr 1.2fr;
        grid-template-rows: auto;
        grid-template-areas:
            "image text price";
        gap: 2rem;
    }

    .reservation-image {
        grid-area: image;
    }

        .reservation-image img {
            height: calc(var(--spacing) * 40);
        }

    .reservation-text {
        grid-area: text;
    }

    .reservation-price {
        grid-area: price;
        align-self: start;
        justify-self: stretch;
    }
}

/* Estilos para los controles inline (estilo Amazon) */
.reservation-text button {
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

    .reservation-text button:hover {
        background-color: #f3f4f6;
    }

/* Estilos para los botones de cantidad originales  */
.reservation-card .add-button-cicle {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #4b5563;
    font-weight: bold;
    font-size: 1.125rem;
    transition: color 0.2s, background-color 0.2s;
    border: none;
    cursor: pointer;
}

    .reservation-card .add-button-cicle:hover {
        background-color: #e5e7eb;
        color: #1f2937;
    }

/* Hover effects */


/* Responsive text clamping */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Máximo 4 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Focus states para accesibilidad */
.reservation-card button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/*** Fin reservation ***/

/*** Inicio productos ***/
/* Breakpoint para desktop  */
@media (min-width: 48rem) {
    .productheader {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 8px;
    }

    .productimagen {
        grid-row: span 3 / span 3;
    }

    .productcontent {
        grid-column: span 2 / span 2;
        grid-row: span 3 / span 3;
    }
}
/*** Fin productos ***/

/*** Inicio iconos ***/
.icon-container-horizontal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .icon-container-horizontal i {
        font-size: 1.25rem; /* tamaño más pequeño */
        color: #6b7280; /* gris base */
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }

        .icon-container-horizontal i:hover {
            color: #f97316; /* naranja al pasar el cursor */
            transform: scale(1.1);
        }

.icon-label-horizontal {
    font-size: 0.875rem;
    color: #4b5563;
}

/*** Fin iconos ***/

/* Contenedor principal */
.carousel {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Pista deslizante */
.carousel .carousel-track {
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: scroll 25s linear infinite;
}

/* Cada imagen */
.carousel .carousel-slide {
    flex-shrink: 0;
}

/* Imagen principal */
.carousel-img {
    width: 10rem; /* tamaño base */
    height: 8rem;
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

    .carousel-img:hover {
        transform: scale(1.08);
    }

/* Animación desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* === Ajustes Responsivos === */
@media (max-width: 1024px) { /* tablets */
    .carousel-track {
        gap: 16px;
        animation-duration: 30s; /* más lento */
    }

    .carousel-img {
        width: 8rem;
        height: 6.5rem;
    }
}

@media (max-width: 768px) { /* móviles medianos */
    .carousel-track {
        gap: 14px;
        animation-duration: 35s; /* más lento */
    }

    .carousel-img {
        width: 7rem;
        height: 5.5rem;
    }
}

@media (max-width: 480px) { /* móviles pequeños */
    .carousel-track {
        gap: 12px;
        animation-duration: 40s;
    }

    .carousel-img {
        width: 5.5rem;
        height: 4.5rem;
        border-radius: 0.5rem;
    }
}
/*** Fin carrusel ***/


/*** Inicio Foter ***/

.tracking-wide {
    letter-spacing: 0.025em;
}

.text-18px {
    font-size: 18px;
}
.text-20px {
    font-size: 20px;
}

.hover\:opacity-90 {
    opacity: 1; /* opacidad normal */
    transition: opacity 0.3s ease;
}

    .hover\:opacity-90:hover {
        opacity: 0.9; /* opacidad al pasar el cursor */
    }

.fill-white {
    fill: var(--color-white);
    
}

.hover-underline {
    text-decoration: none; /* sin subrayado por defecto */
    text-underline-offset: 4px; /* separa la línea del texto */
    text-decoration-thickness: 3px; /* grosor de la línea */
    transition: text-decoration 0.2s ease;
}

    .hover-underline:hover {
        text-decoration: underline;
    }

.decoration-3px {
    text-decoration-thickness: 3px; /* grosor del subrayado */
}

.underline-offset-4 {
    text-underline-offset: 4px; /* distancia de la línea respecto al texto */
}
/* Cinta superior compuesta (azul + cuña roja + franja naranja) */
.cinta {
    position: relative;
    overflow: hidden;
    background: var(--color-orange-400);
}

.cinta::before { /* franja azul izquierda */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 16%;
    background: var(--color-blue-300);
}

.cinta::after { /* cuña roja inclinada */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15%;
    width: 28px;
    background: var(--color-red-700);
    transform: skewX(-18deg);
    transform-origin: left;
    box-shadow: 2px 0 0 rgba(0,0,0,.08) inset;
}
/* separadores tipo barra roja entre ítems */
.menu-sep {
    display: inline-block;
    width: 1.5px;
    height: 0.8rem;
    background: var(--color-red-700);
    margin: 0 15px;
    transform: translateY(2px);
}
/* botón flotante subir */
.backtop {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 50;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: var(--azul);
    color: var(--color-white);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.18);
    transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
}

.backtop.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

.backtop:hover {
    transform: translateY(-2px) scale(1.03)
}

/* Iconos circulares */
.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 2px solid rgba(255,255,255,.85);
    display: grid;
    place-items: center
}

.social-btn:hover {
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 6px rgba(255,255,255,.08) inset
}

/* Responsivo */
@media (max-width: 1400px) {

    .cinta::before {
        width: 15%
    }

    .cinta::after {
        left: 14%;
        width: 25px
    }

    .menu-sep {
        margin: 0 12px
    }
}

@media (max-width: 1200px) {

    .cinta::before {
        width: 12%
    }

    .cinta::after {
        left: 11%;
        width: 20px
    }

    .menu-sep {
        margin: 0 12px
    }
}

@media (max-width: 1024px) {

    .cinta::before {
        width: 8%
    }

    .cinta::after {
        left: 7%;
        width: 18px
    }

    .menu-sep {
        margin: 0 12px
    }
}

@media (max-width: 992px) {

    .cinta::before {
        width: 4%
    }

    .cinta::after {
        left: 3%;
        width: 15px;
        transform: skewX(-9deg)
    }

    .menu-sep {
        margin: 0 12px
    }
}

@media (max-width: 768px) {
    .cinta::before {
        width: 1px
    }

    .cinta::after {
        width: 0px
    }

    .menu-sep {
        margin: 0 12px
    }
}

/*** Fin Foter ***/

/* Efecto de zoom general al pasar el cursor sobre la tarjeta */
article:hover {
    transform: scale(1.03);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Suaviza la transición cuando no está en hover */
article {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

    /* Zoom más notorio en la imagen interna */
    article img {
        transition: transform 0.8s ease;
    }

    /* Cuando pasas el cursor, la imagen hace zoom */
    article:hover img {
        transform: scale(1.15);
    }

    /* Botón animado con rebote suave */
    article button:hover {
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }

    /* Efecto de “levantamiento” visual al pasar el mouse */
    article:hover .bg-white {
        background-color: #f9fafb;
        transition: background-color 0.4s ease;
    }


.shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

    .shimmer::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
        animation: shimmer-move 1.6s infinite;
    }

@keyframes shimmer-move {
    100% {
        transform: translateX(100%);
    }
}

/* Respeto a usuarios con “reduce motion” */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shimmer::after,
    .shimmer,
    .animate-pulse {
        animation: none;
    }
}

.carddiversion {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem; /* igual al rounded-2xl */
    transition: box-shadow 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

    .carddiversion:hover {
        /*border-color: rgba(0, 174, 255, 0.8);*/ /* azul brillante */
        border-color: rgba(255, 165, 0, 0.8); /* naranja brillante */
        box-shadow: 0 0 20px rgba(255, 165, 0, 0.4), 0 0 40px rgba(255, 165, 0, 0.2);
    }


.shine::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from 180deg, rgba(0,184,255,.35), transparent 20% 80%, rgba(243,183,0,.35));
    filter: blur(16px);
    opacity: .0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.shine:hover::after {
    opacity: .7;
}

.card:hover img {
    transform: scale(1.04);
}

.btn-ripple {
    position: relative;
    overflow: hidden;
}

    .btn-ripple span.ripple {
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        animation: ripple .6s linear;
        background: rgba(255,255,255,.5);
    }

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-whatsapp:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.blend-multiply {
    mix-blend-mode: multiply;
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

@media print {
    body * {
        visibility: visible !important;
    }

    #content, #content * {
        visibility: visible !important;
    }
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


.signature-wrapper {
    display: grid;
    gap: .5rem;
}

.signature-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: system-ui, sans-serif;
}

    .signature-toolbar .btn {
        border: 1px solid #ddd;
        padding: .4rem .7rem;
        border-radius: .5rem;
        cursor: pointer;
        background: #f8f8f8;
    }

        .signature-toolbar .btn:hover {
            background: #f0f0f0;
        }

    .signature-toolbar .note {
        margin-left: .5rem;
        color: #666;
        font-size: .9rem;
    }

.signature-board {
    border: 1px dashed #c8c8c8;
    border-radius: .75rem;
    background: #fff;
}

.signature-canvas {
    width: 100%;
    height: 100px; /*220px;*/
    touch-action: none;
    display: block;
    border-radius: .5rem;
    box-shadow: inset 0 0 0 1px #e9e9e9;
}

@media (min-width: 1024px) {
    .lg\:w-64 {
        width: 16rem;
    }

    .lg\:max-w-6xl {
        max-width: 72rem;
    }

    .lg\:h-80 {
        height: 20rem;
    }
}

@media (min-width: 768px) {
    .md\:w-70 {
        width: calc(var(--spacing) * 70);
    }

    .md\:mt-0 {
        margin-top: 0px;
    }

    .md\:top-4 {
        top: 1rem;
    }
}

.top-\[50\%\] {
    top: 50%;
}

.top-\[65\%\] {
    top: 65%;
}

@media (min-width: 768px) {
    .md\:top-\[15\%\] {
        top: 15%;
    }

    .md\:right-4 {
        right: 1rem;
    }

    .md\:right-10 {
        right: 7rem;
    }

    .md\:relative {
        position: relative;
    }

    .md\:fixed {
        position: fixed;
    }

    .md\:sticky {
        position: sticky;
    }

    .md\:top-0 {
        top: 0;
    }

    .md\:left-0 {
        left: 0;
    }

    .md\:right-0 {
        right: 0;
    }

    .md\:bottom-0 {
        bottom: 0;
    }

    .md\:top-16 {
        top: calc(var(--spacing) * 16);
    }

    .md\:z-10 {
        z-index: 10;
    }

    .md\:z-20 {
        z-index: 20;
    }

    .md\:z-50 {
        z-index: 50;
    }

    .md\:translate-x-0 {
        --tw-translate-x: 0;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .md\:-translate-x-full {
        --tw-translate-x: -100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .md\:translate-y-0 {
        --tw-translate-y: 0;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .md\:visible {
        visibility: visible;
    }

    .md\:invisible {
        visibility: hidden;
    }

    .md\:opacity-100 {
        opacity: 1;
    }

    .md\:opacity-0 {
        opacity: 0;
    }

    .md\:overflow-auto {
        overflow: auto;
    }

    .md\:overflow-y-auto {
        overflow-y: auto;
    }

    .md\:min-h-0 {
        min-height: 0;
    }

    .md\:w-full {
        width: 100%;
    }

    .md\:w-auto {
        width: auto;
    }

    .md\:w-fit {
        width: fit-content;
    }

    .md\:w-1\/2 {
        width: 50%;
    }

    .md\:w-1\/3 {
        width: 33.333333%;
    }

    .md\:w-2\/3 {
        width: 66.666667%;
    }

    .md\:max-w-2xl {
        max-width: 42rem;
    }

    .md\:max-w-4xl {
        max-width: 56rem;
    }

    .md\:w-\[350px\] {
        width: 350px;
    }

    .md\:min-w-\[170px\] {
        min-width: 170px;
    }

    .md\:col-span-8 {
        grid-column: span 8 / span 8;
    }

    .md\:col-span-12 {
        grid-column: span 12 / span 12;
    }

    .md\:col-start-2 {
        grid-column-start: 2;
    }

    .md\:gap-x-6 {
        column-gap: calc(var(--spacing) * 6);
    }

    .md\:gap-y-6 {
        row-gap: calc(var(--spacing) * 6);
    }
}

@media (min-width: 768px) {
    .md\:absolute {
        position: absolute;
    }
}

.duration-150 {
    transition-duration: 150ms;
}

.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 48rem) {
    .md\:w-130 {
        width: calc(var(--spacing) * 130);
    }

    .md\:h-75 {
        height: calc(var(--spacing) * 75);
    }
}

.div-gradient-line {
    height: 1px;
    background: linear-gradient( to right, transparent, rgba(0, 0, 0, 0.40), transparent );
}

/* Spacing: py-7 (padding-top/bottom 1.75rem = 7 * 0.25rem) */
.py-7 {
    padding-top: calc(var(--spacing) * 7);
    padding-bottom: calc(var(--spacing) * 7);
}

/* Max-width arbitrary value */
.max-w-\[760px\] {
    max-width: 760px;
}

/* Border-radius arbitrary values */
.rounded-\[56px\] {
    border-radius: 56px;
}

.rounded-r-\[56px\] {
    border-top-right-radius: 56px;
    border-bottom-right-radius: 56px;
}

/* Shadow arbitrary values (following existing shadow pattern) */
.shadow-\[0_4px_8px_rgba\(15\,23\,42\,0\.25\)\] {
    --tw-shadow: 0 4px 8px rgba(15, 23, 42, 0.25);
    --tw-shadow-colored: 0 4px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_10px_18px_-8px_rgba\(15\,23\,42\,0\.45\)\] {
    --tw-shadow: 0 10px 18px -8px rgba(15, 23, 42, 0.45);
    --tw-shadow-colored: 0 10px 18px -8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_8px_rgba\(15\,23\,42\,0\.25\)\] {
    --tw-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
    --tw-shadow-colored: 0 3px 8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_10px_-4px_rgba\(15\,23\,42\,0\.35\)\] {
    --tw-shadow: 0 6px 10px -4px rgba(15, 23, 42, 0.35);
    --tw-shadow-colored: 0 6px 10px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Hover states (following existing hover pattern with @media hover) */
@media (hover: hover) {
    .hover\:bg-primary\/90:hover {
        background-color: var(--primary);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--primary) 90%, transparent);
        }
    }

    .hover\:bg-red-600:hover {
        background-color: var(--color-red-600);
    }
}

/* Responsive: lg breakpoint (64rem = 1024px) */
@media (min-width: 64rem) {
    .lg\:w-\[360px\] {
        width: 360px;
    }
}

/* ===== Login.razor — Tailwind utilities (Session 10) ===== */

/* Opacity: 75%, 80% */
.opacity-75 {
    opacity: 0.75;
}

.opacity-80 {
    opacity: 0.8;
}

/* Spacing: py-20 (padding-top/bottom 5rem = 20 * 0.25rem) */
.py-20 {
    padding-top: calc(var(--spacing) * 20);
    padding-bottom: calc(var(--spacing) * 20);
}

/* Spacing: mb-1.5 (margin-bottom 0.375rem = 1.5 * 0.25rem) */
.mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
}

/* Spacing: mt-1.5 (margin-top 0.375rem = 1.5 * 0.25rem) */
.mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
}

/* Positioning: top-1/2 (top: 50%) */
.top-1\/2 {
    top: 50%;
}

/* Transform: -translate-y-1/2 (translateY(-50%)) */
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Arbitrary: max-w-[420px] */
.max-w-\[420px\] {
    max-width: 420px;
}

/* Arbitrary: h-[45px] */
.h-\[45px\] {
    height: 45px;
}

/* Spacing: m-0 (margin: 0) */
.m-0 {
    margin: 0;
}

/* Spacing: mt-0.5 (margin-top: 0.125rem = 0.5 * 0.25rem) */
.mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
}

/* Sizing: h-fit (height: fit-content) */
.h-fit {
    height: fit-content;
}

/* Text decoration: underline */
.underline {
    text-decoration-line: underline;
}

/* ===== DashboardMedico.razor — Tailwind utilities (Session 5) ===== */

/* Sizing: w-[42px], h-[42px] — stat card icons */
.w-\[42px\] {
    width: 42px;
}

.h-\[42px\] {
    height: 42px;
}

/* Sizing: w-[140px], h-[140px] — donut chart outer */
.w-\[140px\] {
    width: 140px;
}

.h-\[140px\] {
    height: 140px;
}

/* Sizing: w-[160px], h-[160px] — donut chart container */
.w-\[160px\] {
    width: 160px;
}

.h-\[160px\] {
    height: 160px;
}

/* Sizing: h-[150px] — chart area */
.h-\[150px\] {
    height: 150px;
}

/* Sizing: h-[200px] — bar chart area */
.h-\[200px\] {
    height: 200px;
}

/* Max-width: max-w-[180px] */
.max-w-\[180px\] {
    max-width: 180px;
}

/* Colors: custom brand bg */
.bg-\[\#003366\] {
    background-color: #003366;
}

.bg-\[\#3b9fe1\] {
    background-color: #3b9fe1;
}

/* Colors: bg-amber-500, bg-emerald-500, bg-blue-600 */
.bg-amber-500 {
    background-color: var(--color-amber-500, var(--color-amber-500-fallback, #f59e0b));
}

.bg-emerald-500 {
    background-color: var(--color-emerald-500, var(--color-emerald-500-fallback, #10b981));
}

.bg-blue-600 {
    background-color: var(--color-blue-600, var(--color-blue-600-fallback, #2563eb));
}

/* Colors: text brand */
.text-\[\#003366\] {
    color: #003366;
}

.text-emerald-600 {
    color: var(--color-emerald-600, var(--color-emerald-600-fallback, #059669));
}

/* Border: border-[#e2e8f0] */
.border-\[\#e2e8f0\] {
    border-color: #e2e8f0;
}

/* Sizing: w-2.5, h-2.5 — legend dots */
.w-2\.5 {
    width: calc(var(--spacing) * 2.5);
}

.h-2\.5 {
    height: calc(var(--spacing) * 2.5);
}

/* Text color: text-[#3b9fe1] — brand light blue for links */
.text-\[\#3b9fe1\] {
    color: #3b9fe1;
}

/* Responsive: lg:gap-6 (gap 1.5rem at ≥1024px) */
@media (min-width: 64rem) {
    .lg\:gap-6 {
        gap: calc(var(--spacing) * 6);
    }
}

/* Border-radius: rounded-[10px] — stat card icon containers */
.rounded-\[10px\] {
    border-radius: 10px;
}

/* ==========================================================================
   Tailwind CSS utilities missing from styles.css JIT output
   (PedidosGeneradosList.razor audit — standard Tailwind values)
   ========================================================================== */

/* --- Layout --- */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* --- Spacing --- */
.px-7 {
    padding-inline: calc(var(--spacing) * 7);
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
}

/* --- Typography: arbitrary font sizes --- */
.text-\[14px\] {
    font-size: 14px;
}

.text-\[16px\] {
    font-size: 16px;
}

.text-\[22px\] {
    font-size: 22px;
}

.text-\[28px\] {
    font-size: 28px;
}

/* --- Text colors --- */
.text-gray-400 {
    color: var(--color-gray-400, #9ca3af);
}

.text-gray-500 {
    color: var(--color-gray-500, #6b7280);
}

.text-blue-500 {
    color: var(--color-blue-500, #3b82f6);
}

.text-red-500 {
    color: var(--color-red-500, #ef4444);
}

/* --- Background colors --- */
.bg-blue-400 {
    background-color: var(--color-blue-400, #60a5fa);
}

.bg-amber-400 {
    background-color: var(--color-amber-400, #fbbf24);
}

/* --- Sizing: arbitrary widths/heights --- */
.w-\[44px\] {
    width: 44px;
}

.h-\[44px\] {
    height: 44px;
}

/* =============================================
   MillasList.razor — Missing Tailwind utilities
   ============================================= */

/* --- Text decoration --- */
.no-underline {
    text-decoration-line: none;
}

/* --- Positioning --- */
.left-3 {
    left: calc(var(--spacing) * 3);
}

/* --- Gap utilities --- */
.gap-x-12 {
    column-gap: calc(var(--spacing) * 12);
}

.gap-y-0 {
    row-gap: 0px;
}

/* --- Teal color palette (standard Tailwind) --- */
.text-teal-500 {
    color: var(--color-teal-500, #14b8a6);
}

.text-teal-600 {
    color: var(--color-teal-600, #0d9488);
}

/* --- Arbitrary font-size --- */
.text-\[32px\] {
    font-size: 32px;
}

/* --- Arbitrary text color --- */
.text-\[\#003366\] {
    color: #003366;
}

/* --- Hover variants --- */
.hover\:bg-slate-50:hover {
    background-color: var(--color-slate-50, #f8fafc);
}

.hover\:bg-slate-100:hover {
    background-color: var(--color-slate-100, #f1f5f9);
}

.hover\:text-slate-600:hover {
    color: var(--color-slate-600, #475569);
}

/* =============================================
   UsuariosList.razor — Missing Tailwind utilities
   ============================================= */

/* --- Arbitrary font sizes --- */
.text-\[17px\] {
    font-size: 17px;
}

.text-\[18px\] {
    font-size: 18px;
}

.text-\[19px\] {
    font-size: 19px;
}

.text-\[30px\] {
    font-size: 30px;
}

/* --- Arbitrary line-heights --- */
.leading-\[20px\] {
    line-height: 20px;
}

.leading-\[21px\] {
    line-height: 21px;
}

.leading-\[27px\] {
    line-height: 27px;
}

.leading-\[36px\] {
    line-height: 36px;
}

/* --- Arbitrary text colors --- */
.text-\[\#0b3c73\] {
    color: #0b3c73;
}

.text-\[\#7a8494\] {
    color: #7a8494;
}

/* --- Arbitrary max-width --- */
.max-w-\[520px\] {
    max-width: 520px;
}

/* --- Arbitrary gap --- */
.gap-\[18px\] {
    gap: 18px;
}

/* --- Spacing utilities --- */
.pl-24 {
    padding-left: calc(var(--spacing) * 24);
}

.gap-12 {
    gap: calc(var(--spacing) * 12);
}

/* --- Arbitrary border color --- */
.border-\[\#e5e7eb\] {
    border-color: #e5e7eb;
}

/* ============================================================
   CentroMedico — Missing Tailwind utility classes
   These classes are used in Home.razor, HeaderCM.razor, and
   FooterCM.razor but have no JIT compiler to generate them.
   ============================================================ */

/* --- Arbitrary background colors --- */
.bg-\[\#3368c6\] {
    background-color: #3368c6;
}

.bg-\[\#21426e\] {
    background-color: #21426e;
}

.bg-\[\#ffcc00\] {
    background-color: #ffcc00;
}

.bg-\[\#031b4e\] {
    background-color: #031b4e;
}

.bg-\[\#0a2a6b\] {
    background-color: #0a2a6b;
}

.bg-\[\#003366\] {
    background-color: #003366;
}

/* --- Standard background colors --- */
.bg-sky-50 {
    background-color: rgb(240 249 255 / 1);
}

.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}

/* --- Arbitrary text colors --- */
.text-\[\#3368c6\] {
    color: #3368c6;
}

.text-\[\#e6c723\] {
    color: #e6c723;
}

.text-\[\#031b4e\] {
    color: #031b4e;
}

.text-\[\#f4d63a\] {
    color: #f4d63a;
}

/* --- Standard text colors --- */
.text-sky-600 {
    color: rgb(2 132 199 / 1);
}

/* --- Arbitrary border colors --- */
.border-white\/15 {
    border-color: rgb(255 255 255 / 0.15);
}

/* --- Hover variants --- */
.hover\:text-\[\#f4d63a\]:hover {
    color: #f4d63a;
}

.hover\:bg-\[\#0a2a6b\]:hover {
    background-color: #0a2a6b;
}

.hover\:bg-white:hover {
    background-color: rgb(255 255 255 / 1);
}

.hover\:bg-slate-100:hover {
    background-color: rgb(241 245 249 / 1);
}

/* --- Sizing utilities --- */
.h-44 {
    height: 11rem;
}

.h-56 {
    height: 14rem;
}

/* --- Layout utilities --- */
.place-items-center {
    place-items: center;
}

/* --- Responsive: sm (min-width: 640px) --- */
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:justify-start {
        justify-content: flex-start;
    }
}

/* --- Responsive: lg (min-width: 1024px) --- */
@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }

    .lg\:block {
        display: block;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:p-10 {
        padding: 2.5rem;
    }

    .lg\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

/* ===== Servicios.razor — missing Tailwind utilities ===== */

.isolate {
    isolation: isolate;
}

.min-h-\[180px\] {
    min-height: 180px;
}

.leading-\[1\.05\] {
    line-height: 1.05;
}

.leading-\[1\.1\] {
    line-height: 1.1;
}

.gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
}

.gap-y-9 {
    row-gap: calc(var(--spacing) * 9);
}

.bg-\[\#25D366\] {
    background-color: #25D366;
}

.bg-\[\#3f74d0\] {
    background-color: #3f74d0;
}

.bg-\[\#f7f8fa\] {
    background-color: #f7f8fa;
}

.bg-\[\#f8f8f8\] {
    background-color: #f8f8f8;
}

.bg-sky-700\/40 {
    background-color: rgb(3 105 161 / 0.4);
}

.bg-slate-950\/55 {
    background-color: rgb(2 6 23 / 0.55);
}

.text-\[\#2f64c7\] {
    color: #2f64c7;
}

.text-\[\#4a5f8b\] {
    color: #4a5f8b;
}

.text-\[\#f7d74d\] {
    color: #f7d74d;
}

.text-white\/95 {
    color: rgb(255 255 255 / 0.95);
}

@media (hover: hover) {
    .hover\:bg-\[\#1ebe5d\]:hover {
        background-color: #1ebe5d;
    }

    .hover\:bg-\[\#2957ad\]:hover {
        background-color: #2957ad;
    }

    .hover\:scale-105:hover {
        transform: scale(1.05);
    }
}

@media (min-width: 40rem) {
    .sm\:min-h-\[220px\] {
        min-height: 220px;
    }

    .sm\:py-8 {
        padding-top: calc(var(--spacing) * 8);
        padding-bottom: calc(var(--spacing) * 8);
    }

    .sm\:py-12 {
        padding-top: calc(var(--spacing) * 12);
        padding-bottom: calc(var(--spacing) * 12);
    }

    .sm\:text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
}

@media (min-width: 48rem) {
    .md\:gap-y-11 {
        row-gap: calc(var(--spacing) * 11);
    }
}

@media (min-width: 64rem) {
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }

    .lg\:min-h-\[260px\] {
        min-height: 260px;
    }
}

/* HeaderCM missing Tailwind-like utilities */
.border-b-sky-600 {
    border-bottom-color: #0284c7;
}

.hover\:border-b-sky-600:hover {
    border-bottom-color: #0284c7;
}

.max-w-\[300px\] {
    max-width: 300px;
}

.max-h-\[420px\] {
    max-height: 420px;
}

/* FooterCM missing Tailwind-like utilities */
.bg-sky-400 {
    background-color: #38bdf8;
}

.text-slate-100 {
    color: #f1f5f9;
}

.text-slate-200\/90 {
    color: rgb(226 232 240 / 0.9);
}

.text-slate-300\/85 {
    color: rgb(203 213 225 / 0.85);
}

.text-sky-100 {
    color: #e0f2fe;
}

.text-sky-100\/85 {
    color: rgb(224 242 254 / 0.85);
}

.border-sky-900\/40 {
    border-color: rgb(12 74 110 / 0.4);
}

.border-sky-200\/15 {
    border-color: rgb(186 230 253 / 0.15);
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.focus-visible\:text-white:focus-visible {
    color: #fff;
}

.from-\[\#003366\] {
    --tw-gradient-from: #003366;
    --tw-gradient-to: rgb(0 51 102 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-slate-900 {
    --tw-gradient-to: rgb(15 23 42 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), #0f172a, var(--tw-gradient-to);
}

.to-slate-950 {
    --tw-gradient-to: #020617;
}

.from-\[\#2f62be\] {
    --tw-gradient-from: #2f62be;
    --tw-gradient-to: rgb(47 98 190 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-\[\#3368c6\] {
    --tw-gradient-to: rgb(51 104 198 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), #3368c6, var(--tw-gradient-to);
}

.to-\[\#2957ab\] {
    --tw-gradient-to: #2957ab;
}

.break-words {
    overflow-wrap: break-word;
}

.bg-sky-300 {
    background-color: #7dd3fc;
}

.border-sky-800 {
    border-color: #075985;
}

.hover\:text-sky-100:hover {
    color: #e0f2fe;
}

.focus-visible\:text-sky-100:focus-visible {
    color: #e0f2fe;
}

.border-sky-700 {
    border-color: #0369a1;
}

.max-w-\[540px\] {
    max-width: 540px;
}

.text-sky-100\/95 {
    color: rgb(224 242 254 / 0.95);
}

.text-slate-100\/90 {
    color: rgb(241 245 249 / 0.9);
}

.text-slate-100\/80 {
    color: rgb(241 245 249 / 0.8);
}

.shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.12\)\] {
    --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 40rem) {
    .sm\:gap-8 {
        gap: calc(var(--spacing) * 8);
    }
}

@media (min-width: 48rem) {
    .md\:text-left {
        text-align: left;
    }

    .md\:justify-start {
        justify-content: flex-start;
    }

    .md\:mx-0 {
        margin-left: calc(var(--spacing) * 0);
        margin-right: calc(var(--spacing) * 0);
    }
}

/* Home CentroMedico missing Tailwind-like utilities */
.bg-\[\#214a7f\] {
    background-color: #214a7f;
}

.bg-\[\#6ea3d8\]\/22 {
    background-color: rgb(110 163 216 / 0.22);
}

.bg-\[\#e3e3e3\] {
    background-color: #e3e3e3;
}

.bg-\[\#e7e7e7\] {
    background-color: #e7e7e7;
}

.bg-white\/25 {
    background-color: rgb(255 255 255 / 0.25);
}

.h-\[5px\] {
    height: 5px;
}

.h-\[110px\] {
    height: 110px;
}

.h-\[300px\] {
    height: 300px;
}

.w-\[205px\] {
    width: 205px;
}

.max-w-\[1600px\] {
    max-width: 1600px;
}

.right-\[8\.2\%\] {
    right: 8.2%;
}

.text-\[25px\] {
    font-size: 25px;
}

.text-\[\#f3d42f\] {
    color: #f3d42f;
}

.text-white\/92 {
    color: rgb(255 255 255 / 0.92);
}

.leading-\[1\.35\] {
    line-height: 1.35;
}

.leading-\[1\.7\] {
    line-height: 1.7;
}

.tracking-\[0\.01em\] {
    letter-spacing: 0.01em;
}

.hover\:text-\[\#ffe46a\]:hover {
    color: #ffe46a;
}

.shadow-\[0_24px_50px_-20px_rgba\(0\,0\,0\,0\.6\)\] {
    --tw-shadow: 0 24px 50px -20px rgba(0,0,0,0.6);
    --tw-shadow-colored: 0 24px 50px -20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 40rem) {
    .sm\:h-10 {
        height: calc(var(--spacing) * 10);
    }

    .sm\:mt-5 {
        margin-top: calc(var(--spacing) * 5);
    }

    .sm\:mt-8 {
        margin-top: calc(var(--spacing) * 8);
    }

    .sm\:text-\[15px\] {
        font-size: 15px;
    }

    .sm\:text-\[16px\] {
        font-size: 16px;
    }

    .sm\:text-\[39px\] {
        font-size: 39px;
    }

    .sm\:leading-\[1\.34\] {
        line-height: 1.34;
    }
}

@media (min-width: 64rem) {
    .lg\:absolute {
        position: absolute;
    }

    .lg\:h-\[165px\] {
        height: 165px;
    }

    .lg\:h-\[500px\] {
        height: 500px;
    }

    .lg\:w-\[535px\] {
        width: 535px;
    }

    .lg\:px-9 {
        padding-left: calc(var(--spacing) * 9);
        padding-right: calc(var(--spacing) * 9);
    }

    .lg\:right-\[10\.5\%\] {
        right: 10.5%;
    }

    .lg\:top-\[40\.5\%\] {
        top: -40.5%;
    }

    .lg\:top-\[80\.5\%\] {
        top: -80.5%;
    }

    .lg\:-top-\[405px\] {
        top: -405px;
    }

    .lg\:-top-\[250px\] {
        top: -250px;
    }

    .lg\:-top-1 {
        top: calc(var(--spacing) * -1);
    }

    .lg\:-top-2 {
        top: calc(var(--spacing) * -2);
    }

    .lg\:-top-3 {
        top: calc(var(--spacing) * -3);
    }

    .lg\:-top-4 {
        top: calc(var(--spacing) * -4);
    }

    .lg\:-top-5 {
        top: calc(var(--spacing) * -5);
    }
    .lg\:-top-6 {
        top: calc(var(--spacing) * 6);
    }

    .lg\:-top-7 {
        top: calc(var(--spacing) * -7);
    }

    .lg\:-top-8 {
        top: calc(var(--spacing) * -8);
    }

    .lg\:-top-9 {
        top: calc(var(--spacing) * -9);
    }

.lg\:-top-10 {
    top: calc(var(--spacing) * -10);
}

}

/* BannerComponent missing Tailwind utilities */
.max-w-\[1800px\] { max-width: 1800px; }
.max-w-\[900px\] { max-width: 900px; }
.max-w-\[760px\] { max-width: 760px; }
.h-\[360px\] { height: 360px; }
.h-\[6px\] { height: 6px; }
.h-1\.5 { height: 0.375rem; }
.top-1\/2 { top: 50%; }
.bottom-3 { bottom: calc(var(--spacing) * 3); }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { translate: -50% var(--tw-translate-y, 0); }
.-translate-y-1\/2 { translate: var(--tw-translate-x, 0) -50%; }
.scale-100 { scale: 1; }
.scale-105 { scale: 1.05; }
.scale-110 { scale: 1.1; }
.rounded-none { border-radius: 0; }
.rounded-\[999px\] { border-radius: 999px; }
.text-white\/80 { color: rgb(255 255 255 / 0.8); }
.bg-white\/70 { background-color: rgb(255 255 255 / 0.7); }
.bg-amber\/70 { background-color: rgb(249 115 22 / 0.7); }
.bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
.border-white\/30 { border-color: rgb(255 255 255 / 0.3); }
.border-amber\/30 { border-color: rgb(249 115 22 / 0.3); }
.ease-linear { transition-timing-function: linear; }

.shadow-\[0_18px_35px_-20px_rgba\(15\,23\,42\,0\.7\)\] {
    --tw-shadow: 0 18px 35px -20px rgb(15 23 42 / 0.7);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_10px_-4px_rgba\(15\,23\,42\,0\.35\)\] {
    --tw-shadow: 0 6px 10px -4px rgb(15 23 42 / 0.35);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.from-slate-950\/55 {
    --tw-gradient-from: rgb(2 6 23 / 0.55) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

.via-slate-950\/25 {
    --tw-gradient-via: rgb(2 6 23 / 0.25) var(--tw-gradient-via-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

.focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }

.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-amber-400:focus-visible {
    --tw-ring-color: oklch(82.8% 0.189 84.429);
    --tw-ring-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-white\/80:focus-visible {
    --tw-ring-color: rgb(255 255 255 / 0.8);
    --tw-ring-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color, #fff);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-offset-slate-950\/50:focus-visible {
    --tw-ring-offset-color: rgb(2 6 23 / 0.5);
    --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width, 0px) var(--tw-ring-offset-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
}

.hover\:bg-white\/90:hover { background-color: rgb(255 255 255 / 0.9); }
.hover\:bg-white\/40:hover { background-color: rgb(255 255 255 / 0.4); }
.hover\:scale-110:hover { scale: 1.1; }
.active\:scale-95:active { scale: 0.95; }
.active\:scale-110:active { scale: 1.1; }
.hover\:-translate-y-0\.5:hover { translate: var(--tw-translate-x, 0) -0.125rem; }

@media (min-width: 40rem) {
    .sm\:h-\[460px\] { height: 460px; }
    .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); }
    .sm\:pb-0 { padding-bottom: 0; }
    .sm\:text-left { text-align: left; }
    .sm\:space-y-4 > :not(:last-child) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
    .sm\:text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    .sm\:text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .sm\:justify-start { justify-content: flex-start; }
    .sm\:left-3 { left: calc(var(--spacing) * 3); }
    .sm\:right-3 { right: calc(var(--spacing) * 3); }
    .sm\:p-4 { padding: calc(var(--spacing) * 4); }
    .sm\:items-center { align-items: center; }
}

@media (min-width: 64rem) {
    .lg\:h-\[560px\] { height: 560px; }
    .lg\:px-14 { padding-inline: calc(var(--spacing) * 14); }
    .lg\:text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    .lg\:text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
    }
}

/* ServicesComponent missing Tailwind utilities */
.tracking-widest { letter-spacing: 0.1em; }
.rounded { border-radius: 0.25rem; }
.opacity-90 { opacity: 0.9; }
.drop-shadow-sm {
    --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow);
}

.from-black\/70 {
    --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

.via-black\/35 {
    --tw-gradient-via: rgb(0 0 0 / 0.35) var(--tw-gradient-via-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

.via-black\/30 {
    --tw-gradient-via: rgb(0 0 0 / 0.3) var(--tw-gradient-via-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

.hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus-within\:shadow-xl:focus-within {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:scale-105 { scale: 1.05; }
.active\:scale-\[0\.98\]:active { scale: 0.98; }

@media (min-width: 40rem) {
    .sm\:h-72 { height: calc(var(--spacing) * 72); }
    .sm\:p-5 { padding: calc(var(--spacing) * 5); }
    .sm\:text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }
}

@media (min-width: 48rem) {
    .md\:hover\:scale-\[1\.02\]:hover { scale: 1.02; }
}

/* ContactForm.razor missing Tailwind utilities */
.bg-green-400 {
    background-color: var(--color-green-400, var(--color-green-400-fallback, #4ade80));
}

.resize-y { resize: vertical; }
.justify-items-center { justify-items: center; }
.min-h-32 { min-height: calc(var(--spacing) * 32); }
.min-h-\[75vh\] { min-height: 75vh; }

.focus-visible\:border-primary:focus-visible { border-color: var(--primary); }

.focus-visible\:ring-primary\/30:focus-visible {
    --tw-ring-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.focus-visible\:ring-primary\/40:focus-visible {
    --tw-ring-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.font-\[\'Playfair_Display\'\] { font-family: 'Playfair Display', serif; }

/* DiversionComponent.razor missing standard Tailwind utilities */
.h-36 { height: calc(var(--spacing) * 36); }
.list-inside { list-style-position: inside; }

.hover\:border-orange-400:hover {
    border-color: var(--color-orange-400, var(--color-orange-400-fallback, #fb923c));
}

.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }

.group:hover .group-hover\:text-sky-700 {
    color: var(--color-sky-700, var(--color-sky-700-fallback, #0369a1));
}

.group:hover .group-hover\:scale-\[1\.03\] { transform: scale(1.03); }

.shadow-soft { box-shadow: 0 8px 24px -12px rgb(15 23 42 / 0.35); }

.ki-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-style: normal;
}

.ki-handcart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-style: normal;
}

@media (min-width: 40rem) {
    .sm\:w-auto { width: auto; }
    .sm\:w-40 { width: calc(var(--spacing) * 40); }
    .sm\:min-w-44 { min-width: calc(var(--spacing) * 44); }
    .sm\:px-5 { padding-inline: calc(var(--spacing) * 5); }
    .sm\:py-14 { padding-block: calc(var(--spacing) * 14); }
    .sm\:p-2\.5 { padding: calc(var(--spacing) * 2.5); }
    .sm\:p-6 { padding: calc(var(--spacing) * 6); }
    .sm\:p-9 { padding: calc(var(--spacing) * 9); }
    .sm\:mb-4 { margin-bottom: calc(var(--spacing) * 4); }
    .sm\:mb-6 { margin-bottom: calc(var(--spacing) * 6); }
    .sm\:mb-7 { margin-bottom: calc(var(--spacing) * 7); }
    .sm\:mb-9 { margin-bottom: calc(var(--spacing) * 9); }
    .sm\:mb-10 { margin-bottom: calc(var(--spacing) * 10); }
    .sm\:mt-3 { margin-top: calc(var(--spacing) * 3); }
    .sm\:min-h-\[80vh\] { min-height: 80vh; }
}

@media (min-width: 48rem) {
    .md\:-translate-y-1\/2 { transform: translateY(-50%); }
    .md\:h-28 { height: calc(var(--spacing) * 28); }
    .md\:w-36 { width: calc(var(--spacing) * 36); }
    .md\:p-5 { padding: calc(var(--spacing) * 5); }
    .md\:pr-40 { padding-right: calc(var(--spacing) * 40); }
    .md\:right-2 { right: calc(var(--spacing) * 2); }
    .md\:top-1\/2 { top: 50%; }

    .md\:text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .md\:text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .md\:text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .md\:text-6xl {
        font-size: var(--text-6xl);
        line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
}


@media (min-width: 64rem) {
    .lg\:min-h-screen { min-height: 100vh; }
    .lg\:gap-8 { gap: calc(var(--spacing) * 8); }
    .lg\:mb-12 { margin-bottom: calc(var(--spacing) * 12); }
    .lg\:mt-6 { margin-top: calc(var(--spacing) * 6); }
    .lg\:py-20 { padding-block: calc(var(--spacing) * 20); }
    .lg\:w-44 { width: calc(var(--spacing) * 44); }

    .lg\:text-7xl {
        font-size: var(--text-7xl);
        line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
}