/**
 * zelanda-compat.css
 * Fallbacks de utilidades OneUI/brand para productos cuyo
 * tailwind.generated.css no incluye estas clases.
 * Usa las variables --brand-* definidas por cada producto.
 */

/* ===== Radios / sombras OneUI ===== */
.rounded-oneui { border-radius: 0.75rem; }
.shadow-oneui-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.06); }
.shadow-oneui-md { box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.06); }
.shadow-oneui-lg { box-shadow: 0 12px 32px -6px rgb(0 0 0 / 0.16), 0 4px 8px -4px rgb(0 0 0 / 0.08); }

/* ===== Brand helpers ===== */
.bg-brand-50  { background-color: color-mix(in srgb, var(--brand-500) 8%, transparent); }
.bg-brand-100 { background-color: color-mix(in srgb, var(--brand-500) 14%, transparent); }
.bg-brand-50\/40 { background-color: color-mix(in srgb, var(--brand-500) 5%, transparent); }
.bg-brand-600 { background-color: var(--brand-600, var(--brand-500)); }
.bg-brand-700 { background-color: color-mix(in srgb, var(--brand-600, var(--brand-500)) 88%, black); }
.text-brand-600 { color: var(--brand-600, var(--brand-500)); }
.text-brand-700 { color: color-mix(in srgb, var(--brand-600, var(--brand-500)) 85%, black); }
.text-brand-300 { color: color-mix(in srgb, var(--brand-500) 60%, white); }
.border-brand-100 { border-color: color-mix(in srgb, var(--brand-500) 18%, transparent); }
.border-brand-300 { border-color: color-mix(in srgb, var(--brand-500) 45%, transparent); }
.border-brand-400 { border-color: color-mix(in srgb, var(--brand-500) 65%, transparent); }
.border-brand-500 { border-color: var(--brand-500); }
.accent-brand-500, .accent-brand-600 { accent-color: var(--brand-500); }

.hover\:bg-brand-700:hover { background-color: color-mix(in srgb, var(--brand-600, var(--brand-500)) 88%, black); }
.hover\:bg-brand-600:hover { background-color: var(--brand-600, var(--brand-500)); }
.hover\:bg-brand-50:hover  { background-color: color-mix(in srgb, var(--brand-500) 8%, transparent); }
.hover\:border-brand-300:hover { border-color: color-mix(in srgb, var(--brand-500) 45%, transparent); }
.hover\:border-brand-400:hover { border-color: color-mix(in srgb, var(--brand-500) 65%, transparent); }
.hover\:text-brand-600:hover { color: var(--brand-600, var(--brand-500)); }

.peer:checked + .peer-checked\:bg-brand-600,
.peer-checked\:bg-brand-600:has(~ .peer:checked) { background-color: var(--brand-600, var(--brand-500)); }
input.peer:checked ~ span.peer-checked\:bg-brand-600,
input.peer:checked + span.peer-checked\:bg-brand-600 { background-color: var(--brand-600, var(--brand-500)); color: #fff; }
input.peer:checked ~ .peer-checked\:text-white { color: #fff; }

/* ===== Tipografia de marca ===== */
.font-heading { font-family: 'Montserrat', system-ui, sans-serif; }
.font-brand   { font-family: 'Montserrat', system-ui, sans-serif; }

/* ===== Utilidades ===== */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.line-clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== Micro-interacciones ===== */
.oneui-lift { transition: transform .15s ease, box-shadow .15s ease; }
.oneui-lift:hover { transform: translateY(-1px); }

/* ===== Chips / selects con busqueda (dropdown-search.js) ===== */
.zl-select-search {
    width: 100%;
    padding: 0.375rem 0.625rem;
    margin-bottom: 0.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}
.dark .zl-select-search { background: #0f172a; border-color: #334155; color: #e2e8f0; }