:root {
    --color-primary: #059669;
    --color-primary-dark: #047857;
    --color-primary-light: #34d399;
    --color-primary-container: #d1fae5;
    --color-primary-rgb: 5, 150, 105;
    --color-primary-dark-rgb: 4, 120, 87;
    --color-title: #059669;
    --color-title-dark: #34d399;
    --color-day-title: #059669;
    --color-day-title-dark: #34d399;
    --color-gradient-from: #059669;
    --color-gradient-to: #059669;
    --color-gradient-hover-from: #047857;
    --color-gradient-hover-to: #047857;
    --color-gradient-dark-from: #34d399;
    --color-gradient-dark-to: #34d399;
}

/* Centralización y Control Unificado de Textos y Títulos de Marca */
.brand-text,
.bg-clip-text.text-transparent[class*="from-emerald"],
.bg-clip-text.text-transparent[class*="from-primary"],
.bg-clip-text.text-transparent[class*="from-teal"] {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--color-title) !important;
    color: var(--color-title) !important;
}

.dark .brand-text,
.dark .bg-clip-text.text-transparent[class*="from-emerald"],
.dark .bg-clip-text.text-transparent[class*="from-primary"],
.dark .bg-clip-text.text-transparent[class*="from-teal"] {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--color-title-dark) !important;
    color: var(--color-title-dark) !important;
}

/* Títulos de días de la semana (Lunes, Martes, etc.) en tarjetas */
.day-title {
    color: var(--color-day-title) !important;
}

.dark .day-title {
    color: var(--color-day-title-dark) !important;
}

