/* =====================================================================
   home.css — Pantalla de inicio (ofertas / novedades / destacados / categorías)
   y pantalla de administración de la home.
   Usa las variables de styles.css (--accent-color, etc.)
   ===================================================================== */

#homeSection { padding: 20px; }

.home-top {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    justify-content: space-between; margin-bottom: 22px;
}
.home-top h2 { margin: 0; font-size: 1.5rem; }
.home-search { display: flex; gap: 8px; flex: 1 1 320px; max-width: 520px; }
.home-search input {
    flex: 1; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px;
}
.home-btn {
    background: var(--accent-color, #EA4F0F); color: #fff; border: none; border-radius: 6px;
    padding: 10px 16px; cursor: pointer; font-weight: 700; font-size: 14px;
}
.home-btn:hover { filter: brightness(.92); }
.home-btn.secondary { background: #171717; }

.home-block { margin-bottom: 34px; }
.home-block-head {
    display: flex; align-items: baseline; justify-content: space-between;
    border-bottom: 2px solid var(--accent-color, #EA4F0F); margin-bottom: 14px; padding-bottom: 6px;
}
.home-block-head h3 { margin: 0; font-size: 1.15rem; }
.home-block-head a {
    color: var(--accent-color, #EA4F0F); cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: none;
}

/* Categorías */
.home-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.home-cat {
    background: #fff; border: 1px solid #ddd; border-radius: 999px; padding: 8px 14px;
    cursor: pointer; font-size: 13px; font-weight: 700; color: #171717; transition: all .15s;
}
.home-cat small { color: #888; font-weight: 400; margin-left: 4px; }
.home-cat:hover { background: var(--accent-color, #EA4F0F); border-color: var(--accent-color, #EA4F0F); color: #fff; }
.home-cat:hover small { color: #fff; }

/* Carruseles de productos */
.home-row-wrap { position: relative; }
.home-row {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 12px; scrollbar-width: thin;
}
.home-card {
    flex: 0 0 210px; scroll-snap-align: start; background: #fff; border: 1px solid #e3e3e3;
    border-radius: 10px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
    transition: box-shadow .15s, transform .15s;
}
.home-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); }
.home-card-img {
    position: relative; height: 170px; background: #f6f6f6;
    display: flex; align-items: center; justify-content: center;
}
.home-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.home-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; }
.home-badge {
    font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px; color: #fff; width: fit-content;
}
.home-badge.oferta    { background: #c0392b; }
.home-badge.novedad   { background: #27ae60; }
.home-badge.destacado { background: #171717; }
.home-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.home-card-code { font-size: 11px; color: #888; font-family: monospace; }
.home-card-name {
    font-size: 13px; font-weight: 700; color: #171717; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 50px;
}
.home-card-brand { font-size: 11px; color: var(--accent-color, #EA4F0F); }
.home-card-price { font-size: 17px; font-weight: 800; color: #171717; margin-top: auto; }
.home-card-price small { font-size: 10px; font-weight: 400; color: #888; }
.home-card-util { font-size: 11px; color: #27ae60; font-weight: 700; }
.home-card-desc { font-size: 11px; color: #c0392b; font-weight: 700; }

.home-arrow {
    position: absolute; top: 40%; transform: translateY(-50%); z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ccc; background: #fff;
    cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); font-size: 16px; line-height: 1;
}
.home-arrow.prev { left: -10px; }
.home-arrow.next { right: -10px; }
.home-arrow:hover { background: var(--accent-color, #EA4F0F); color: #fff; border-color: var(--accent-color, #EA4F0F); }

.home-empty { text-align: center; color: #888; padding: 40px 10px; }
.home-hint  { background: #fff7f2; border: 1px dashed var(--accent-color, #EA4F0F); color: #8a3a12;
              padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 18px; }

@media (max-width: 600px) {
    #homeSection { padding: 10px; }
    .home-card { flex-basis: 165px; }
    .home-card-img { height: 130px; }
    .home-arrow { display: none; }
}

/* ---------------- Administración de la home ---------------- */
.homeadm-subtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.homeadm-subtab {
    padding: 8px 14px; border: 1px solid #ddd; background: #fff; border-radius: 6px;
    cursor: pointer; font-weight: 700; font-size: 13px;
}
.homeadm-subtab.active { background: #171717; color: #fff; border-color: #171717; }
.homeadm-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.homeadm-tools input[type=text], .homeadm-tools select {
    padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px;
}
.homeadm-tools input[type=text] { min-width: 240px; flex: 1; max-width: 420px; }
.homeadm-count { color: #666; font-size: 13px; }
.homeadm-table { width: 100%; border-collapse: collapse; }
.homeadm-table th { background: #f0f0f0; padding: 9px 10px; text-align: left; font-size: 13px; }
.homeadm-table td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 13px; vertical-align: middle; }
.homeadm-table td.c, .homeadm-table th.c { text-align: center; }
.homeadm-table td.r { text-align: right; }
.homeadm-table small { color: #888; }
.homeadm-table input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-color, #EA4F0F); }
.homeadm-table input[type=checkbox]:disabled { cursor: not-allowed; opacity: .35; }
.homeadm-table input[type=number] { width: 64px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; }
.homeadm-table tr.saved td { background: #eafaf0; transition: background .6s; }
.homeadm-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.homeadm-pager button { padding: 6px 12px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; }
.homeadm-pager button:disabled { opacity: .4; cursor: default; }
.homeadm-note { font-size: 12px; color: #666; margin: 6px 0 12px; }
.homeadm-formrow { display: flex; align-items: center; gap: 8px; }

/* Enlaces de cabecera de bloque (Destacados / Ofertas / Novedades -> tienda filtrada) */
.home-block-head h3 a { color: inherit; text-decoration: none; }
.home-block-head h3 a:hover { color: var(--accent-color, #EA4F0F); }

/* Marcas en el listado de la tienda */
.prod-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.prod-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px; color: #fff; letter-spacing: .3px; }
.prod-badge.oferta { background: #d62828; }
.prod-badge.novedad { background: #2a9d8f; }
.prod-badge.destacado { background: #f4a300; color: #222; }
#products-table-body tr.row-oferta { box-shadow: inset 4px 0 0 #d62828; }
#products-table-body tr.row-destacado:not(.row-oferta) { box-shadow: inset 4px 0 0 #f4a300; }
#products-table-body tr.row-novedad:not(.row-oferta):not(.row-destacado) { box-shadow: inset 4px 0 0 #2a9d8f; }