/* public/css/custom.css - Estilos personalizados para StockProyect */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
    /* Sidebar palette (mockup) */
    --bg: #0A0E1A;
    --surface: #121A2C;
    --surface-hover: rgba(23, 32, 53, 0.7);
    --border: rgba(255, 255, 255, 0.07);
    --accent: #5B8DEF;
    --accent-soft: rgba(91, 141, 239, 0.14);
    --text: #E7EAF1;
    --text-muted: #7C879E;
    --text-faint: #454E63;
    --radius: 10px;

    /* App palette (kept for content area) */
    --sp-primary: #0f172a;
    --sp-accent: #2563eb;
    --sp-accent-hover: #1d4ed8;
    --sp-bg-light: #f8fafc;
    --sp-card-border: #e2e8f0;

    /* Sidebar dimensions */
    --sidebar-w: 236px;
    --sidebar-w-collapsed: 68px;
    --topbar-h: 56px;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--sp-bg-light);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #334155;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT WRAPPER
═══════════════════════════════════════════════════════════════ */
.wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — BASE (shared desktop + mobile)
═══════════════════════════════════════════════════════════════ */
#sidebar {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.18s ease;
    /* Desktop: sticky */
    position: sticky;
    top: 0;
    width: var(--sidebar-w);
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--text-faint) transparent;
}

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 2px; }

/* ── Brand row ── */
.brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
    flex-shrink: 0;
}

.brand-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-text {
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.brand-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.brand-sub {
    font-size: 11.5px;
    color: var(--text-faint);
    margin-top: 1px;
}

.collapse-btn {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.18s ease;
}

.collapse-btn:hover {
    background: var(--surface);
    color: var(--text-muted);
}

/* ── Nav ── */
.sidebar-nav {
    padding: 6px 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

#sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
}

#sidebar .nav-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

#sidebar .nav-item:hover {
    background: var(--surface);
    color: var(--text);
}

#sidebar .nav-item.active {
    background: var(--accent-soft);
    color: var(--text);
}

#sidebar .nav-item.active svg {
    color: var(--accent);
}

#sidebar .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

/* Section headings */
.nav-section {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 16px 12px 6px;
    white-space: nowrap;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — COLLAPSED STATE (desktop ≥ 768px)
═══════════════════════════════════════════════════════════════ */
#sidebar.sidebar--collapsed {
    width: var(--sidebar-w-collapsed);
}

#sidebar.sidebar--collapsed .brand-text,
#sidebar.sidebar--collapsed .nav-item span {
    display: none;
}

#sidebar.sidebar--collapsed .brand-row {
    justify-content: center;
    padding: 18px 8px 14px;
}

#sidebar.sidebar--collapsed .collapse-btn {
    display: none; /* hidden; the topbar toggle shows instead in collapsed rail */
}

#sidebar.sidebar--collapsed .nav-item {
    justify-content: center;
    padding: 9px 0;
}

#sidebar.sidebar--collapsed .nav-section {
    padding: 14px 4px 6px;
    text-align: center;
}

#sidebar.sidebar--collapsed .nav-section span {
    display: none;
}

#sidebar.sidebar--collapsed .nav-section::after {
    content: "·";
    color: var(--text-faint);
}

/* Collapsed: show expand button inside brand row */
#sidebar.sidebar--collapsed .brand-row .collapse-btn {
    display: flex;
    transform: rotate(180deg);
    margin-left: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════════ */
#content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Smooth width adjustment when sidebar collapses */
    transition: margin-left 0.18s ease;
}

/* ── In-page topbar (page title + user info) ── */
.main-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--sp-card-border);
    padding: 14px 24px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE TOPBAR (visible < 768px only)
═══════════════════════════════════════════════════════════════ */
.sp-topbar {
    display: none; /* shown via media query below */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    z-index: 200;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 12px;
    padding: 0 16px;
}

.sp-topbar .brand-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.hamburger-btn {
    /* 40 px y no 32: son los dos unicos controles de la barra movil -abrir el
       menu y la cuenta- y a 32 px el dedo falla. El icono sigue siendo del
       mismo tamano; lo que crece es la zona que responde al toque. */
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--surface);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.hamburger-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ── Backdrop for mobile drawer ── */
.sp-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 149;
    cursor: pointer;
}

