:root {
    --navy: #071b3d;
    --navy-2: #0c2b59;
    --blue: #1769aa;
    --light: #f4f7fb;
    --line: #dbe3ee;
    --text: #1e293b;
    --muted: #64748b;
    --success: #166534;
    --success-bg: #dcfce7;
    --danger: #991b1b;
    --danger-bg: #fee2e2;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--light);
}

a { color: var(--blue); }

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(145deg, var(--navy), #143b68);
}

.auth-card {
    width: min(520px, 100%);
    background: white;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 20px 55px rgba(0,0,0,.25);
}

.brand {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: .12em;
    color: var(--navy);
}

h1 { margin: 0 0 8px; }
h2 { margin: 0; font-size: 1.15rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; margin: 5px 0 0; }
.optional { color: var(--muted); font-weight: 400; font-size: .85rem; }

label {
    display: block;
    margin: 0;
    font-weight: 650;
}

input, select, textarea {
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    color: var(--text);
    font: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(23,105,170,.14);
    border-color: var(--blue);
}

.button {
    display: inline-block;
    border: 1px solid var(--navy);
    border-radius: 10px;
    background: var(--navy);
    color: white;
    padding: 10px 16px;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.button:hover { background: var(--navy-2); }
.button.secondary { background: white; color: var(--navy); }
.button.secondary:hover { background: #eef4fb; }
.button.ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.full { width: 100%; text-align: center; margin-top: 12px; }

.alert {
    border-radius: 10px;
    padding: 12px 14px;
    margin: 15px 0;
}
.alert.error { background: var(--danger-bg); color: var(--danger); }
.alert.success { background: var(--success-bg); color: var(--success); }

.topbar {
    background: var(--navy);
    color: white;
    min-height: 58px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}
.brandline { display: flex; align-items: center; gap: 18px; }
.brandlink { color: white; font-weight: 850; text-decoration: none; }
.brandline span { opacity: .78; }
.userbar { display: flex; align-items: center; gap: 16px; font-size: .92rem; }
.userbar a { color: white; }

.mainnav {
    background: white;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.navinner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    gap: 4px;
    overflow-x: auto;
}
.navitem {
    display: inline-block;
    padding: 14px 16px 12px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    font-weight: 650;
}
.navitem:hover { color: var(--navy); }
.navitem.active { color: var(--navy); border-bottom-color: var(--blue); }
.navitem.disabled { opacity: .43; cursor: not-allowed; }

.container {
    width: min(1180px, calc(100% - 32px));
    margin: 30px auto 60px;
}

.pagehead, .panelhead {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}
.pagehead { margin-bottom: 20px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.stat, .panel, .notice {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
}
.stat span { display: block; color: var(--muted); }
.stat strong { display: block; margin-top: 7px; font-size: 2rem; }
.panel { margin-top: 20px; }
.notice { margin-top: 20px; border-left: 5px solid var(--blue); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; align-items: center; }

.filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px 140px auto;
    gap: 8px;
    align-items: end;
}
.filters input, .filters select { margin-top: 0; }

.table-wrap { overflow-x: auto; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.empty { text-align: center; color: var(--muted); padding: 28px; }
.table-note { color: var(--muted); font-size: .8rem; }
.inactive-row { opacity: .65; }

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
}
.badge.active { background: var(--success-bg); color: var(--success); }
.badge.inactive { background: #e5e7eb; color: #475569; }

.row-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.row-actions form { display: inline; }
.text-action, .link-button { font: inherit; font-size: .86rem; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

.footer {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 28px;
    color: var(--muted);
    font-size: .82rem;
    text-align: center;
}

@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .responsive-head { align-items: stretch; flex-direction: column; }
    .filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .topbar { align-items: flex-start; flex-direction: column; padding: 14px 18px; }
    .brandline { align-items: flex-start; flex-direction: column; gap: 3px; }
    .userbar { width: 100%; justify-content: space-between; }
    .pagehead { align-items: stretch; flex-direction: column; }
    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .filters { grid-template-columns: 1fr; }
    .navinner { width: calc(100% - 16px); }
    .container { width: calc(100% - 20px); margin-top: 20px; }
}

/* Version 2.1: zonas descriptivas y ubicaciones normalizadas */
.zone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.zone-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    background: #fbfdff;
}
.zone-card-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    color: var(--muted);
    font-size: .82rem;
}
.zone-code {
    display: inline-flex;
    min-width: 38px;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--navy);
    color: white;
    font-weight: 800;
}
.zone-card h3 { margin: 13px 0 6px; font-size: 1rem; }
.zone-card p { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
.zone-card a { font-weight: 700; }
.field-help {
    display: block;
    min-height: 1.1em;
    margin-top: 6px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}
.hidden { display: none !important; }
#rack_custom, #level_custom { margin-top: 8px; }
.narrow { max-width: 900px; }
.result-list { line-height: 1.7; }

@media (max-width: 760px) {
    .zone-grid { grid-template-columns: 1fr; }
}

/* Version 3.0: productos y stock inicial */
.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.product-filters {
    grid-template-columns: minmax(240px, 1fr) 145px 130px auto;
}
.products-table {
    min-width: 980px;
}
.stock-low {
    color: var(--danger);
}
.products-table td:nth-child(5) {
    min-width: 230px;
}

@media (max-width: 900px) {
    .product-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
    .product-filters { grid-template-columns: 1fr; }
    .header-actions { width: 100%; }
    .header-actions .button { flex: 1; text-align: center; }
}


/* Version 4.0: movimientos de inventario */
.movement-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.movement-type-help {
    display: block;
    margin-top: 6px;
    min-height: 1.1em;
    color: var(--muted);
    font-size: .82rem;
}
.stock-hint {
    margin-top: 7px;
    color: var(--muted);
    font-size: .83rem;
    line-height: 1.4;
}
.stock-hint strong { color: var(--navy); }
.readonly-field {
    background: #f8fafc;
    color: var(--muted);
}
.movement-filters {
    grid-template-columns: minmax(180px, 1fr) 150px 180px 145px 145px auto;
}
.movements-table {
    min-width: 1180px;
}
.movement-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .8rem;
}
.movement-path {
    min-width: 190px;
    line-height: 1.45;
}
.movement-path .arrow {
    color: var(--muted);
    padding: 0 4px;
}
.qty-positive { color: var(--success); }
.qty-negative { color: var(--danger); }
.qty-transfer { color: var(--blue); }
.badge.movement-entry,
.badge.movement-adjust-positive {
    background: var(--success-bg);
    color: var(--success);
}
.badge.movement-exit,
.badge.movement-adjust-negative {
    background: var(--danger-bg);
    color: var(--danger);
}
.badge.movement-transfer {
    background: #dbeafe;
    color: #1d4ed8;
}
.current-stock-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.current-stock-item {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 14px;
    background: #fbfdff;
}
.current-stock-item strong {
    display: block;
    margin-bottom: 4px;
}
.recent-movements {
    min-width: 900px;
}
.inline-note {
    padding: 10px 12px;
    border-radius: 9px;
    background: #eef4fb;
    color: var(--navy);
    font-size: .88rem;
    line-height: 1.45;
}
.form-section-title {
    grid-column: span 2;
    border-top: 1px solid var(--line);
    padding-top: 15px;
    margin-top: 2px;
    font-size: .9rem;
    color: var(--navy);
    font-weight: 800;
}
.field-hidden { display: none !important; }

