:root {
    /* Paleta de marca (tomada del logo: navy + acento magenta). El navy
       reemplaza al azul oscuro generico en topbar/menu lateral/tabs
       (superficies "estructurales"); el magenta se usa con moderacion,
       solo como acento (foco, indicador activo, linea de marca), nunca
       como relleno grande, para que no compita con los colores
       funcionales (azul/verde/rojo) que ya tienen un significado fijo
       para quien cuenta inventario (accion primaria / exito / peligro). */
    --navy: #25224d;
    --navy-suave: #363069;
    --magenta: #de1d85;
    --magenta-suave: #fce4f1;

    --azul: #1d4ed8;
    --azul-oscuro: var(--navy);
    --verde: #16a34a;
    --rojo: #dc2626;
    --gris-100: #f3f4f6;
    --gris-300: #d1d5db;
    --gris-600: #4b5563;
    --gris-800: #1f2937;
    --blanco: #ffffff;

    --sombra-tarjeta: 0 1px 2px rgba(37, 34, 77, 0.06), 0 6px 16px rgba(37, 34, 77, 0.07);
    --radio-tarjeta: 14px;
    --radio-control: 10px;
    --transicion: 0.15s ease;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--gris-100);
    color: var(--gris-800);
    min-height: 100vh;
}

/* Foco visible consistente en toda la app (accesibilidad + toque de marca):
   se ve solo al navegar con teclado, no en cada click de mouse/touch. */
:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 2px;
}

.topbar {
    background: var(--navy);
    color: var(--blanco);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--magenta);
}

.topbar .marca {
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar .marca img {
    height: 42px;
    width: auto;
    display: block;
    background: var(--blanco);
    padding: 4px 8px;
    border-radius: 6px;
}

.topbar .responsable {
    font-size: 0.85rem;
    opacity: 0.9;
}

.topbar nav {
    display: flex;
    gap: 10px;
}

.topbar a, .topbar button.link {
    color: var(--blanco);
    text-decoration: none;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color var(--transicion);
}
.topbar a:hover, .topbar button.link:hover { background: rgba(255, 255, 255, 0.22); }

.contenedor {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio-tarjeta);
    padding: 20px;
    box-shadow: var(--sombra-tarjeta);
    margin-bottom: 16px;
}

h1 { font-size: 1.4rem; margin: 0 0 6px; color: var(--navy); }
h2 { font-size: 1.1rem; margin: 0 0 12px; color: var(--navy); }
p.subtitulo { color: var(--gris-600); margin: 0 0 20px; }

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gris-600);
    margin-bottom: 6px;
    margin-top: 14px;
}
label:first-child { margin-top: 0; }

input[type=text], input[type=number], input[type=password], select {
    width: 100%;
    padding: 12px 14px;
    font-size: 1.05rem;
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-control);
    background: var(--blanco);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:hover, select:hover { border-color: #b6bcc6; }
input:focus, select:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.btn {
    display: inline-block;
    padding: 13px 18px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radio-control);
    border: none;
    cursor: pointer;
    text-align: center;
    transition: filter var(--transicion), transform 0.05s ease, box-shadow var(--transicion);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--azul); color: var(--blanco); width: 100%; margin-top: 18px; }
