/* AnalogCams — Inventario: KPIs, tabla, tarjetas, controles, filter sheet */

/* ============================================
           STATS GRID
        ============================================ */
.stats-dashboard {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width: 680px) {
    .stats-dashboard {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 460px) {
    .stats-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: 14px 14px 12px;
    transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

@media (hover: hover) {
    .stat-card:hover {
        box-shadow:
            0 0 0 1px var(--dot-color, var(--accent)),
            0 4px 16px rgba(0, 0, 0, 0.3);
    }
}

.stat-card[role="button"] {
    cursor: pointer;
}

.stat-card[role="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.stat-card.stat-active {
    box-shadow:
        0 0 0 2px var(--dot-color, var(--accent)),
        0 4px 16px rgba(0, 0, 0, 0.3);
    background: color-mix(
        in srgb,
        var(--dot-color, var(--accent)) 8%,
        var(--bg-surface)
    );
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.stat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot-color, var(--accent));
    flex-shrink: 0;
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.stat-number {
    font-family: "DM Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--dot-color, var(--accent));
    margin-bottom: 10px;
}

.stat-bar {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    width: 100%;
    background: var(--dot-color, var(--accent));
    border-radius: 2px;
    opacity: 0.6;
    transform: scaleX(var(--bar-pct, 0));
    transform-origin: left;
    transition: transform 0.6s var(--ease-out);
}

/* ============================================
           BRAND CHART
        ============================================ */
.chart-section {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-bottom: 14px;
}

.chart-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chart-row {
    display: grid;
    grid-template-columns: 80px 1fr 32px;
    align-items: center;
    gap: 10px;
}

.chart-brand-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-track {
    height: 8px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.chart-segment {
    height: 100%;
    animation: chartReveal 0.5s var(--ease-out) both;
}
@keyframes chartReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Al volver a una pestaña ya vista (data-revealed la pone view-tabs.js al
   ocultarla), display:none→block reiniciaría la animación: no repetirla. */
[data-revealed] .chart-segment {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .chart-segment {
        animation: none;
    }
    .stat-bar-fill {
        transition: none;
    }
}

.chart-segment:first-child {
    border-radius: 4px 0 0 4px;
}
.chart-segment:last-child {
    border-radius: 0 4px 4px 0;
}
.chart-segment:only-child {
    border-radius: 4px;
}

.chart-count {
    font-family: "DM Mono", monospace;
    font-size: 0.72rem;
    color: var(--text-faint);
    text-align: right;
}

/* ============================================
           BARRA DE CONTROLES
        ============================================ */
.controls-bar {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}


.btn {
    cursor: pointer;
    font-weight: 500;
    transition:
        border-color 0.15s var(--ease-out),
        box-shadow 0.15s var(--ease-out),
        background 0.15s var(--ease-out),
        transform 0.08s var(--ease-out);
}

@media (hover: hover) {
    /* Excluir familias con hover propio (sólidos, pills, iconos, ghost, barras). */
    .btn:hover:not(:is(
        .ac-btn-solid,
        [class*="ac-btn-pill"],
        .ac-icon-danger-btn,
        .ac-icon-success-btn,
        .ac-icon-accent-btn,
        [class*="ac-btn-ghost"],
        .ac-btn-toolbar,
        .ac-btn-icon-overlay,
        .ac-btn-tint-accent,
        .ac-btn-menu-trigger,
        .ac-segment-btn,
        .icon-btn,
        .btn-accent,
        .btn-muted,
        .btn-danger
    )) {
        border-color: var(--accent);
        background: var(--accent-dim);
        color: var(--accent);
    }
}

.btn:active {
    transform: scale(0.97);
}

.stat-card[role="button"]:active {
    transform: scale(0.98);
}

.btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}


.icon-btn {
    padding: 6px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn svg {
    width: var(--ac-icon-md);
    height: var(--ac-icon-md);
}

/* Puntero táctil: más área de pulsación en los botones del encabezado.
   14px de padding + 15px de icono + borde ≈ 45px de objetivo (mínimo
   recomendado 44px; con 11px se quedaba en ~37px). */
@media (pointer: coarse) {
    .header-right .icon-btn {
        padding: 14px;
        min-width: 44px;
        min-height: 44px;
    }
    .controls-bar .icon-btn {
        padding: 14px;
        min-width: 44px;
        min-height: 44px;
    }
}


.btn-group-views {
    display: flex;
    gap: 4px;
    padding-right: 0;
    border-right: none;
}

.btn-group-theme {
    display: flex;
    gap: 4px;
}

.controls-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-reset-btn {
    flex-shrink: 0;
}

.table-view-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1024px;
    margin: 0 auto 8px;
    padding: 0 2px;
    min-height: 28px;
}

.table-view-toolbar[hidden] {
    display: none;
}

.table-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.table-group-toggle input[type="checkbox"] {
    width: 13px;
    height: 13px;
    padding: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

.controls-right {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

/* ============================================
           BADGES (pill con dot)
        ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.st-ok {
    background: var(--ok-bg);
    color: var(--ok-tx);
}
.st-warn {
    background: var(--warn-bg);
    color: var(--warn-tx);
}
.st-err {
    background: var(--err-bg);
    color: var(--err-tx);
}
.st-pend {
    background: var(--pend-bg);
    color: var(--pend-tx);
}
.st-repair {
    background: var(--repair-bg);
    color: var(--repair-tx);
}

/* ============================================
           TABLA
        ============================================ */
.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    white-space: nowrap;
}

thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
}

th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

th.active {
    color: var(--accent);
}

@media (hover: hover) {
    th:hover {
        color: var(--accent);
    }
}
th .sort-icon {
    margin-left: 3px;
    opacity: 0.35;
    font-size: 0.6rem;
}
th.active .sort-icon {
    opacity: 1;
}
th:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-main);
    font-size: 0.875rem;
}