@media (max-width: 1050px) {
    .movement-filters { grid-template-columns: 1fr 1fr 1fr; }
    .current-stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .movement-form-grid { grid-template-columns: 1fr; }
    .form-section-title { grid-column: span 1; }
    .movement-filters { grid-template-columns: 1fr; }
    .current-stock-grid { grid-template-columns: 1fr; }
}


/* Versión 4.1: mejoras visuales del historial de movimientos */
.wide-container {
    width: min(1540px, calc(100% - 32px));
}
.history-head {
    display: block;
}
.history-head > div:first-child {
    margin-bottom: 16px;
}
.history-head .movement-filters {
    width: 100%;
}
.movement-filters {
    display: grid;
    grid-template-columns:
        minmax(230px, 2fr)
        minmax(145px, .9fr)
        minmax(210px, 1.4fr)
        minmax(170px, 1.1fr)
        150px
        150px
        auto;
    gap: 10px;
    align-items: end;
}
.movements-table {
    min-width: 1320px;
    table-layout: auto;
}
.movements-table th,
.movements-table td {
    vertical-align: top;
}
.movements-table th:nth-child(1) { width: 105px; }
.movements-table th:nth-child(2) { width: 165px; }
.movements-table th:nth-child(3) { width: 145px; }
.movements-table th:nth-child(4) { width: 230px; }
.movements-table th:nth-child(5) { width: 220px; }
.movements-table th:nth-child(6) { width: 120px; }
.movements-table th:nth-child(7) { width: 150px; }
.movements-table th:nth-child(8) { min-width: 250px; }
.reason-cell {
    min-width: 250px;
    max-width: 380px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

/* Versión 5.0: conteos físicos */
.stats-grid.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.compact-panel {
    padding-bottom: 18px;
}
.count-create-grid {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(320px, 1.5fr) auto;
    gap: 14px;
    align-items: end;
}
.count-create-grid label,
.count-add-grid label {
    margin: 0;
}
.count-detail-panel {
    margin-bottom: 22px;
}
.count-title-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.count-title-line h2 {
    margin: 0;
}
.badge.count-status.draft {
    background: #e2e8f0;
    color: #334155;
}
.badge.count-status.in-progress {
    background: #fef3c7;
    color: #92400e;
}
.badge.count-status.closed {
    background: #dcfce7;
    color: #166534;
}
.badge.count-status.cancelled {
    background: #fee2e2;
    color: #991b1b;
}
.count-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.count-summary-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 15px;
    background: #fbfdff;
}
.count-summary-card span {
    display: block;
    color: var(--muted);
    font-size: .85rem;
}
.count-summary-card strong {
    display: block;
    margin-top: 5px;
    font-size: 1.45rem;
}
.count-summary-card.positive strong,
.count-difference.positive {
    color: var(--success);
}
.count-summary-card.negative strong,
.count-difference.negative {
    color: var(--danger);
}
.count-difference.zero {
    color: var(--muted);
}
.count-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}
.count-items-table {
    min-width: 1180px;
}
.count-items-table th:nth-child(1) { width: 170px; }
.count-items-table th:nth-child(2) { width: 260px; }
.count-items-table th:nth-child(3),
.count-items-table th:nth-child(4),
.count-items-table th:nth-child(5) { width: 120px; }
.count-items-table th:nth-child(6) { width: 220px; }
.count-items-table th:nth-child(7) { width: 170px; }
.counted-input {
    min-width: 110px;
}
.count-add-item {
    margin-top: 24px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
}
.count-add-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.3fr) 150px minmax(220px, 1.2fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}
.count-close-box {
    margin-top: 24px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 13px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.count-close-box h3,
.count-add-item h3 {
    margin: 0 0 5px;
}
.count-close-box p {
    margin: 0;
    color: #334155;
}
.count-filter {
    display: flex;
    gap: 10px;
    align-items: center;
}
.counts-table {
    min-width: 1050px;
}
.success-note {
    background: #ecfdf5;
    color: #166534;
}
.danger-note {
    background: #fef2f2;
    color: #991b1b;
}

@media (max-width: 1320px) {
    .movement-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .count-add-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .count-add-grid .button {
        width: fit-content;
    }
}

@media (max-width: 1050px) {
    .stats-grid.five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .movement-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .count-create-grid {
        grid-template-columns: 1fr 1fr;
    }
    .count-create-grid .button {
        width: fit-content;
    }
    .count-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .stats-grid.five,
    .count-summary-grid,
    .movement-filters,
    .count-create-grid,
    .count-add-grid {
        grid-template-columns: 1fr;
    }
    .count-close-box {
        align-items: stretch;
        flex-direction: column;
    }
    .count-close-box .button,
    .count-create-grid .button,
    .count-add-grid .button {
        width: 100%;
    }
    .count-filter {
        width: 100%;
    }
    .count-filter select {
        flex: 1;
    }
}


/* Versión 6.0: usuarios, roles y cuenta personal */
.profile-link {
    color: white;
    text-decoration: none;
    font-weight: 700;
}
.profile-link:hover { text-decoration: underline; }

.permission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0;
}
.permission-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 19px;
}
.permission-card h2 {
    margin: 12px 0 6px;
    font-size: 1.08rem;
}
.permission-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}
.role-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .035em;
}
.role-pill.admin {
    background: #fee2e2;
    color: #991b1b;
}
.role-pill.operator {
    background: #dbeafe;
    color: #1d4ed8;
}
.role-pill.viewer {
    background: #e2e8f0;
    color: #334155;
}
.user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.accent-panel {
    border-left: 5px solid var(--blue);
}
.user-filters {
    grid-template-columns: minmax(220px, 1fr) 150px 145px auto;
}
.users-table {
    min-width: 1080px;
}
.users-table td {
    vertical-align: top;
}
.table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 13px;
    min-width: 210px;
}
.inline-form {
    display: inline;
    margin: 0;
}
.link-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--blue);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
}
.link-button:hover { color: var(--navy); }
.badge.inactive {
    background: #e2e8f0;
    color: #475569;
}
.narrow-container {
    max-width: 1000px;
}
.account-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 20px;
}
.account-details {
    margin: 16px 0 0;
}
.account-details div {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.account-details dt {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}
.account-details dd {
    margin: 4px 0 0;
    font-weight: 700;
}
.stack-form {
    display: grid;
    gap: 4px;
}

@media (max-width: 900px) {
    .permission-grid { grid-template-columns: 1fr; }
    .user-filters { grid-template-columns: 1fr 1fr; }
    .account-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .user-form-grid { grid-template-columns: 1fr; }
    .user-form-grid .span-2 { grid-column: span 1; }
    .user-filters { grid-template-columns: 1fr; }
}