.sp-backdrop.active {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (< 768px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Show mobile topbar */
    .sp-topbar {
        display: flex;
    }

    /* Push content below topbar */
    #content {
        padding-top: var(--topbar-h);
    }

    /* Sidebar becomes a fixed drawer */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 250px !important; /* override collapsed/expanded vars */
        height: 100%;
        z-index: 150;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        /* Reset sticky from desktop */
    }

    /* Open state */
    #sidebar.drawer-open {
        transform: translateX(0);
    }

    /* Hide the collapse button in drawer mode */
    .collapse-btn {
        display: none !important;
    }

    /* Show all labels in drawer (never collapsed) */
    #sidebar.sidebar--collapsed .brand-text,
    #sidebar.sidebar--collapsed .nav-item span {
        display: revert;
    }

    #sidebar.sidebar--collapsed .brand-row {
        justify-content: flex-start;
        padding: 18px 16px 14px;
    }

    #sidebar.sidebar--collapsed .nav-item {
        justify-content: flex-start;
        padding: 9px 10px;
    }

    #sidebar.sidebar--collapsed .nav-section {
        padding: 16px 12px 6px;
        text-align: left;
    }

    #sidebar.sidebar--collapsed .nav-section span {
        display: inline;
    }

    #sidebar.sidebar--collapsed .nav-section::after {
        content: "";
    }

    /* Remove wrapper flex-row; sidebar is out of flow */
    .wrapper {
        display: block;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP (≥ 768px) — ensure mobile topbar is hidden
═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .sp-topbar {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT AREA COMPONENTS
═══════════════════════════════════════════════════════════════ */
.card-custom {
    background: #ffffff;
    border: 1px solid var(--sp-card-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.table-custom th {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Badges de Estado */
.badge-activo {
    background-color: #dcfce7;
    color: #166534;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-inactivo {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Vista Árbol de Áreas */
.area-tree-card {
    border-left: 4px solid var(--sp-accent);
    margin-bottom: 12px;
}

.subarea-list {
    margin-left: 28px;
    border-left: 2px dashed #cbd5e1;
    padding-left: 16px;
}

.subarea-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD COMPACTION & COMPONENT STYLES
═══════════════════════════════════════════════════════════════ */
/* KPI Card compact layout */
.kpi-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.kpi-body {
    padding: 12px 14px;
}

.kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kpi-icon-sm {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}

/* Merma list representation (1-2 categories) */
.merma-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.merma-lista-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.merma-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.merma-nombre {
    font-weight: 500;
    color: #1e293b;
    min-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merma-barra-wrap {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.merma-barra {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.merma-monto {
    color: #0f172a;
    font-size: 0.9rem;
    white-space: nowrap;
}

.merma-casos {
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Date filter responsive visibility */
.dash-filter-desktop {
    display: block;
}

.dash-filter-mobile {
    display: none;
}

@media (max-width: 767px) {
    /* Hide desktop in-page topbar on mobile to save vertical space */
    .main-topbar {
        display: none !important;
    }

    /* Switch date filter to mobile dropdown mode */
    .dash-filter-desktop {
        display: none !important;
    }
    .dash-filter-mobile {
        display: block !important;
    }

    /* KPI grid in 2 columns on mobile */
    .kpi-grid {
        display: flex;
        flex-wrap: wrap;
    }

    .kpi-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   INVENTARIO POR UBICACIÓN — TREE ROWS COMPACT STYLES
═══════════════════════════════════════════════════════════════ */
.area-tree-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.area-tree-row {
    background: #ffffff;
    border: 1px solid var(--sp-card-border);
    border-radius: 8px;
    padding: 10px 14px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.area-tree-row:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.area-tree-row-sub {
    border-left: 3px solid var(--accent);
    background: #fafafa;
}

.area-tree-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.area-tree-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.area-tree-meta {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
}

.area-tree-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.area-tree-actions .btn-chevron[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.area-tree-actions .btn-chevron i {
    transition: transform 0.2s ease;
}

.area-tree-detail {
    background: #ffffff;
    border: 1px solid var(--sp-card-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -6px;
    margin-bottom: 6px;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 767px) {
    .area-tree-row {
        padding: 8px 10px;
    }
    .area-tree-row-sub-wrapper {
        margin-left: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL SALIDAS / TRASLADOS — SEARCH AUTOCOMPLETE & MOBILE CARDS
═══════════════════════════════════════════════════════════════ */
.product-search-container {
    position: relative;
    width: 100%;
}

.product-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    padding: 4px 0;
}

.product-item-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #1e293b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s ease;
}

.product-item-option:last-child {
    border-bottom: none;
}

.product-item-option:hover,
.product-item-option.active-item {
    background-color: #f1f5f9;
    color: var(--sp-primary);
}

.product-item-option .item-sku {
    font-weight: 700;
    font-family: monospace;
    color: var(--accent);
}

.product-item-option .item-stock {
    font-size: 0.775rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 2px 6px;
    border-radius: 12px;
    white-space: nowrap;
}

/* Tarjeta editable de línea de producto en mobile (< 768px) */
.salida-linea-card {
    background: #ffffff;
    border: 1px solid var(--sp-card-border);
    border-radius: 10px;
    padding: 14px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.salida-linea-card .btn-remove-line {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Desplegable buscable (App.enhanceSelect)
   Sustituye visualmente a un <select> nativo, que queda oculto pero sigue
   siendo la fuente de la verdad del valor seleccionado.
   ═══════════════════════════════════════════════════════════════════════ */
.sp-select { position: relative; }

/* El select real: fuera de la vista pero accesible para el código y los forms */
.sp-select .sp-select-native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.sp-select__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-select__trigger:hover  { border-color: #94a3b8; }
.sp-select__trigger:focus,
.sp-select__trigger:focus-visible {
    outline: none;
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}
.sp-select__trigger.is-placeholder .sp-select__label { color: #94a3b8; }

.sp-select__icon  { color: #94a3b8; flex-shrink: 0; font-size: .95rem; }
.sp-select__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sp-primary);
}

.sp-select__panel {
    display: none;
    position: absolute;
    z-index: 1080;              /* por encima del contenido de un modal */
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--sp-card-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, .22);
    overflow: hidden;
}
.sp-select__panel.is-open { display: block; }
.sp-select__panel.is-up   { top: auto; bottom: calc(100% + 4px); }

.sp-select__search {
    position: relative;
    padding: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.sp-select__search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: .85rem;
    pointer-events: none;
}
.sp-select__search input { padding-left: 30px; }

.sp-select__list {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
}

.sp-select__opt {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    text-align: left;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--sp-primary);
    cursor: pointer;
}
.sp-select__opt:hover,
.sp-select__opt.is-marked { background: #f1f5f9; }
.sp-select__opt.is-active {
    background: rgba(37, 99, 235, .09);
    font-weight: 600;
}
/* Las sub-áreas se indentan: la jerarquía se lee de un vistazo sin repetir
   "Padre > Hijo" en cada fila. */
.sp-select__opt[data-nivel="1"] { padding-left: 26px; }

.sp-select__opt-icon      { color: #94a3b8; font-size: .85rem; margin-top: 2px; flex-shrink: 0; }
.sp-select__opt.is-active .sp-select__opt-icon { color: var(--sp-accent); }
.sp-select__opt[data-nivel="0"] .sp-select__opt-icon { color: #f59e0b; }

.sp-select__opt-body   { display: flex; flex-direction: column; min-width: 0; }
.sp-select__opt-text   { overflow: hidden; text-overflow: ellipsis; }
.sp-select__opt-parent,
.sp-select__opt-sub {
    font-size: .74rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-select__empty {
    margin: 0;
    padding: 14px 10px;
    text-align: center;
    color: #94a3b8;
    font-size: .85rem;
}

/* ── Tipos de Merma: dónut + leyenda ──────────────────────────────────────
   Antes el contenedor tenía altura fija con overflow:hidden. En pantalla
   angosta la leyenda no cabía junto al dónut, envolvía debajo y quedaba
   recortada: se veía un dónut de colores sin forma de saber qué significaba
   cada uno. El fallo era el recorte, no la envoltura, así que en vez de
   adivinar un punto de quiebre se deja crecer la tarjeta. */
.merma-grafico {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    min-height: 240px;
}

.merma-grafico .merma-donut {
    max-width: 160px;
    width: 100%;
    height: 220px;
    position: relative;
}

.merma-grafico .merma-legend {
    flex: 1 1 170px;   /* si no caben 170px al lado, envuelve y la tarjeta crece */
    max-height: 220px;
    overflow-y: auto;
}

/* Apilado en teléfono: el dónut más chico deja sitio a la leyenda completa. */
@media (max-width: 575.98px) {
    .merma-grafico { flex-direction: column; align-items: stretch; }
    .merma-grafico .merma-donut { max-width: 150px; height: 150px; margin: 0 auto; }
    .merma-grafico .merma-legend { max-height: none; }
}

/* ── Líneas de entrada: tabla en escritorio, tarjetas en teléfono ─────────
   La tabla tiene ocho columnas cuyos anchos mínimos suman unos 1.140px. En
   un teléfono eso obliga a desplazarse de lado para rellenar cada línea:
   se escribe la cantidad sin ver de qué producto es. Salidas ya resolvió
   esto con tarjetas verticales; aquí se consigue lo mismo sin reescribir la
   lógica, que lee los valores desde el propio DOM de la tabla.

   Cada celda lleva data-etiqueta y en pantalla angosta se apila mostrando
   ese rótulo, porque el encabezado de la tabla deja de verse. */
@media (max-width: 767.98px) {

    .tabla-lineas-entrada,
    .tabla-lineas-entrada tbody,
    .tabla-lineas-entrada tr,
    .tabla-lineas-entrada td {
        display: block;
        width: 100%;
    }

    /* El encabezado sobra: cada celda ya dice lo que es. */
    .tabla-lineas-entrada thead {
        display: none;
    }

    /* Cada línea de producto pasa a ser una tarjeta. */
    .tabla-lineas-entrada tr[data-linea] {
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        padding: .75rem;
        margin-bottom: .75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    .tabla-lineas-entrada tr[data-linea] > td {
        border: 0;
        padding: .3rem 0;
    }

    /* Rótulo a la izquierda, control a la derecha. */
    .tabla-lineas-entrada tr[data-linea] > td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        display: block;
        font-size: .75rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .02em;
        margin-bottom: .15rem;
    }

    /* Exento y Subtotal quedan mejor en una línea, rótulo y valor enfrentados. */
    .tabla-lineas-entrada tr[data-linea] > td[data-etiqueta="Exento de IVA"],
    .tabla-lineas-entrada tr[data-linea] > td[data-etiqueta="Subtotal"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        text-align: left;
    }

    .tabla-lineas-entrada tr[data-linea] > td[data-etiqueta="Exento de IVA"]::before,
    .tabla-lineas-entrada tr[data-linea] > td[data-etiqueta="Subtotal"]::before {
        margin-bottom: 0;
    }

    .tabla-lineas-entrada tr[data-linea] > td[data-etiqueta="Subtotal"] {
        border-top: 1px solid #e9ecef;
        margin-top: .35rem;
        padding-top: .5rem;
    }

    /* El botón de eliminar se ancla arriba a la derecha de la tarjeta. */
    .tabla-lineas-entrada tr[data-linea] {
        position: relative;
    }

    .tabla-lineas-entrada tr[data-linea] > td.celda-acciones {
        position: absolute;
        top: .35rem;
        right: .35rem;
        width: auto;
        padding: 0;
    }

    /* Deja sitio para no tapar el selector de producto. */
    .tabla-lineas-entrada tr[data-linea] > td[data-etiqueta="Producto"],
    .tabla-lineas-entrada tr[data-linea] > td[data-etiqueta="Producto nuevo"] {
        padding-right: 2.5rem;
    }

    /* La fila de lotes es un panel de ancho completo bajo su tarjeta. */
    .tabla-lineas-entrada tr[data-lotes-de] > td {
        border: 0;
        padding: 0;
    }

    /* Ya no hace falta desplazarse de lado. */
    .tabla-lineas-entrada { min-width: 0 !important; }
}

/* ── Presentaciones de compra: tabla en escritorio, tarjetas en teléfono ──
   Cuatro columnas dentro de un modal no caben en un teléfono: la celda de la
   equivalencia se estrujaba hasta partir cada palabra en su propia línea, y
   el desplegable de empaque quedaba en "-- E". Mismo tratamiento que las
   líneas de entrada, con el rótulo de cada campo tomado de data-etiqueta. */
@media (max-width: 767.98px) {

    .tabla-presentaciones,
    .tabla-presentaciones tbody,
    .tabla-presentaciones tr,
    .tabla-presentaciones td {
        display: block;
        width: 100%;
    }

    .tabla-presentaciones thead { display: none; }

    .tabla-presentaciones tbody tr[id^="pp_row_"]:not([id$="_info"]) {
        position: relative;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        padding: .75rem;
        margin-bottom: .75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    .tabla-presentaciones tbody tr > td {
        border: 0;
        padding: .3rem 0;
    }

    .tabla-presentaciones tbody tr > td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        display: block;
        font-size: .75rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .02em;
        margin-bottom: .15rem;
    }

    /* El botón de eliminar se ancla arriba a la derecha de la tarjeta. */
    .tabla-presentaciones tbody tr > td.celda-acciones {
        position: absolute;
        top: .35rem;
        right: .35rem;
        width: auto;
        padding: 0;
        text-align: right;
    }

    .tabla-presentaciones tbody tr > td[data-etiqueta="Tipo de empaque"] {
        padding-right: 2.5rem;
    }

    /* La fila de resumen ocupa el ancho bajo su tarjeta. */
    .tabla-presentaciones tbody tr[id$="_info"] > td {
        padding: .25rem 0 .75rem;
    }
}

/* ── Catálogos de Configuración: tabla en escritorio, tarjetas en teléfono ─
   Unidades, Motivos, Tipos de merma y Proveedores desbordaban a lo ancho: el
   encabezado se cortaba ("IOMBRE DEL MOTIVO", "ACCIONES" a medias) y los
   botones de acción se apilaban uno bajo otro alargando cada fila. */
@media (max-width: 767.98px) {

    .tabla-catalogo,
    .tabla-catalogo tbody,
    .tabla-catalogo tr,
    .tabla-catalogo td {
        display: block;
        width: 100%;
    }

    .tabla-catalogo thead { display: none; }

    .tabla-catalogo tbody tr {
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        padding: .75rem;
        margin-bottom: .75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    .tabla-catalogo tbody tr > td {
        border: 0;
        padding: .25rem 0;
        text-align: left !important;
    }

    /* Rótulo y valor enfrentados: cabe más y se lee como una ficha. */
    .tabla-catalogo tbody tr > td[data-etiqueta] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
    }

    .tabla-catalogo tbody tr > td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        flex-shrink: 0;
        font-size: .75rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    /* Los botones en fila, no apilados, y separados del contenido. */
    .tabla-catalogo tbody tr > td.celda-acciones {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid #e9ecef;
    }

    .tabla-catalogo tbody tr > td.celda-acciones .btn {
        flex: 1 1 auto;
    }

    /* La fila de "no hay registros" no necesita ficha ni rótulos. */
    .tabla-catalogo tbody tr > td[colspan] {
        text-align: center !important;
    }
}

/* ── Árbol de Áreas y Categorías en teléfono ──────────────────────────────
   El nombre y los cuatro botones competían por la misma línea, y como las
   acciones no encogen, el nombre quedaba en "Ce…" o "Ali…". Se pone el
   nombre arriba, con todo el ancho, y las acciones debajo. */
@media (max-width: 767.98px) {

    .area-tree-row {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    .area-tree-info {
        flex-wrap: wrap;
        row-gap: .25rem;
    }

    .area-tree-name {
        white-space: normal;      /* que pueda usar dos líneas si hace falta */
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    .area-tree-actions {
        justify-content: flex-end;
        padding-top: .5rem;
        border-top: 1px solid #f1f5f9;
    }
}

/* ── Lotes con fecha de vencimiento ───────────────────────────────────────
   Eran tres cajas seguidas en una fila con anchos fijos (120px, 160px). En
   pantalla angosta los marcadores de posición se cortaban a "Cantid" y
   "Código de", y no había manera de saber qué iba en cada una. Ahora cada
   campo lleva su rótulo y se apilan cuando no caben. */
.lote-item {
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: .6rem;
    background: #fff;
}

.lote-campos {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
}

.lote-campo { min-width: 0; }
.lote-campo-cant   { flex: 0 1 110px; }
.lote-campo-fecha  { flex: 0 1 170px; }
.lote-campo-codigo { flex: 1 1 160px; }

.lote-quitar {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-bottom: .1rem;
}

/* En teléfono, cada campo en su línea: tres controles de ancho completo se
   rellenan mucho mejor con el pulgar que tres cajitas apretadas. */
@media (max-width: 575.98px) {
    .lote-campos { flex-direction: column; align-items: stretch; }
    .lote-campo  { flex: 1 1 auto; width: 100%; }
    .lote-quitar { align-self: flex-end; margin-top: -2.6rem; }
}

/* ── Modales anidados ─────────────────────────────────────────────────────
   Bootstrap da el mismo z-index a todos los modales (1055) y a todos sus
   fondos (1050). Al abrir el alta de producto encima del registro de entrada,
   ambos quedaban al mismo nivel: el de arriba se mezclaba con el de abajo y
   el conjunto se veía roto. Se eleva el segundo y su fondo. */
/* Se hace con CSS y no con JavaScript a propósito: el selector de hermano
   general acierta con cualquier fondo que tenga otro delante, sin depender de
   que se haya atado una escucha ni del orden en que se creen los modales. */
/* Todo modal que se pueda abrir encima de otro tiene que estar en esta lista.
   Los de proveedor y producto faltaban: su fondo (1060) les quedaba por encima,
   los clics caían en el fondo y el alta desde Entradas parecía congelada. */
/* La confirmación de App.confirmar() se abre sobre cualquier pantalla, también
   sobre otro modal -el aviso de merma repetida sale encima del conteo-, así
   que va siempre arriba. */
#modalConfigProductoNuevo,
#modalProveedor,
#modalProducto,
#modalConfirmacionApp {
    z-index: 1065;
}

.modal-backdrop ~ .modal-backdrop {
    z-index: 1060;
}

/* ═══════════════════════════════════════════════════════════════
   PRÓXIMO PEDIDO — tabla apilable
   La tabla tiene seis columnas y en un teléfono no cabe ninguna:
   se apila en tarjetas con el rótulo a la izquierda y el dato a la
   derecha, que es como se lee una lista de compra.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    .tabla-pedido,
    .tabla-pedido tbody,
    .tabla-pedido tr,
    .tabla-pedido td {
        display: block;
        width: 100%;
    }

    .tabla-pedido thead { display: none; }

    .tabla-pedido tbody tr {
        /* Por token: en una instancia con marca propia, un borde gris fijo
           delata que la pantalla es de otro. */
        border: 1px solid var(--sp-card-border, #dee2e6);
        border-radius: .5rem;
        padding: .75rem;
        margin-bottom: .75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    .tabla-pedido tbody td {
        border: 0;
        padding: .25rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        text-align: right;
    }

    .tabla-pedido tbody td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        font-size: .72rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .02em;
        text-align: left;
        flex: 0 0 auto;
    }

    /* El nombre del producto encabeza la tarjeta: no necesita rótulo y se
       lee mejor a lo ancho que apretado contra el borde derecho. */
    .tabla-pedido tbody td[data-etiqueta="Producto"] {
        display: block;
        text-align: left;
        border-bottom: 1px solid var(--sp-card-border, #f1f3f5);
        padding-bottom: .5rem;
        margin-bottom: .35rem;
    }
    .tabla-pedido tbody td[data-etiqueta="Producto"]::before { content: none; }

    /* El subtotal cierra la tarjeta, destacado. */
    .tabla-pedido tbody td[data-etiqueta="Subtotal"] {
        border-top: 1px solid var(--sp-card-border, #f1f3f5);
        margin-top: .35rem;
        padding-top: .5rem;
        font-size: 1.05rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRÓXIMO PEDIDO — cabecera desplegable
═══════════════════════════════════════════════════════════════ */
.proveedor-cabecera {
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background .12s;
}
.proveedor-cabecera:hover { background: var(--sp-bg-light, #f8fafc); }
.proveedor-cabecera:focus-visible {
    outline: 2px solid var(--sp-accent, #2563eb);
    outline-offset: -2px;
}
/* La línea sólo cuando hay algo debajo: cerrada, un borde suelto parece
   una tabla vacía. */
.proveedor-cabecera.esta-abierto { border-bottom-color: var(--sp-card-border, #dee2e6); }

.chevron-proveedor {
    color: var(--sp-accent, #94a3b8);
    opacity: .55;
    transition: transform .15s ease;
    flex: 0 0 auto;
}
.proveedor-cabecera.esta-abierto .chevron-proveedor { transform: rotate(90deg); }

/* ═══════════════════════════════════════════════════════════════
   MENÚ PLEGADO — rótulo al pasar el mouse
   Plegado sólo se ven iconos y hay que adivinar cuál es cuál. El rótulo
   NO puede ser un ::after del propio item: #sidebar lleva overflow-x
   hidden y lo recortaría. Va suelto en el <body>, en posición fija, y lo
   coloca el guion del footer.
═══════════════════════════════════════════════════════════════ */
.rotulo-menu {
    position: fixed;
    z-index: 1080;
    /* Del mismo juego de colores que el menú al que acompaña: fijo en
       pizarra, saltaba a la vista junto a un menú de otro color. */
    background: var(--surface, #1e293b);
    color: var(--text, #f8fafc);
    border: 1px solid var(--border, transparent);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;          /* nunca se interpone al clic */
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .12s ease, transform .12s ease;
}
.rotulo-menu.visible { opacity: 1; transform: translateX(0); }

/* Puntita hacia el icono. */
.rotulo-menu::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: translateY(-50%) rotate(45deg);
}

/* ═══════════════════════════════════════════════════════════════
   PESTAÑAS (nav-pills) — Inventario y Configuración
   La pastilla activa se quedaba en el azul de Bootstrap aunque el
   resto de la aplicación siguiera el color de la instancia: es de
   las pocas piezas que no se tiñe con --bs-primary, sino con su
   propia variable.
   El anillo de foco se declara aquí para las dos pantallas: antes
   sólo Inventario mostraba algo, y por accidente.
═══════════════════════════════════════════════════════════════ */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--sp-accent);
}

.nav-pills .nav-link {
    transition: background .12s, color .12s;
}

.nav-pills .nav-link:not(.active):hover {
    background: var(--sp-bg-light, #f1f5f9);
    color: var(--sp-accent);
}

.nav-pills .nav-link:focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   CIERRE DE MES — árbol de conteos
   Las áreas anidan más de dos niveles, así que la sangría la marca
   una guía vertical en vez de repetir viñetas: con tres niveles,
   un punto por línea deja de decir de quién cuelga cada cosa.
═══════════════════════════════════════════════════════════════ */
.arbol-conteo,
.arbol-conteo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.arbol-conteo ul {
    margin-left: .55rem;
    padding-left: .9rem;
    border-left: 1px solid var(--sp-card-border, #e2e8f0);
}
.arbol-conteo li {
    padding: .3rem 0;
}
.arbol-conteo li.sin-contar > div {
    /* Lo que falta tiene que saltar sin necesidad de leer: es la única razón
       por la que existe esta lista. */
    background: var(--sp-bg-light, #f8fafc);
    border-radius: .35rem;
    padding: .25rem .5rem;
    margin-left: -.5rem;
}

/* Historial: en teléfono la tabla se apila, como el resto del sistema. */
@media (max-width: 767.98px) {
    .tabla-cierres,
    .tabla-cierres tbody,
    .tabla-cierres tr,
    .tabla-cierres td {
        display: block;
        width: 100%;
    }
    .tabla-cierres thead { display: none; }
    .tabla-cierres tbody tr {
        border: 1px solid var(--sp-card-border, #dee2e6);
        border-radius: .5rem;
        padding: .75rem;
        margin-bottom: .75rem;
        background: #fff;
    }
    .tabla-cierres tbody td {
        border: 0;
        padding: .25rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        text-align: right;
    }
    .tabla-cierres tbody td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        font-size: .72rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .02em;
        text-align: left;
        flex: 0 0 auto;
    }
}

/* ── Pedir y contar desde el teléfono ──────────────────────────────────────
   Dos cosas obligaban a mover la pantalla de lado al rellenar:
   1. La tabla de conteo suma unos 900 px de columnas: en 375 px no cabe.
   2. Los campos pequeños (form-control-sm) usan letra de 14 px, y el iPhone
      hace zoom al tocar un campo con letra menor de 16 px: después de escribir
      la pantalla queda ampliada y hay que desplazarse para seguir.
   En teléfono los campos van a 16 px, el conteo pasa a una ficha por producto
   y cada línea del pedido cabe en una sola fila. */
.tabla-conteo .unidad-movil { display: none; }

@media (max-width: 767.98px) {

    /* Sin zoom automático al tocar un campo. */
    .form-control, .form-select,
    .form-control-sm, .form-select-sm,
    .tabla-conteo .fs-7 {
        font-size: 16px !important;
    }

    /* ── Pedir: producto, cantidad y quitar en una sola fila. La clase no es
       "tabla-pedido": ese nombre ya lo usa Próximo pedido para sus fichas. ── */
    .tabla-pedir thead { display: none; }
    .tabla-pedir tr.linea-pedido {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem 0;
        border-bottom: 1px solid #e9ecef;
    }
    .tabla-pedir tr.linea-pedido > td { border: 0; padding: 0; box-shadow: none; }
    .tabla-pedir tr.linea-pedido > td:first-child  { flex: 1 1 auto; min-width: 0; }
    .tabla-pedir tr.linea-pedido > td:nth-child(2) { flex: 0 0 6.5rem; }
    .tabla-pedir .btn-quitar { min-width: 2.75rem; min-height: 2.75rem; }
    .tabla-pedir tr.linea-pedido input { min-height: 2.75rem; }
}

/* ── Conteo: una ficha por producto ────────────────────────────────────────
   Hasta 991 px, no sólo en el teléfono. El corte estaba en 768 y entre 768 y
   991 pasaba lo peor de los dos mundos: la tabla seguía siendo tabla, pero
   Bootstrap deja el modal en 500 px fijos por debajo de 992, así que ocho
   columnas se repartían 437 px y los títulos salían en vertical, una letra
   por línea. En una ventana angosta de escritorio -media pantalla- el conteo
   era ilegible. */
@media (max-width: 991.98px) {

    .conteo-scroll { max-height: none !important; overflow: visible !important; }

    .tabla-conteo,
    .tabla-conteo tbody,
    .tabla-conteo tr,
    .tabla-conteo td {
        display: block;
        width: 100%;
    }
    .tabla-conteo { border: 0 !important; }
    .tabla-conteo thead { display: none; }

    /* Nombre arriba; En sistema · Contado · Diferencia en una fila; la merma,
       que es opcional, al final. */
    .tabla-conteo tbody tr[data-prod-id] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem .75rem;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        padding: .75rem;
        margin-bottom: .75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }
    .tabla-conteo tbody tr[data-prod-id] > td {
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
    }
    .tabla-conteo td.celda-sku,
    .tabla-conteo td.celda-categoria,
    .tabla-conteo td.celda-unidad { display: none !important; }
    .tabla-conteo .unidad-movil { display: inline; }

    .tabla-conteo td.celda-producto { grid-column: 1 / -1; font-size: 1rem; }
    .tabla-conteo td.celda-merma    { grid-column: 1 / -1; order: 5; }
    .tabla-conteo td.celda-sistema  { font-size: 1.1rem; }

    .tabla-conteo td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        display: block;
        font-size: .72rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .02em;
        margin-bottom: .2rem;
    }

    .tabla-conteo .input-stock-contado { min-height: 2.75rem; font-size: 1.1rem !important; }
    .tabla-conteo .select-tipo-merma,
    .tabla-conteo .input-cant-merma { max-width: none !important; min-height: 2.5rem; }
    .tabla-conteo .input-cant-merma { flex: 0 0 6rem; }
    .tabla-conteo .lbl-diferencia .badge { font-size: .95rem; }

    /* Guardar queda siempre a mano, pegado abajo mientras se recorre la lista. */
    /* bottom negativo = el relleno inferior del cuerpo del modal (p-3): sin él
       quedaban 16 px bajo el botón por donde se asomaba el producto siguiente. */
    .conteo-pie {
        position: sticky;
        bottom: -1rem;
        background: #fff;
        padding-bottom: 1.5rem;
        box-shadow: 0 -6px 10px -8px rgba(0, 0, 0, .25);
        z-index: 3;
    }
}

/* Y de 992 px para arriba, que el conteo use el ancho que hay: Bootstrap deja
   el modal-xl en 800 px hasta los 1200, y con ocho columnas eso se nota. */
@media (min-width: 992px) {
    #modalConteoArea .modal-dialog { max-width: min(1140px, 96vw); }
}

/* ── Texto que no cabe ─────────────────────────────────────────────────────
   Una nota larga sin espacios —pegada desde otro sistema, o escrita de un
   tirón— estiraba la pantalla entera en vez de cortarse. En Solicitudes, una
   observación de 5.000 caracteres dejó la página con 45.000 px de ancho: en el
   teléfono había que arrastrar de lado para leer cualquier cosa.
   Se corta donde sea antes que empujar el diseño. */
.card-body, .modal-body,
.alert, .toast-body,
.small, .fs-7 {
    overflow-wrap: anywhere;
}

/* En las tablas NO puede ser «donde sea»: al navegador le basta con una letra
   para dar por buena una columna, así que en el teléfono encogía la tabla hasta
   el ancho de la pantalla y los títulos quedaban de una letra por línea
   (Á-R-E-A) en vez de dejarla correr de lado. Cortando sólo entre palabras, la
   tabla vuelve a pedir su ancho de verdad y se desplaza dentro de su marco.
   El tope de ancho es para la nota kilométrica sin espacios: se parte igual y
   no estira la página, aunque la tabla no tenga marco con desplazamiento. */
td, th {
    overflow-wrap: break-word;
    max-width: min(24rem, 80vw);
}

/* En las tablas que en pantalla angosta se apilan como fichas, la celda deja de
   ser columna y pasa a ser una línea de la ficha: ahí el tope no corre, porque
   dejaba el valor a media ficha en vez de pegado al borde derecho. */
@media (max-width: 991.98px) {
    td[data-etiqueta], th[data-etiqueta] {
        max-width: none;
    }
}

/* En el teléfono, una tabla que se desplaza de lado igual repartía el poco
   ancho entre todas sus columnas y dejaba los nombres en columnas de una
   palabra por línea. Con un piso por columna la tabla se hace un poco más
   ancha —para eso está el desplazamiento— y cada fila baja de tres líneas a
   una o dos. */
@media (max-width: 767.98px) {
    .table-responsive td,
    .table-responsive th {
        min-width: 7rem;
    }
}