tbody tr:last-child td {
    border-bottom: none;
}

@media (hover: hover) {
    tbody tr:hover {
        background: var(--bg-hover);
    }
}

tbody tr.urgent {
    background: color-mix(in srgb, var(--err-color) 5%, transparent);
}
tbody tr.has-film {
    background: color-mix(in srgb, var(--warn-color) 5%, transparent);
}

.col-brand {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-faint);
}

.col-model {
    font-weight: 500;
}

.col-serial {
    font-family: "DM Mono", monospace;
    font-size: 0.78rem;
    color: var(--text-faint);
}

.col-notes {
    /* Mismo tamaño que los badges de estado/velocidades de la fila: el
       texto de observaciones destacaba por ser visiblemente más grande
       que los badges y que los chips .cam-tag de la misma celda. */
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: normal;
    min-width: 180px;
    max-width: 380px;
    line-height: 1.4;
    text-wrap: pretty;
}
.col-notes .cam-tag {
    font-size: 0.7rem;
}

/* ============================================
           VISTA CARDS
        ============================================ */
.view-table {
    display: block;
}
.view-cards {
    display: none;
}
body.cards-mode .view-table {
    display: none;
}
body.cards-mode .view-cards {
    display: block;
}

.cards-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    .cards-view {
        grid-template-columns: 1fr;
    }
}

.camera-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
    position: relative;
}

@media (hover: hover) {
    .camera-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
}

.camera-card.urgent {
    border-color: var(--err-bd);
}
.camera-card.has-film {
    border-color: var(--warn-bd);
}

.card-status-stripe {
    height: 4px;
    width: 100%;
}