/* Contenedores de íconos limpios (sin degradés ni sombras chillonas) */
div[class*="from-emerald-500/20"][class*="to-teal-500"] {
    background: #ecfdf5 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.dark div[class*="from-emerald-500/20"][class*="to-teal-500"] {
    background: rgba(6, 78, 59, 0.4) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.dark .text-primary {
    color: var(--color-primary-light) !important;
}

body {
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill-1,
.fill-1 {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* Radio & Checkbox Global Brand Color (replaces Tailwind Forms blue #2563eb default) */
[type='radio'],
[type='checkbox'] {
    color: var(--color-primary-dark) !important;
    accent-color: var(--color-primary) !important;
}
[type='radio']:focus,
[type='checkbox']:focus {
    --tw-ring-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Custom Dropdowns */
.dropdown-menu {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    display: none;
}
.dropdown-menu.show {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
    display: block !important;
}
.expand-icon {
    transition: transform 0.3s ease;
}
.expand-icon.rotate-180 {
    transform: rotate(180deg);
}

/* Dropdown Item Hover Effects */
.dropdown-item {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dropdown-item:hover {
    background-color: rgba(var(--color-primary-rgb), 0.12) !important; /* bg-primary/12 */
    color: var(--color-primary) !important; /* text-primary */
    padding-left: 1.25rem !important; /* Slight shift to the right */
}

.dropdown-item.selected {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
    color: var(--color-primary) !important;
}


/* Global Placeholder Styling */
input::placeholder, textarea::placeholder {
    color: inherit !important;
    opacity: 0.4 !important;
}

/* Custom Dropdown Scroll Support & Transitions */
.custom-dropdown-menu {
    max-height: 280px;
    overflow-y: auto !important;
    transform: translateY(10px) scale(0.95);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.custom-dropdown-menu.show {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Custom Scrollbar Utility — Premium Style */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.3s ease;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* For Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
.dark .custom-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Hide scrollbar while preserving scroll functionality */
.no-scrollbar::-webkit-scrollbar,
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.no-scrollbar,
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- ANIMATIONS & UTILITIES --- */

/* Shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.shake-element {
    animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

.error-border,
input.error-border,
textarea.error-border,
.dropdown-trigger.error-border {
    border: 1px solid #fca5a5 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.error-border:focus,
input.error-border:focus,
textarea.error-border:focus,
.dropdown-trigger.error-border:focus {
    border: 1px solid #fca5a5 !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.2) !important;
    outline: none !important;
}

.dark .error-border,
.dark input.error-border,
.dark textarea.error-border,
.dark .dropdown-trigger.error-border {
    border-color: #fca5a5 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Multi-select Dropdown Styles */
.dropdown-item.selected .checkbox-box {
    background-color: var(--color-primary); /* bg-primary */
    border-color: var(--color-primary);
}

.dropdown-item.selected .check-icon {
    opacity: 1 !important;
}

.dropdown-item:hover .checkbox-box {
    border-color: var(--color-primary);
}

/* Premium Gradient Button Style */
.btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700 !important; /* font-bold */
    font-size: 0.875rem; /* text-sm */
    border-radius: 0.75rem !important; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; /* shadow-md */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    border: none !important;
}

.btn-gradient:hover {
    background-color: var(--color-primary-dark) !important;
    background-image: none !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
}

.btn-gradient:active {
    transform: scale(0.98) !important; /* active:scale-[0.98] */
}

.btn-gradient:disabled,
.btn-gradient[disabled] {
    cursor: default !important;
    pointer-events: none !important;
}

/* Searchable Dropdown CSS Override */
.custom-dropdown-menu.searchable-dropdown {
    overflow-y: hidden !important;
    display: flex;
    flex-direction: column;
}
.custom-dropdown-menu.searchable-dropdown .dropdown-items-list {
    overflow-y: auto !important;
    flex-grow: 1;
    max-height: 220px;
}
.dropdown-search-input {
    padding-left: 1.75rem !important; /* 28px - closer to search icon */
    padding-right: 1.5rem !important;
}

/* ==========================================================================
   Modals Clipping & Layer Isolation (prevents corner flattening on tooltips)
   ========================================================================== */
#add-meal-modal > div {
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    isolation: isolate !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
#add-meal-modal > div > div:first-child {
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
}
#add-meal-modal > div > div:last-child {
    border-bottom-left-radius: inherit !important;
    border-bottom-right-radius: inherit !important;
}

/* ==========================================================================
   Global Premium Tooltips (Dark Slate Card with Pointer Arrow)
   ========================================================================== */
#global-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    max-width: 260px;
    contain: layout style;
    background-color: #1e293b; /* slate-800 */
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    padding: 6px 10px;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    word-break: break-word;
    text-align: center;
    display: none;
}

#global-tooltip.tooltip-visible {
    display: block;
}

#global-tooltip.tooltip-active {
    opacity: 1;
    transform: scale(1);
}

/* Tooltip Arrow (Triangle) */
#global-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

/* Arrow when tooltip is ABOVE the element (arrow at bottom pointing down) */
#global-tooltip.arrow-bottom::before {
    top: 100%;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border-top-color: #1e293b;
}

/* Arrow when tooltip is BELOW the element (arrow at top pointing up) */
#global-tooltip.arrow-top::before {
    bottom: 100%;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border-bottom-color: #1e293b;
}

/* Dark mode styling */
html.dark #global-tooltip {
    background-color: #0f172a; /* slate-900 */
    border-color: rgba(255, 255, 255, 0.15);
}
html.dark #global-tooltip.arrow-bottom::before {
    border-top-color: #0f172a;
}
html.dark #global-tooltip.arrow-top::before {
    border-bottom-color: #0f172a;
}

/* ==========================================================================
   Premium Stock & Oferta Pill Widgets (Planes Card Footer)
   ========================================================================== */
.stock-pill-wrapper,
.oferta-pill-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 9999px;
    background-color: rgba(241, 245, 249, 0.75);
    border: 1px solid rgba(226, 232, 240, 0.85);
    padding: 0 4px;
    height: 24px;
    max-height: 24px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .stock-pill-wrapper,
.dark .stock-pill-wrapper,
html.dark .oferta-pill-wrapper,
.dark .oferta-pill-wrapper {
    background-color: rgba(15, 23, 42, 0.6);
    border-color: rgba(51, 65, 85, 0.6);
}

