/* ====================================================================
   Inventario · Búsqueda de artículos
   Tokens visuales tomados de los wireframes (Documentacion/Designer):
   paper, surface, ink, line, border, muted, accent, free/loan/rep.
   ==================================================================== */

:root {
    --c-paper:    #f0eee9;
    --c-surface:  #ffffff;
    --c-surface2: #faf8f3;
    --c-surface3: #f3f0e9;
    --c-line:     #e2ddd3;
    --c-border:   #cbc6ba;
    --c-border2:  #a8a395;
    --c-ink:      #13110d;
    --c-text:     #22201b;
    --c-muted:    #6b6759;
    --c-faint:    #a8a395;
    --c-accent:        #b06a45;
    --c-accent-soft:   #f6e8de;
    --c-free:          #3f8c57;
    --c-free-soft:     #e6f1e6;
    --c-loan:          #b47c2f;
    --c-loan-soft:     #f8edd7;
    --c-rep:           #5c6f95;
    --c-rep-soft:      #e1e5ee;
    --f-ui:   "Helvetica Neue", Helvetica, Arial, sans-serif;
    --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html, body {
    margin: 0; padding: 0;
    background: var(--c-paper);
    font-family: var(--f-ui);
    color: var(--c-text);
    font-size: 13px;
}

a { color: inherit; }

/* ---- Top bar -------------------------------------------------- */
#topbar {
    height: 52px;
    padding: 0 24px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    display: flex; align-items: center; gap: 20px;
    position: sticky; top: 0; z-index: 200;
}
#brandLogo {
    width: 24px; height: 24px; border-radius: 4px;
    background: var(--c-ink); color: var(--c-surface);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-mono); font-size: 11px; font-weight: 700;
}
#brandTitle { font-size: 13px; font-weight: 600; }
#brandTitle .sub { margin-left: 10px; color: var(--c-muted); font-weight: 400; font-size: 12px; }
#searchBox {
    margin-left: auto;
    display: flex; align-items: center; gap: 8px;
    width: 360px; height: 32px; padding: 0 12px;
    background: var(--c-surface2);
    border: 1px solid var(--c-line);
    border-radius: 4px;
    font-size: 13px;
}
#searchBox input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-family: var(--f-ui); font-size: 13px; color: var(--c-text);
}
#searchBox::before {
    content: "⌕"; color: var(--c-faint); font-size: 14px;
}
#userAvatar {
    width: 28px; height: 28px; border-radius: 14px;
    background: var(--c-surface3); border: 1px solid var(--c-line);
}

/* ---- Tabs grandes (Vestuario / Utilería / Retales) ------------ */
#tabs {
    padding: 0 24px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    display: flex; align-items: center; gap: 4px;
    position: sticky; top: 52px; z-index: 199;
}
.tab {
    height: 40px; padding: 0 18px;
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: var(--c-muted); font-size: 14px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
}
.tab .count { font-family: var(--f-mono); font-size: 11px; color: var(--c-faint); font-weight: 400; }
.tab.active { color: var(--c-text); font-weight: 600; border-bottom-color: var(--c-ink); }
.tab:hover:not(.active) { color: var(--c-text); }
#tabSpacer { flex: 1; }
.btn-primary {
    height: 32px; padding: 0 16px;
    background: var(--c-ink); color: var(--c-surface);
    border: 1px solid var(--c-ink);
    border-radius: 4px;
    font-family: var(--f-ui); font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transition: background .12s, box-shadow .12s;
}
.btn-primary:hover { background: #2a261f; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); }
.btn-secondary {
    height: 32px; padding: 0 16px;
    background: var(--c-surface); color: var(--c-text);
    border: 1px solid var(--c-border2);
    border-radius: 4px;
    font-family: var(--f-ui); font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn-secondary:hover {
    background: var(--c-surface3);
    border-color: var(--c-ink);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

/* ---- Bandas de filtros ---------------------------------------- */
#filterBands {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    padding: 12px 24px;
    display: flex; flex-direction: column; gap: 10px;
}
.filterBand {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.filterBandLabel {
    font-size: 11px; color: var(--c-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px;
}
/* Chips de selección (DropDownList estilizado) */
.chipSelect {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    border-radius: 999px;
    padding: 5px 28px 5px 12px;
    font-family: var(--f-ui); font-size: 12px;
    color: var(--c-text); cursor: pointer; height: auto;
    appearance: none; -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--c-muted) 50%),
        linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    line-height: 1.2;
}
.chipSelect:focus { outline: 2px solid var(--c-accent-soft); outline-offset: 1px; }
.chipSelect.active { background-color: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink); }
.chipTextField {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--f-ui); font-size: 12px;
    color: var(--c-text); height: auto;
}
.chipBtnLink {
    background: transparent; border: 0; cursor: pointer;
    font-size: 12px; color: var(--c-muted);
    text-decoration: underline; text-underline-offset: 3px;
}