.card-body {
    padding: 14px 15px 15px;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.card-header {
    flex: 1;
    min-width: 0;
}

.card-brand {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-bottom: 2px;
}

.card-model {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-serial {
    font-family: "DM Mono", monospace;
    font-size: 0.7rem;
    color: var(--text-faint);
    margin-top: 3px;
}

.card-status-badge {
    flex-shrink: 0;
    margin-left: 10px;
}

.card-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 12px 0;
}

.card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.card-info-row > span:first-child {
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.card-notes {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

/* Bloque de etiquetas en tarjetas: micro-título de sección para que los
   chips no se lean como observaciones */
.card-tags-block {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.card-tags-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 5px;
}
.card-tags-block .cam-tags {
    margin-top: 0;
}

/* ============================================
           GRUPOS POR MARCA
        ============================================ */
.grouped-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1024px;
    margin: 0 auto;
    background: transparent;
    overflow: visible;
}

.brand-group {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.brand-group-header {
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.brand-group.collapsed .brand-group-header {
    border-radius: var(--radius-lg);
}

@media (hover: hover) {
    .brand-group-header:hover {
        background: var(--bg-hover);
    }
}
.brand-group-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.brand-group-count {
    font-family: "DM Mono", monospace;
    font-size: 0.7rem;
    color: var(--text-faint);
    font-weight: 400;
}

.brand-group-content {
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.brand-group.collapsed .brand-group-content {
    display: none;
}
.brand-group-content thead {
    background: var(--bg-raised);
}

/* ============================================
           EMPTY STATE
        ============================================ */
.empty-state {
    text-align: center;
    padding: 52px 24px;
    color: var(--text-faint);
    font-size: 0.9rem;
}

/* En la vista de tarjetas (grid), el mensaje vacío debe ocupar todas las columnas */
.cards-view .empty-state {
    grid-column: 1 / -1;
}

/* ============================================
           RESPONSIVE
        ============================================ */
@media (max-width: 768px) {
    /* Patrón Mail/Files: buscador + botón de filtro en una sola fila (el
       botón ya no vive solo, apilado debajo con un hueco al lado — ver
       .filter-sheet-btn más abajo, ahora un icono circular junto al
       buscador en vez de un pill de texto separado). .controls-right ya
       no aporta nada en móvil (su único contenido, reset ⟳ y el switcher
       de vistas, está oculto más abajo). */
    .controls-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .search-box {
        flex: 1;
        min-width: 0;
        min-height: var(--ac-filter-h, 44px);
    }
    .controls-right {
        display: none;
    }
}

/* ============================================
           ANIMACIONES
        ============================================ */
@media (prefers-reduced-motion: no-preference) {
    tbody tr {
        animation: rowIn 0.1s ease-out both;
    }
    .camera-card {
        animation: cardIn 0.12s ease-out both;
    }
    .chart-segment {
        animation: barIn 0.4s ease-out;
        transform-origin: left center;
    }

    @keyframes rowIn {
        from {
            opacity: 0;
            transform: translateY(-2px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    @keyframes cardIn {
        from {
            opacity: 0;
            transform: translateY(4px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    @keyframes barIn {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }
}

/* ============================================
   ETIQUETAS (tags) — visualización en tabla y tarjetas
============================================ */
.cam-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.cam-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: var(--accent-dim);
    color: var(--accent);
}



/* ============================================
   FICHA LATERAL (drawer) de cámara — solo lectura
============================================ */
.cam-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: var(--z-scrim);
}
.cam-scrim.on {
    opacity: 1;
    pointer-events: auto;
}
.cam-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 420px;
    max-width: 92vw;
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    box-shadow: -1px 0 0 var(--border);
    transform: translateX(100%);
    transition: transform 0.26s var(--ease-out);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
}
.cam-drawer.on {
    transform: none;
}
.cam-drawer-head {
    position: relative;
    padding: 22px 56px 22px 24px;
    border-bottom: 1px solid var(--border-subtle);
}
.cam-drawer-close {
    position: absolute;
    top: 18px;
    right: 18px;
}
.cam-drawer-brand {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.cam-drawer-model {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 2px 0 12px;
}
.cam-drawer-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cam-drawer-sn {
    font-family: "DM Mono", monospace;
    font-size: 0.78rem;
    color: var(--text-faint);
}
.cam-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
}
.cam-pill.ok { color: var(--ok-tx); background: var(--ok-bg); }
.cam-pill.warn { color: var(--warn-tx); background: var(--warn-bg); }
.cam-pill.err { color: var(--err-tx); background: var(--err-bg); }
.cam-pill.repair { color: var(--repair-tx); background: var(--repair-bg); }
.cam-pill.pend { color: var(--pend-tx); background: var(--pend-bg); }
.cam-drawer-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.cam-fgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cam-field {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 11px;
    padding: 12px 14px;
}
.cam-full {
    grid-column: 1 / -1;
}
/* Con "Año de lanzamiento" presente hay 5 campos + Observaciones (6 hijos):
   la rejilla de 2 columnas dejaba el 5º colgando con un hueco al lado. El
   primero (Año) pasa a fila completa cuando el total es par — como fila de
   metadatos de cabecera — y los 4 restantes forman un 2×2 exacto. Sin año
   (5 hijos, total impar) la regla no aplica y el 2×2 ya sale solo. */
.cam-fgrid .cam-field:first-child:nth-last-child(even) {
    grid-column: 1 / -1;
}
.cam-k {
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.cam-v {
    font-size: 0.98rem;
    font-weight: 600;
}
.cam-v.cam-notes {
    font-weight: 400;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.55;
    text-wrap: pretty;
}
.cam-sectit {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    margin: 20px 0 8px;
}
.cam-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
/* "Sin etiquetas" en la ficha lateral: único span sin clase .cam-tag que
   queda en un contenedor .cam-tags (no es una etiqueta real, no debe verse
   como un pill acento). */
.cam-drawer-body .cam-tags .cam-empty {
    color: var(--text-faint);
    opacity: 0.6;
}
.cam-hint {
    margin-top: 20px;
    font-size: 0.78rem;
    color: var(--text-faint);
}
/* Indicar que las filas/tarjetas son pulsables (modo vista) */
body:not(.edit-mode) tbody tr[data-serial] { cursor: pointer; }

/* ============================================
   Pulido KPIs + cabecera (look más limpio/plano)
============================================ */
.stat-bar { display: none; }
.stat-card {
    padding: 13px 15px;
    border-radius: var(--radius-md);
}
.stat-number {
    margin-bottom: 0;
    font-size: 1.75rem;
}
.app-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
}

/* ============================================
   MÓVIL — inventario sin scroll lateral
   (Tabla y Tablero implican scroll horizontal: se ocultan;
    en su lugar se usa la vista de Tarjetas, apilada en vertical.)
============================================ */
/* Botón «Filtrar» solo en móvil (ver @media max-width 768px más abajo).
   Solo icono, junto al buscador en la misma fila (patrón Mail/Files: campo
   de búsqueda + botón de filtro adyacente) — antes era un pill con texto
   que vivía solo, apilado debajo del buscador. El conteo de filtros activos
   va en una insignia numérica sobre el icono, no en el texto del botón. */
.filter-sheet-btn {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: var(--ac-filter-h, 44px);
    height: var(--ac-filter-h, 44px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bg-raised);
    color: var(--text-main);
    flex: 0 0 auto;
}
.filter-sheet-btn svg {
    width: var(--ac-icon-lg);
    height: var(--ac-icon-lg);
    flex: 0 0 auto;
}
/* Con filtros activos: icono tintado accent (estilo iOS), no borde */
.filter-sheet-btn--active {
    background: var(--accent-dim);
    color: var(--accent);
}
.filter-sheet-btn-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-body);
}

@media (max-width: 768px) {
    #tableViewBtn {
        display: none;
    }
    /* En móvil los filtros van al sheet; la barra solo muestra búsqueda + botón */
    .controls-filters {
        display: none;
    }
    .filter-sheet-btn {
        display: inline-flex;
    }
    .filter-active-banner {
        margin-bottom: 10px;
    }
}
tbody tr:focus-visible > td {
    outline: none;
    background: rgba(var(--accent-rgb), 0.06);
}
tbody tr:focus-visible > td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}
.camera-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent);
}
/* ── KPIs como tiles "bento" compactos ── */
.stats-dashboard {
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin: 0 auto 14px;
    /* Misma columna de contenido que gráfico/toolbar/listas: la fila de
       KPIs a 1100px sobresalía 38px por cada lado respecto a todo lo demás. */
    max-width: 1024px;
}
@media (max-width: 680px) {
    .stats-dashboard { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 460px) {
    .stats-dashboard { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
    background: var(--bg-surface);
    border: none;
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
@media (hover: hover) {
    .stat-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    }
}
.stat-header { margin-bottom: 7px; order: 1; }
.stat-dot { width: 8px; height: 8px; }
.stat-label {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: -0.01em;
}
.stat-number {
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--text-main);
    margin: 0;
    order: 2;
}
.stat-bar { display: none; }
.stat-card.stat-active {
    box-shadow: 0 0 0 2px var(--accent);
    background: var(--bg-surface);
}
.stat-card--empty {
    opacity: 0.55;
    cursor: default;
}
.stat-card--empty[role="button"]:hover {
    transform: none;
    box-shadow: none;
}

/* ── Gráfica por marca dentro de tarjeta (compacta) ── */
.chart-section {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin: 0 auto 14px;
    border: none;
    max-width: 1024px;
}

/* ── Controles flotantes — sin fondo de contenedor, sin bordes ── */
.controls-bar {
    max-width: 1024px;
    margin: 0 auto 12px;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border: none;
    background: transparent;   /* flota directo sobre el fondo negro */
}
/* Search: layout en barra de controles (apariencia en .ac-search-input). */
.search-box {
    flex: 1;
    min-width: 220px;
}
/* Selects tipo píldora: sizing en components.css (--ac-filter-h) */
.select-pill:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* Banner de filtros activos (inventario) */
.filter-active-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 1024px;
    margin: 0 auto 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}
.filter-active-banner[hidden] {
    display: none;
}
.filter-active-banner.is-empty {
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.28);
    color: var(--text-main);
}
.filter-active-banner-text {
    flex: 1;
    min-width: 0;
}
.filter-active-banner-clear {
    flex-shrink: 0;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
@media (hover: hover) {
    .filter-active-banner-clear:hover {
        background: rgba(var(--accent-rgb), 0.22);
    }
}
.btn.icon-btn {
    border-radius: 50%;
    background: var(--bg-raised);
    border: none;
}
/* ac-close-btn: ver assets/css/components.css */
/* Estado activo (p. ej. modo edición ON) — este bloque debe ir después de
   .btn.icon-btn: misma cascada que pisaba el .btn.active genérico de arriba. */
.btn.icon-btn.active {
    background: var(--accent);
    color: #fff;
}
.btn-group-views {
    background: var(--bg-raised);
    border-radius: 980px;
    padding: 3px;
    border: none;
}
.btn-group-views .btn.icon-btn {
    border: none;
    background: transparent;
    border-radius: 980px;
}
.btn-group-views .btn.icon-btn.active {
    background: var(--accent);
    color: #fff;
}

/* ── Tabla sin borde exterior — mismo tratamiento que recipe-card / news-card ── */
.table-wrapper {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: none;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 1024px;
    margin: 0 auto;
}
thead th {
    background: transparent;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: -0.01em;
    padding: 9px 16px;
}
tbody td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px 16px;
}
tbody tr:last-child td { border-bottom: none; }
/* ── Dashboard colapsable ── */
.dashboard-section {
    max-width: 1024px; /* misma columna que KPIs/gráfico/toolbar/listas */
    margin: 0 auto 14px;
}
.dashboard-toggle {
    display: none;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-main);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    transition: background 0.15s var(--ease-out), transform 0.12s var(--ease-out);
}
.dashboard-toggle:focus {
    outline: none;
}
.dashboard-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (hover: hover) {
    .dashboard-toggle:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}
