/**
 * Módulo Alertas - Productos por vencer, vencidos, próximos a agotarse
 * Mobile-first para consulta rápida de existencias en campo.
 */

@layer feature-modules {
.alertas-container.container {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.alertas-filters {
    margin-bottom: var(--space-lg);
}

.alertas-filters-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
}

.alertas-filter-hint {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.45;
}

.alertas-search-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg-card);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.alertas-tabs-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.alertas-tabs-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.alertas-tabs-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.alertas-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.alertas-tab {
    position: relative;
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;
    background: var(--color-surface-muted, var(--color-bg-elevated));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: left;
}

.alertas-tab:hover {
    color: var(--color-text);
    border-color: var(--color-primary-muted);
}

.alertas-tab-active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-muted);
    font-weight: var(--font-weight-semibold, 600);
}

.alertas-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: var(--space-xs);
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold, 600);
    background: var(--color-text-muted);
    color: var(--color-bg-card);
    vertical-align: middle;
}

.alertas-tab-badge[hidden],
.alertas-tab-badge:empty {
    display: none !important;
}

.alertas-tab-badge--warn {
    background: var(--color-danger);
    color: #fff;
}

.alertas-tabs-more {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
}

.alertas-tabs-more summary {
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-muted);
    list-style: none;
}

.alertas-tabs-more summary::-webkit-details-marker {
    display: none;
}

.alertas-tabs-more-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.alertas-panel h2 {
    margin-top: 0;
    font-size: clamp(1.05rem, 3.5vw, 1.25rem);
}

.alertas-desc {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-md);
}

.alertas-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.alertas-cards {
    display: none;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.alertas-stock-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    background: var(--color-bg-card);
}

.alertas-stock-card--danger {
    border-color: var(--color-danger);
    background: var(--color-danger-muted);
}

.alertas-stock-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.alertas-stock-card-code {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted);
}

.alertas-stock-card-name {
    margin: 0 0 var(--space-xs);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
}

.alertas-stock-card-qty {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.alertas-stock-card-qty--low {
    color: var(--color-danger);
}

.alertas-stock-card-badge {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold, 600);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-warning-muted, var(--color-primary-muted));
    color: var(--color-text);
    white-space: nowrap;
}

.alertas-stock-card-badge--danger {
    background: var(--color-danger);
    color: #fff;
}

.alertas-stock-card-meta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.alertas-card-actions,
.alertas-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.alertas-actions-cell {
    margin-top: 0;
    min-width: 9rem;
}

.alertas-th-check,
.alertas-td-check {
    width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}

.alertas-th-check input,
.alertas-td-check input,
.alertas-card-check input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.alertas-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-muted, var(--color-bg-elevated));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.alertas-bulk-count {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold, 600);
}

.alertas-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.alertas-card-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.alertas-compras-admin {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted, var(--color-bg-elevated));
}

.alertas-compras-admin-title {
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

.alertas-compras-admin-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.alertas-compras-admin-row .input-group {
    margin-bottom: 0;
}

.alertas-compras-admin-row .alertas-compras-admin-action {
    flex-shrink: 0;
}

.alertas-compras-admin-action-label {
    visibility: hidden;
    user-select: none;
}

.alertas-compras-admin-action .btn {
    width: 100%;
    white-space: nowrap;
}

.alertas-tag {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.alertas-tag--muted {
    background: var(--color-surface-muted, var(--color-bg-elevated));
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .alertas-compras-admin-row {
        flex-direction: row;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .alertas-compras-admin-row .input-group:not(.alertas-compras-admin-action) {
        flex: 1 1 200px;
        min-width: 0;
    }

    .alertas-compras-admin-action .btn {
        width: auto;
    }
}

.alertas-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.alertas-row-vencido {
    background: var(--color-danger-muted);
}

.alertas-empty,
.alertas-loading {
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-text-muted);
}

.alertas-comp-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.alertas-comp-wrap {
    position: relative;
    min-width: 0;
}

.alertas-comp-wrap .input {
    width: 100%;
}

.alertas-comp-btn-wrap {
    align-self: stretch;
}

.alertas-comp-btn-wrap .btn {
    width: 100%;
    min-height: 44px;
}

.alertas-comp-sug {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--shadow-md);
    z-index: 100;
}

.alertas-comp-sug-item {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--text-sm);
    min-height: 44px;
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--color-text);
    font-family: inherit;
    line-height: inherit;
}

button.alertas-comp-sug-item {
    appearance: none;
    -webkit-appearance: none;
}

.alertas-comp-sug-item:hover,
.alertas-comp-sug-item:focus-visible {
    background: var(--color-primary-muted);
    outline: none;
}

.alertas-comp-sug-empty {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.alertas-comp-sug-add-libre {
    border-top: 1px solid var(--color-border);
    font-style: normal;
    font-weight: 500;
    color: var(--color-info, #0ea5e9);
    background: color-mix(in srgb, var(--color-info, #0ea5e9) 12%, transparent);
}

button.alertas-comp-sug-item.alertas-comp-sug-add-libre:hover,
button.alertas-comp-sug-item.alertas-comp-sug-add-libre:focus-visible {
    background: color-mix(in srgb, var(--color-info, #0ea5e9) 22%, transparent);
    color: var(--color-info, #0ea5e9);
}

.alertas-comp-sug-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-right: var(--space-xs);
}

.alertas-comp-hints {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated, var(--color-bg-card));
    font-size: var(--text-sm);
}

.alertas-comp-hints p {
    margin: 0 0 var(--space-sm);
}

.alertas-comp-hints p:last-child {
    margin-bottom: 0;
}

.alertas-comp-hint-title {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text);
}

.alertas-comp-best {
    background: var(--color-primary-muted);
}

.alertas-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-radius: 4px;
    margin-left: var(--space-xs);
}

.alertas-var-subida {
    color: var(--color-danger);
    font-weight: var(--font-weight-medium, 500);
}

.alertas-var-bajada {
    color: var(--color-success);
    font-weight: var(--font-weight-medium, 500);
}

/* Móvil: tarjetas en lugar de tabla para stock */
@media (max-width: 767px) {
    .alertas-panel--cards-mobile .alertas-cards {
        display: flex;
    }

    .alertas-panel--cards-mobile .alertas-table-wrap {
        display: none;
    }

    .alertas-filters-row .btn {
        width: 100%;
        min-height: 44px;
    }

    .alertas-card-actions .btn,
    .alertas-actions-cell .btn {
        flex: 1 1 auto;
        min-height: 40px;
    }
}

@media (min-width: 768px) {
    .alertas-filters-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .alertas-filter-dias {
        max-width: 180px;
    }

    .alertas-filter-almacen {
        min-width: 200px;
    }

    .alertas-tabs {
        gap: var(--space-sm);
    }

    .alertas-tab {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        min-height: auto;
    }

    .alertas-tab-active {
        background: none;
        border-bottom-color: var(--color-primary);
    }

    .alertas-tabs-more {
        border: none;
        padding: 0;
    }

    .alertas-tabs-more summary {
        display: none;
    }

    .alertas-tabs-more-inner {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-xl);
        margin-top: 0;
    }

    .alertas-comp-row {
        flex-direction: row;
        align-items: flex-end;
    }

    .alertas-comp-wrap {
        flex: 1;
        max-width: 420px;
    }

    .alertas-comp-btn-wrap {
        align-self: flex-end;
    }

    .alertas-comp-btn-wrap .btn {
        width: auto;
    }
}

}