.btn-primario:disabled { background: var(--gris-300); cursor: not-allowed; filter: none; transform: none; }
.btn-secundario { background: var(--blanco); color: var(--gris-800); border: 1.5px solid var(--gris-300); }
.btn-secundario:hover { background: var(--gris-100); filter: none; }
.btn-exito { background: var(--verde); color: var(--blanco); }
.btn-peligro { background: var(--rojo); color: var(--blanco); }
.btn-fila { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn-fila .btn { flex: 1; margin-top: 0; }

.producto-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radio-control);
    padding: 14px;
    margin-top: 16px;
}
.producto-info .sku { color: var(--gris-600); font-size: 0.85rem; }
.producto-info .nombre { font-size: 1.1rem; font-weight: 600; margin: 4px 0; }
.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    margin-top: 6px;
}
.badge-asociado { background: #fef3c7; color: #92400e; }
.badge-conjunto { background: var(--magenta-suave); color: #9d1268; }
.badge-inactivo { background: #fee2e2; color: #991b1b; }

.aviso {
    padding: 12px 14px 12px 40px;
    border-radius: var(--radio-control);
    margin-top: 16px;
    font-size: 0.95rem;
    position: relative;
    border-left: 4px solid currentColor;
}
.aviso::before {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
}
.aviso-error { background: #fee2e2; color: #991b1b; }
.aviso-error::before { content: "✕"; }
.aviso-ok { background: #dcfce7; color: #166534; }
.aviso-ok::before { content: "✓"; }
.aviso-info { background: #fef9c3; color: #854d0e; }
.aviso-info::before { content: "ℹ"; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
th, td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--gris-300);
}
th { color: var(--navy); font-weight: 700; border-bottom-width: 2px; }
tbody tr:hover { background: var(--gris-100); }

.oculto { display: none !important; }

#lector-camara {
    width: 100%;
    margin-top: 14px;
    border-radius: var(--radio-control);
    overflow: hidden;
}

.lista-componentes { margin-top: 10px; }
.lista-componentes li { margin-bottom: 4px; }

/* ===================== Menu lateral (Contar y Administrar) =====================
   Compartido por admin.html (.layout-admin) y conteo.html (.layout-contar):
   cada pagina solo agrega su propio max-width via esa segunda clase, junto
   a esta base comun .layout-lateral. */
.layout-lateral {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.layout-lateral .contenedor {
    max-width: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
}
.menu-lateral {
    width: 190px;
    flex-shrink: 0;
    background: var(--navy);
    border-radius: var(--radio-tarjeta);
    padding: 10px;
    position: sticky;
    top: 16px;
}
.menu-lateral-toggle { display: none; }
.menu-lateral-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #dbeafe;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .9rem;
    margin-bottom: 4px;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--transicion), box-shadow var(--transicion);
}
.menu-lateral-item:hover { background: rgba(255, 255, 255, 0.1); }
.menu-lateral-item.activo {
    background: var(--navy-suave);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--magenta);
}
@media (max-width: 720px) {
    .layout-lateral { flex-direction: column; padding: 14px 12px 60px; }
    .menu-lateral { width: 100%; position: static; }
    .menu-lateral-toggle {
        display: block; width: 100%; text-align: left; background: var(--navy);
        color: #fff; border: none; padding: 10px 12px; border-radius: 8px; font-weight: 600;
    }
    .menu-lateral-items { display: none; margin-top: 8px; }
    .menu-lateral-items.abierto { display: block; }
}

/* ===================== Historial de conteos =====================
   Escritorio: tabla normal con todas las columnas.
   Movil (<= 720px): cada fila se vuelve una tarjeta compacta:
       14/10 21:01 · 770123456789        12
       NOMBRE DEL PRODUCTO (max 2 lineas) [Editar][Borrar]
   Conteo, stand, responsable y origen se ocultan en movil (siguen en los
   filtros). Editar y Borrar van uno encima del otro. */
.solo-movil { display: none; }
.btn-fila-accion { padding: 4px 8px; font-size: .75rem; }
.tabla-historial .acciones-fila { white-space: nowrap; }
.acciones-apiladas { display: flex; flex-direction: column; gap: 4px; }
.acciones-apiladas .btn { margin: 0; width: 100%; }
.conteo-cerrado { font-size: .8rem; color: var(--gris-600); white-space: nowrap; }
.tabla-historial .col-cant { font-weight: 700; }
/* Historial en escritorio: pagina mas ancha y la fecha en una sola linea. */
.contenedor-ancho { max-width: 1100px; }
.tabla-historial .col-fecha { white-space: nowrap; }
.tabla-historial .col-desc, .tabla-historial .col-sku { overflow-wrap: break-word; }
/* en escritorio, si algun dato raro (texto sin espacios) no cabe, que haga
   scroll solo la tarjeta y no toda la pagina */
.tarjeta:has(.tabla-historial) { overflow-x: auto; }

@media (max-width: 720px) {
    .solo-movil { display: inline; }
    .tabla-historial .solo-escritorio { display: none; }

    .tabla-historial thead { display: none; }
    .tabla-historial, .tabla-historial tbody { display: block; width: 100%; }
    .tabla-historial tbody tr:hover { background: none; }
    .tabla-historial tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "fecha sku  cant"
            "desc  desc acc";
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
        padding: 10px 2px;
        border-bottom: 1px solid var(--gris-300);
    }
    .tabla-historial td { display: block; padding: 0; border: 0; min-width: 0; }
    .tabla-historial td[colspan] { grid-column: 1 / -1; padding: 10px 0; }

    .tabla-historial .col-fecha { grid-area: fecha; font-size: .75rem; color: var(--gris-600); white-space: nowrap; }
    .tabla-historial .col-sku {
        grid-area: sku; font-size: .75rem; color: var(--gris-600);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tabla-historial .col-sku::before { content: "· "; }
    .tabla-historial .col-cant { grid-area: cant; font-size: 1.15rem; color: var(--navy); text-align: right; }
    .tabla-historial .col-desc {
        grid-area: desc; font-size: .9rem; font-weight: 600; line-height: 1.25;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; overflow-wrap: anywhere;
    }
    .tabla-historial .acciones-fila { grid-area: acc; display: flex; gap: 6px; }
    .tabla-historial .btn-fila-accion { padding: 8px 10px; font-size: .8rem; }
}

/* ===================== Lista de productos asignados (conteo 2/3) =====================
   Escritorio: tabla normal. Movil (<= 720px): cada producto es una tarjeta
       SKU                          Sistema 12
       NOMBRE DEL PRODUCTO
       Stand original: A2     Recuento: —
   para que la tabla de 5 columnas no desborde el ancho de la pantalla. */
@media (max-width: 720px) {
    .tabla-asignados thead { display: none; }
    .tabla-asignados, .tabla-asignados tbody { display: block; width: 100%; }
    .tabla-asignados tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "sku    sistema"
            "desc   desc"
            "stand  recuento";
        column-gap: 10px;
        row-gap: 4px;
        padding: 10px 2px;
        border-bottom: 1px solid var(--gris-300);
    }
    .tabla-asignados td { display: block; padding: 0; border: 0; min-width: 0; }
    .tabla-asignados td[colspan] { grid-column: 1 / -1; }
    .tabla-asignados .col-sku { grid-area: sku; font-size: .8rem; color: var(--gris-600); }
    .tabla-asignados .col-sistema { grid-area: sistema; font-weight: 700; text-align: right; }
    .tabla-asignados .col-desc { grid-area: desc; font-weight: 600; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
    .tabla-asignados .col-stand { grid-area: stand; font-size: .8rem; color: var(--gris-600); }
    .tabla-asignados .col-recuento { grid-area: recuento; font-size: .8rem; text-align: right; overflow-wrap: anywhere; }
    .tabla-asignados [data-etiqueta]::before { content: attr(data-etiqueta) ": "; font-weight: 400; color: var(--gris-600); }
}

.paginacion { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 0.85rem; color: var(--gris-600); }
.paginacion button { padding: 6px 10px; }