/* ============ BASE ============ */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ============ SHADOWS editoriales ============ */
.editorial-shadow {
    box-shadow: 0px 4px 12px rgba(31, 59, 47, 0.05);
}
.editorial-shadow-hover {
    transition: box-shadow .3s ease, transform .3s ease;
}
.editorial-shadow-hover:hover {
    box-shadow: 0px 16px 40px rgba(31, 59, 47, 0.12);
    transform: translateY(-3px);
}

/* ============ Scrollbars limpias ============ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============ SIDEBAR transitions ============ */
#sidebar-overlay { transition: opacity 0.3s ease; }
#sidebar { transition: transform 0.3s ease-in-out; }

/* ============ LINE CLAMP (Tailwind plugin no necesario) ============ */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============ MODAL backdrop ============ */
#modal {
    animation: fadeIn .25s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============ FILTER CHIPS (estado activo gestionado por JS) ============ */
.filter-chip,
.subcat-chip,
.cond-chip,
.tab-btn {
    transition: all .2s ease;
    cursor: pointer;
    border: none;
}

/* ============ Inputs base — refuerzo sobre forms plugin ============ */
input[type="text"], input[type="tel"], input[type="date"], input[type="email"], select, textarea {
    background: #fff;
}
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* ============ Tarjetas con cursor pointer al hover ============ */
article[data-open] {
    cursor: pointer;
}