/* === ARTICLE CONTAINERS — tote/gaylord con varias cosas adentro === */

/* --- Toggle Individual / Contenedor --- */
.article-mode-toggle { display: flex; gap: 6px; }
.article-mode-btn {
    flex: 1; font-size: 12px; padding: 8px 10px; border: 1px solid #ddd !important;
    background: #fff !important; color: #555 !important; border-radius: 8px !important;
    cursor: pointer; width: auto !important; margin: 0 !important;
}
.article-mode-btn.active { background: #185FA5 !important; color: #fff !important; border-color: #185FA5 !important; }

/* --- Filas dinamicas de contenido --- */
.article-content-row {
    display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px;
}
.ac-row-main {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 70px 32px 28px;
    gap: 5px; align-items: center;
}
.article-content-row input {
    padding: 6px 7px; font-size: 12px; border: 1px solid #ddd; border-radius: 6px; width: 100%;
}
.ac-row-location {
    font-size: 11px !important; color: #666; border-style: dashed !important;
}
.ac-row-photo-btn, .ac-row-remove-btn {
    border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer;
    font-size: 13px; padding: 4px; width: auto !important; margin: 0 !important;
}
.ac-row-photo-btn.has-photo { border-color: #28a745; background: #eafbf0; }
.ac-row-remove-btn { color: #c0392b; }

/* --- Badge llamativo: "Contains N items" --- */
.article-container-badge {
    display: flex; align-items: center; gap: 5px; justify-content: center;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .2px;
    padding: 6px 10px; text-transform: uppercase;
    animation: ac-badge-pulse 2s ease-in-out infinite;
}
@keyframes ac-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,124,0,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(245,124,0,0); }
}

/* --- Banner de coincidencia durante busqueda: reemplaza el badge --- */
.article-container-match {
    display: flex; align-items: center; gap: 5px; justify-content: center;
    background: #fff6d8; color: #7a5b00; font-size: 11px; font-weight: 600;
    padding: 6px 10px; border-bottom: 2px solid #eda100;
}
.article-container-match span { font-weight: 400; opacity: .85; }

/* --- La tarjeta entera es clickeable si es contenedor --- */
.article-card-container { cursor: pointer; transition: box-shadow .15s ease, transform .1s ease; }
.article-card-container:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px); }

/* ===================== DARK MODE ===================== */
body.dark-mode .article-mode-btn { background: #1e222a !important; border-color: #383d47 !important; color: #c3c6cc !important; }
body.dark-mode .article-content-row input { background: #1e222a; color: #e2e4e8; border-color: #383d47; }
body.dark-mode .ac-row-photo-btn, body.dark-mode .ac-row-remove-btn { background: #1e222a; border-color: #383d47; }