/* Chips de subcategoría (LinkButtons) — exclusivos */
.subChip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    border-radius: 999px;
    font-size: 12px; color: var(--c-text);
    text-decoration: none;
    line-height: 1.2;
}
.subChip:hover { border-color: var(--c-border2); }
.subChip.active {
    background: var(--c-ink); color: var(--c-surface);
    border-color: var(--c-ink); font-weight: 500;
}

/* ---- Toolbar de resultados ------------------------------------ */
/* Antes era sticky a top:92, lo que lo solapaba con la cabecera sticky de la
   tabla y daba apariencia "flotante". Ahora scrollea con el contenido y
   dejamos que solo la cabecera de la tabla quede pegada al pie de los tabs. */
#resultsToolbar {
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
    padding: 10px 24px;
    display: flex; align-items: center; gap: 12px;
}
#countLabel { font-size: 13px; color: var(--c-text); }
#countLabel strong { font-weight: 600; }
#countLabel .ctx { color: var(--c-muted); margin-left: 4px; }
.toolbarSpacer { flex: 1; }
.toolbarLabel { font-size: 12px; color: var(--c-muted); }

/* ---- Caja de listado ------------------------------------------ */
/*  - overflow:hidden quitado: era el ancestro con scroll mechanism que
 *    "secuestraba" el sticky de thead y lo mantenía pegado al card, no al
 *    viewport. Sin él, la cabecera de tabla se pega al pie de #tabs como debe.
 *  - Para conservar las esquinas redondeadas (lo que hacía overflow:hidden),
 *    aplicamos border-radius a las celdas de las esquinas.
 *  - border-collapse:separate es necesario para que sticky funcione bien en
 *    celdas de tabla con borders (con "collapse" el borde inferior se queda
 *    en su sitio al hacer scroll y la cabecera flota sin línea).
 */
#listCard {
    background: var(--c-surface);
    margin: 16px 24px;
    border: 1px solid var(--c-line);
    border-radius: 4px;
}
/* ---- Grid de tarjetas ------------------------------------------ *
 * Foto grande arriba (mini-carrusel ‹ › si hay varias) + info debajo.
 * Las flechas las gestiona el JS de Articulos.aspx vía data-fotos.    */
#cardsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin: 16px 24px;
}
.artCard {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 6px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .15s, border-color .15s;
}
.artCard:hover {
    border-color: var(--c-border2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.artCard.row-resaltada {
    background-color: #fdf6c2;
    border-color: #e0d27a;
}

.cardFoto {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--c-surface2);
}
.cardFoto .fotoLink { display: block; width: 100%; height: 100%; }
.cardFoto img {
    width: 100%; height: 100%;
    /* contain: se ve la foto ENTERA dentro del cuadro; el fondo del
       cardFoto rellena las franjas cuando las proporciones no casan. */
    object-fit: contain;
    display: block;
}
.cardFoto .photoBox {
    display: block;
    width: 100%; height: 100%;
    background-image: repeating-linear-gradient(135deg, #e3dfd3 0 8px, #d6d1c2 8px 16px);
}

/* Flechas del carrusel: solo visibles al pasar el ratón por la foto */
.fotoNav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 13px;
    border: 1px solid var(--c-border);
    background: rgba(255, 255, 255, 0.88);
    color: var(--c-text);
    font-size: 15px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background .12s;
    padding: 0;
}
.cardFoto:hover .fotoNav { opacity: 1; }
.fotoNav:hover { background: #fff; }
.fotoPrev { left: 6px; }
.fotoNext { right: 6px; }
.fotoCount {
    position: absolute;
    bottom: 6px; right: 6px;
    background: rgba(13, 11, 8, 0.55);
    color: #fff;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 8px;
    pointer-events: none;
}
/* Abrir el original en pestaña nueva (esquina superior derecha) */
.fotoOriginal {
    position: absolute;
    top: 6px; right: 6px;
    width: 24px; height: 24px;
    border-radius: 12px;
    border: 1px solid var(--c-border);
    background: rgba(255, 255, 255, 0.88);
    color: var(--c-text);
    font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background .12s;
    padding: 0;
}
.cardFoto:hover .fotoOriginal { opacity: 1; }
.fotoOriginal:hover { background: #fff; }

.cardBody {
    flex: 1;
    padding: 10px 12px 12px;
    display: flex; flex-direction: column;
    gap: 4px;
}
.cardCodigo {
    font-family: var(--f-mono);
    font-size: 10.5px;
    color: var(--c-muted);
}
.cardNombre {
    font-size: 13px; font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    line-height: 1.3;
}
.cardNombre:hover { color: var(--c-accent); text-decoration: underline; }
.cardMeta {
    font-size: 11.5px;
    color: var(--c-muted);
    line-height: 1.45;
}
.cardMeta .metaSep { color: var(--c-faint); margin: 0 1px; }
.cardFooter {
    margin-top: auto;
    padding-top: 8px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
}
.cardUbicacion {
    font-size: 11px;
    color: var(--c-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.cardActividad {
    display: block;
    text-align: center;
    font-size: 11.5px;
    color: var(--c-muted);
    text-decoration: none;
    border-top: 1px solid var(--c-line);
    padding: 7px 12px;
    background: var(--c-surface2);
    /* el enlace vive dentro de cardBody: los márgenes negativos lo
       extienden hasta los bordes de la tarjeta como pie a todo el ancho */
    margin: 8px -12px -12px;
}
.cardActividad:hover { color: var(--c-accent); background: var(--c-surface3); }

/* Status badges -------------------------------------------------- */
.statusBadge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
}
.statusBadge::before {
    content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor;
}
.status-libre        { background: var(--c-free-soft);  color: var(--c-free); }
.status-prestamo     { background: var(--c-loan-soft);  color: var(--c-loan); }
.status-reparacion   { background: var(--c-rep-soft);   color: var(--c-rep); }
.status-otros        { background: var(--c-surface3);   color: var(--c-muted); }

/* Color swatch --------------------------------------------------- */
.colorSwatch {
    width: 16px; height: 16px; border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.15);
    display: inline-block; vertical-align: middle;
}

/* ---- Paginación ----------------------------------------------- */
#navWrap {
    padding: 8px 24px;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#navWrapPie {
    padding: 12px 24px 24px;
    background: var(--c-paper);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.botonPaginacion {
    display: inline-flex; align-items: center; gap: 4px;
    height: 28px; padding: 0 10px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    border-radius: 4px;
    font-size: 12px; color: var(--c-text);
    cursor: pointer; text-decoration: none;
    user-select: none;
}
.botonPaginacion:hover { border-color: var(--c-border2); background: var(--c-surface2); }
#infoResultados {
    padding: 0 12px;
    font-size: 12px; color: var(--c-muted);
}
#dvActualizar, #dvNuevo {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
}

/* ---- Aviso de error ------------------------------------------- */
.pnlerror {
    margin: 12px 24px;
    padding: 12px 16px;
    background: #fff8d6;
    border: 1px solid #e0d27a;
    border-radius: 4px;
}
.aviso { color: #6a4f10; font-weight: 500; font-size: 13px; }

/* ---- Indicador de carga --------------------------------------- */
.infoprogresocarga {
    display: inline-block;
    margin: 12px 24px;
    padding: 8px 14px;
    background: #fff8d6;
    border: 1px solid #e0d27a;
    border-radius: 4px;
    font-size: 12px; color: #6a4f10;
}

/* ---- Estado vacío --------------------------------------------- */
.empty-state {
    padding: 80px 24px; text-align: center; color: var(--c-muted);
}
.empty-state h3 { margin: 0 0 6px; color: var(--c-text); font-weight: 600; font-size: 16px; }
.empty-state p { margin: 0; font-size: 13px; }

/* ---- Vista móvil ---------------------------------------------- */
@media screen and (max-width: 950px) {
    #searchBox { display: none; }
    #resultsToolbar { flex-wrap: wrap; }
    #cardsGrid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        margin: 12px 14px;
    }
    /* En táctil no hay hover: controles siempre visibles */
    .fotoNav, .fotoOriginal { opacity: 1; }
}