.stock-pill-wrapper:hover,
.oferta-pill-wrapper:hover {
    background-color: #ffffff;
    border-color: rgba(203, 213, 225, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

html.dark .stock-pill-wrapper:hover,
.dark .stock-pill-wrapper:hover,
html.dark .oferta-pill-wrapper:hover,
.dark .oferta-pill-wrapper:hover {
    background-color: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.8);
}

.stock-pill-wrapper:focus-within {
    background-color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

html.dark .stock-pill-wrapper:focus-within,
.dark .stock-pill-wrapper:focus-within {
    background-color: rgba(30, 41, 59, 1);
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

.oferta-pill-wrapper:focus-within {
    background-color: #ffffff;
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

html.dark .oferta-pill-wrapper:focus-within,
.dark .oferta-pill-wrapper:focus-within {
    background-color: rgba(30, 41, 59, 1);
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.stock-pill-wrapper.has-limit {
    background-color: #f0f9ff;
    border-color: #bae6fd;
}

html.dark .stock-pill-wrapper.has-limit,
.dark .stock-pill-wrapper.has-limit {
    background-color: rgba(14, 165, 233, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
}

.oferta-pill-wrapper.has-offer {
    background-color: #fffbeb;
    border-color: rgba(245, 158, 11, 0.5);
}

html.dark .oferta-pill-wrapper.has-offer,
.dark .oferta-pill-wrapper.has-offer {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.45);
}

.stock-pill-input,
input[type="number"].stock-pill-input {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 52px !important;
    height: 100% !important;
    max-height: 22px !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #334155 !important;
    position: relative;
    z-index: 2;
    -moz-appearance: textfield !important;
}

.oferta-pill-input,
input[type="number"].oferta-pill-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 22px !important;
    line-height: normal !important;
    padding: 0 2px 0 11px !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: right !important;
    color: #334155 !important;
    position: relative;
    z-index: 2;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.stock-pill-input:hover,
.stock-pill-input:focus,
input[type="number"].stock-pill-input:hover,
input[type="number"].stock-pill-input:focus,
.oferta-pill-input:hover,
.oferta-pill-input:focus,
input[type="number"].oferta-pill-input:hover,
input[type="number"].oferta-pill-input:focus {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

html.dark .stock-pill-input,
.dark .stock-pill-input,
html.dark .oferta-pill-input,
.dark .oferta-pill-input {
    color: #e2e8f0 !important;
}

.stock-pill-wrapper.has-limit .stock-pill-input {
    color: #0284c7 !important;
    font-weight: 800 !important;
}

html.dark .stock-pill-wrapper.has-limit .stock-pill-input,
.dark .stock-pill-wrapper.has-limit .stock-pill-input {
    color: #7dd3fc !important;
}

.oferta-pill-wrapper.has-offer .oferta-pill-input {
    color: #d97706 !important;
    font-weight: 800 !important;
}

html.dark .oferta-pill-wrapper.has-offer .oferta-pill-input,
.dark .oferta-pill-wrapper.has-offer .oferta-pill-input {
    color: #fbbf24 !important;
}

.oferta-currency-symbol {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease, color 0.15s ease;
}

html.dark .oferta-currency-symbol,
.dark .oferta-currency-symbol {
    color: #64748b;
}

.oferta-pill-wrapper:focus-within .oferta-currency-symbol {
    opacity: 1 !important;
    visibility: visible !important;
    color: #d97706;
}

html.dark .oferta-pill-wrapper:focus-within .oferta-currency-symbol,
.dark .oferta-pill-wrapper:focus-within .oferta-currency-symbol {
    color: #fbbf24;
}

.oferta-pill-wrapper.has-offer .oferta-currency-symbol,
.oferta-pill-wrapper:has(.oferta-pill-input:not(:placeholder-shown)) .oferta-currency-symbol {
    opacity: 1 !important;
    visibility: visible !important;
    color: #d97706;
}

html.dark .oferta-pill-wrapper.has-offer .oferta-currency-symbol,
.dark .oferta-pill-wrapper.has-offer .oferta-currency-symbol,
html.dark .oferta-pill-wrapper:has(.oferta-pill-input:not(:placeholder-shown)) .oferta-currency-symbol,
.dark .oferta-pill-wrapper:has(.oferta-pill-input:not(:placeholder-shown)) .oferta-currency-symbol {
    color: #fbbf24;
}

/* Symmetric SVG infinity icon */
.stock-infinity-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px !important;
    height: 16px !important;
    pointer-events: none;
    color: #94a3b8;
    z-index: 1;
    display: block;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

html.dark .stock-infinity-icon,
.dark .stock-infinity-icon {
    color: #64748b;
}

/* Hide infinity when field is focused (disappears on focus, returns on blur) */
.stock-pill-wrapper:focus-within .stock-infinity-icon,
.stock-pill-input:focus ~ .stock-infinity-icon {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide infinity when field has a value or limit */
.stock-pill-wrapper.has-limit .stock-infinity-icon,
.stock-pill-input:not(:placeholder-shown) ~ .stock-infinity-icon {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Subtle centered plus icon for empty offer pill */
.oferta-empty-plus {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px !important;
    height: 13px !important;
    pointer-events: none;
    color: #94a3b8;
    z-index: 1;
    display: block;
    transition: opacity 0.15s ease, visibility 0.15s ease, color 0.15s ease;
}

html.dark .oferta-empty-plus,
.dark .oferta-empty-plus {
    color: #64748b;
}

.oferta-pill-wrapper:hover .oferta-empty-plus {
    color: #64748b;
}

html.dark .oferta-pill-wrapper:hover .oferta-empty-plus,
.dark .oferta-pill-wrapper:hover .oferta-empty-plus {
    color: #94a3b8;
}

/* Hide plus when field is focused */
.oferta-pill-wrapper:focus-within .oferta-empty-plus,
.oferta-pill-input:focus ~ .oferta-empty-plus {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide plus when field has an offer / value */
.oferta-pill-wrapper.has-offer .oferta-empty-plus,
.oferta-pill-wrapper:has(.oferta-pill-input:not(:placeholder-shown)) .oferta-empty-plus,
.oferta-pill-input:not(:placeholder-shown) ~ .oferta-empty-plus {
    opacity: 0 !important;
    visibility: hidden !important;
}

.stock-pill-input:focus::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.stock-pill-input::-webkit-outer-spin-button,
.stock-pill-input::-webkit-inner-spin-button,
.oferta-input::-webkit-outer-spin-button,
.oferta-input::-webkit-inner-spin-button,
.oferta-pill-input::-webkit-outer-spin-button,
.oferta-pill-input::-webkit-inner-spin-button,
input[type="number"].oferta-input::-webkit-outer-spin-button,
input[type="number"].oferta-input::-webkit-inner-spin-button,
input[type="number"].oferta-pill-input::-webkit-outer-spin-button,
input[type="number"].oferta-pill-input::-webkit-inner-spin-button,
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button,
input[type="number"].no-spinners::-webkit-outer-spin-button,
input[type="number"].no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.stock-pill-input,
.oferta-input,
.oferta-pill-input,
.no-spinners,
input[type="number"].no-spinners,
input[type="number"].oferta-input,
input[type="number"].oferta-pill-input {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.cursor-default,
button.cursor-default,
button:disabled.cursor-default,
button[disabled].cursor-default {
    cursor: default !important;
}

/* Campo de CVV compacto para tarjetas guardadas */
.cvv-guardada-input {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 36px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Animación y resaltado de error para inputs de tarjeta / CVV */
@keyframes input-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.input-error-shake {
    animation: input-shake 0.35s ease-in-out !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
    outline: none !important;
}

/* Selección múltiple en modal de catálogo (Planes) */
.meal-modal-item {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.meal-modal-item:not(.is-selected):focus,
.meal-modal-item:not(.is-selected):focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.meal-modal-item.is-selected,
.meal-modal-item.is-selected:focus,
.meal-modal-item.is-selected:focus-visible {
    border-color: var(--color-primary) !important;
    background-color: rgba(var(--color-primary-rgb), 0.05) !important;
    box-shadow: 0 0 0 2px var(--color-primary) !important;
    outline: none !important;
}

.dark .meal-modal-item.is-selected,
.dark .meal-modal-item.is-selected:focus,
.dark .meal-modal-item.is-selected:focus-visible {
    border-color: var(--color-primary) !important;
    background-color: rgba(var(--color-primary-rgb), 0.12) !important;
    box-shadow: 0 0 0 2px var(--color-primary) !important;
    outline: none !important;
}

/* Ítem ya presente en el día actual (bloqueo elegante sin overlay invasivo) */
.meal-modal-item.is-already-in-day {
    opacity: 0.65 !important;
    background-color: rgba(248, 250, 252, 0.75) !important;
    border-color: #cbd5e1 !important;
    border-style: dashed !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    user-select: none !important;
}

.dark .meal-modal-item.is-already-in-day {
    background-color: rgba(15, 23, 42, 0.45) !important;
    border-color: #334155 !important;
}

/* ==========================================================================
   Tarjetas de Vianda en Planes Semanales (Vista Compacta Definitiva)
   ========================================================================== */

/* Contenedor de tarjetas por día: scroll interno condicional (a partir de 5 ítems) */
.day-cards-list {
    gap: 10px !important;
}

.day-cards-list.has-scroll-limit {
    max-height: 486px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.day-cards-list.has-scroll-limit::-webkit-scrollbar {
    width: 4px;
}

.day-cards-list.has-scroll-limit::-webkit-scrollbar-track {
    background: transparent;
}

.day-cards-list.has-scroll-limit::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
}

.day-cards-list.has-scroll-limit::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}

/* Tarjeta en vista compacta definitiva */
.day-cards-list .vianda-card {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
    box-sizing: border-box !important;
    padding: 7px 10px !important;
    gap: 5px !important;
    position: relative;
    border-radius: 0.75rem !important;
}

.day-cards-list .plan-card-main {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.day-cards-list .plan-card-image {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

.day-cards-list .plan-card-image span.material-symbols-outlined {
    font-size: 20px !important;
}

.day-cards-list .plan-card-details {
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
}

.day-cards-list .plan-card-title {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-bottom: 0.15rem !important;
    padding-right: 0 !important;
    transition: padding-right 0.15s ease-out;
}

/* Solo al hacer hover sobre la tarjeta se reserva el espacio para las acciones y aparecen los puntitos */
@media (min-width: 1024px) {
    .day-cards-list .vianda-card:hover .plan-card-title {
        padding-right: 66px !important;
    }
}

/* En mobile / tablets táctiles donde los botones están siempre visibles */
@media (max-width: 1023px) {
    .day-cards-list .plan-card-title {
        padding-right: 66px !important;
    }
}

.day-cards-list .price-container {
    margin-bottom: 0 !important;
    gap: 0.25rem !important;
}

.day-cards-list .plan-card-porcion-badge {
    font-size: 8px !important;
    padding: 0.1rem 0.35rem !important;
}

.day-cards-list .plan-card-stock-row {
    padding-top: 0.35rem !important;
    border-top-width: 1px;
}

.day-cards-list .plan-card-oferta-row {
    margin-top: 0.2rem !important;
}

.day-cards-list .stock-pill-wrapper,
.day-cards-list .oferta-pill-wrapper {
    height: 22px !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}

.day-cards-list .stock-pill-input,
.day-cards-list .oferta-pill-input {
    font-size: 9.5px !important;
}

/* Botonera de acciones de vianda */
.card-actions-toolbar {
    top: 2px !important;
    right: 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.card-actions-toolbar button {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.card-actions-toolbar button span.material-symbols-outlined {
    font-size: 12.5px !important;
    line-height: 1 !important;
}

/* Compatibilidad retrospectiva para botones absolute individuales */
.day-cards-list .vianda-card button.absolute {
    top: 2px !important;
    width: 19px !important;
    height: 19px !important;
    padding: 0 !important;
}