.dashboard-toggle:active {
    background: rgba(var(--accent-rgb), 0.14);
    transform: scale(0.99);
}
.dashboard-toggle[aria-expanded="true"] {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.28);
}
.dashboard-toggle-hint {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.dashboard-scope-note {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}
@media (max-width: 768px) {
    .dashboard-toggle {
        display: flex;
        margin-bottom: 10px;
    }
    .dashboard-section {
        margin-bottom: 22px;
    }
    .dashboard-body {
        margin-bottom: 8px;
    }
    .dashboard-section.is-collapsed .dashboard-body {
        display: none;
    }
    .controls-bar {
        margin-top: 6px;
        margin-bottom: 20px;
        /* Espacio horizontal buscador↔botón de filtro (misma fila). */
        gap: 10px;
    }
    /* Debe re-declararse AQUÍ (después de la regla .search-box de
       "controles flotantes", que pone min-width: 220px sin media query):
       a igual especificidad gana la última, y el min-width: 0 del bloque
       móvil de arriba perdía — a 320px el buscador no podía encoger y
       empujaba el botón de filtro a una segunda fila. */
    .search-box {
        min-width: 0;
    }
    .view-cards,
    body.brand-mode .brand-panel {
        margin-top: 4px;
    }
    body.brand-mode .brand-panel .timeline {
        padding-top: 4px;
    }
}

.empty-state-clear {
    display: block;
    margin: 10px auto 0;
}

/* ── Drawer edit CTA ── */
.cam-drawer-actions {
    margin-top: 16px;
    text-align: center;
}
.cam-drawer-edit {
    width: 100%;
    min-height: 44px;
    font-weight: 600;
}
/* ── Sheet de filtros (inventario móvil) ── */
.filter-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.filter-sheet[hidden] {
    display: none;
}
.filter-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}
.filter-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: min(85vh, 560px);
    background: var(--bg-raised);
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: filterSheetIn 0.28s var(--ease-out);
}
@keyframes filterSheetIn {
    from { transform: translateY(100%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}
.filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
    border-bottom: 1px solid var(--border);
}
.filter-sheet-header h2 {
    font-size: 1.05rem;
    font-weight: 600;
}
.filter-sheet-body {
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.filter-sheet-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.filter-sheet-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.filter-sheet-field .select-pill {
    width: 100%;
}
.filter-sheet-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
}
.filter-sheet-footer .btn {
    flex: 1;
    min-height: 44px;
}

/* Toast: ver assets/css/components.css */

/* Movimiento reducido: los paneles deslizantes aparecen sin desplazamiento.
   Va al FINAL del archivo a propósito — las reglas base (.cam-drawer,
   .cam-scrim, .filter-sheet-panel) tienen la misma especificidad y en un
   empate gana la última en la cascada. Son los movimientos grandes (no los
   chips) los que más afectan a usuarios con sensibilidad vestibular. */
@media (prefers-reduced-motion: reduce) {
    .cam-drawer,
    .cam-scrim,
    .filter-sheet-panel {
        transition: none;
        animation: none;
    }
}