:root {
    --bg: #0b1220;
    --card: rgba(255, 255, 255, .04);
    --bd: rgba(255, 255, 255, .10);
    --txt: #e5e7eb;
    --muted: rgba(229, 231, 235, .70);
    --ok: rgba(16, 185, 129, .12);
    --okbd: rgba(16, 185, 129, .30);
    --err: rgba(239, 68, 68, .12);
    --errbd: rgba(239, 68, 68, .30);
}

* {
    box-sizing: border-box
}

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

a {
    color: #93c5fd;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

/* Layout */
.container {
    padding: 16px
}

.glass {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 14px;
}

/* Topbar/Nav */
.topbar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bd);
    background: rgba(0, 0, 0, .10);
}

.brand {
    font-weight: 800
}

.nav a {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--txt);
    opacity: .85;
}

.nav a:hover {
    background: rgba(255, 255, 255, .06);
    opacity: 1
}

.nav a.active {
    background: rgba(37, 99, 235, .20);
    border-color: rgba(37, 99, 235, .35);
    opacity: 1
}

/* Alerts */
.alert {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--bd)
}

.alert-warning {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .30)
}

.alert-danger {
    background: var(--err);
    border-color: var(--errbd)
}

.alert-ok {
    background: var(--ok);
    border-color: var(--okbd)
}

.muted {
    opacity: .7
}

.small {
    font-size: 12px
}

.fw-semibold {
    font-weight: 700
}

/* Panel cards */
.grid {
    display: grid;
    gap: 12px
}

.grid.cols3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.kpi .label {
    opacity: .7;
    font-size: 12px;
    margin-bottom: 6px
}

.kpi .value {
    font-size: 28px;
    font-weight: 800
}

/* ===== Reportes Caja – KPI cards ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.kpi-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 992px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.kpi {
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #eaf2ff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.kpi__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .25px;
    color: rgba(255, 255, 255, .92);
    opacity: 1;
    margin-bottom: 6px;
    text-transform: none;
}

.kpi__value {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .98);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

/* Variantes (sin depender de bootstrap alerts) */
.kpi--info {
    border-color: rgba(56, 189, 248, .35);
    background: rgba(56, 189, 248, .10);
}

.kpi--ok {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .10);
}

.kpi--warn {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .10);
}

.kpi--main {
    border-color: rgba(99, 102, 241, .35);
    background: rgba(99, 102, 241, .12);
}

.kpi--soft {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
}

/* Nota diferencia */
.kpi-note {
    margin: 10px 0 16px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: #eaf2ff;
}

.kpi-note--ok {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .10);
}

.kpi-note--bad {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .10);
}

main h5,
main h6 {
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

main .form-label {
    color: rgba(255, 255, 255, .90);
    font-weight: 700;
}

@media (min-width: 992px) {
    .report-filter .col-lg-3 {
        position: relative;
    }

    .report-filter .form-text {
        position: absolute;
        left: 12px;
        bottom: -18px;
    }

    .report-filter {
        margin-bottom: 28px;
    }

    /* para que no pise lo de abajo */
}

/* ===== BOTONES ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

/* 👻 Ghost (arreglado posta) */
.btn-ghost {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .95);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .35);
}

/* 👉 Nombre: que ocupe TODO lo que pueda */
.tbl th:nth-child(2),
.tbl td:nth-child(2) {
    width: auto;
    min-width: 320px;
    /* ajustá si querés más */
}

/* 👉 Código: un poco más chico */
.tbl th:nth-child(1),
.tbl td:nth-child(1) {
    width: 120px;
}

/* 👉 Stock */
.tbl th:nth-child(3),
.tbl td:nth-child(3) {
    width: 120px;
}

/* 👉 Precio */
.tbl th:nth-child(4),
.tbl td:nth-child(4) {
    width: 140px;
}

/* 👉 Estado */
.tbl th:nth-child(5),
.tbl td:nth-child(5) {
    width: 110px;
}

.th-right {
    text-align: right;
}

/* Tabla estable */
.tbl {
    table-layout: fixed;
    width: 100%;
}

/* Anchos “reales” */
.tbl col.col-codigo {
    width: 120px;
}

.tbl col.col-stock {
    width: 120px;
}

.tbl col.col-precio {
    width: 140px;
}

.tbl col.col-estado {
    width: 96px;
}

/* achicá un toque */
.tbl col.col-nombre {
    width: auto;
}

/* TODO lo que sobre */
.tbl td:nth-child(2) a.linkrow {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.2;
}

.meta {
    display: table;
    width: 100%;
    margin-bottom: 10px;
    table-layout: fixed;
}

.meta .col {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

.meta .row {
    display: table;
    width: 100%;
    line-height: 1.1;
    margin: 0;
}

.meta .lbl {
    display: table-cell;
    width: 28mm;
    /* ajustá acá si querés */
    font-weight: 700;
    white-space: nowrap;
}

.meta .val {
    display: table-cell;
    width: auto;
}

.meta .up-1mm {
    position: relative;
    top: -1mm;
}

.inp {
    width: 100%;
    height: 46px;
    padding: 0 14px;

    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .14);

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .06),
            rgba(255, 255, 255, .03));

    color: #f8fafc;
    font-size: 14px;
    font-weight: 500;

    outline: none;

    transition: all .18s ease;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 4px 12px rgba(0, 0, 0, .20);
}

/* placeholder */
.inp::placeholder {
    color: rgba(255, 255, 255, .45);
}

/* hover */
.inp:hover {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
}

/* focus */
.inp:focus {
    border-color: rgba(59, 130, 246, .6);

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .15),
        0 10px 25px rgba(0, 0, 0, .25);

    background: rgba(15, 23, 42, .9);
}

/* ===== TABLA PRO (GLOBAL) ===== */
.table-wrap {
    overflow: hidden;
    /* 🔥 CLAVE para bordes redondeados */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* tabla */
.tbl,
.table {
    width: 100%;
    border-collapse: collapse;
    color: var(--txt);
    background: transparent;
}

/* cabecera */
.tbl thead th,
.table thead th {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 12px;
}

/* filas */
.tbl tbody tr,
.table tbody tr {
    transition: all .15s ease;
}

/* hover */
.tbl tbody tr:hover,
.table tbody tr:hover {
    background: rgba(255, 255, 255, .06);
}

/* celdas */
.tbl td,
.table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .92);
    /* 🔥 FIX contraste */
}

/* última fila sin borde */
.tbl tr:last-child td,
.table tr:last-child td {
    border-bottom: none;
}

/* ===== FIX GLOBAL SELECT / OPTION ===== */
select,
select option {
    background: #0b1220 !important;
    /* fondo oscuro real */
    color: #e5e7eb !important;
    /* texto claro */
}

/* cuando está seleccionado */
select option:checked {
    background: #2563eb !important;
    /* azul selección */
    color: #ffffff !important;
}

/* hover (no todos los navegadores lo respetan) */
select option:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* para inputs tipo select (tu estilo glass) */
select {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
}

/* 🚫 sacar subrayado SOLO en navbar */
.admin-navbar .nav-link:hover,
.admin-navbar .nav-link:focus {
    text-decoration: none !important;
}

/* 🔥 Tipo (INGRESO / EGRESO) → se ajusta solo */
.tbl th:nth-child(2),
.tbl td:nth-child(2) {
    width: 1%;
    /* 👈 truco PRO */
    white-space: nowrap;
    /* no se rompe */
    font-weight: 600;
}

/* 💳 Medio tamaño medio */
.tbl th:nth-child(3),
.tbl td:nth-child(3) {
    width: 140px;
    white-space: nowrap;
}

/* 🧠 Concepto → flexible */
.tbl th:nth-child(4),
.tbl td:nth-child(4) {
    width: auto;
    white-space: normal;
    word-break: break-word;
}

/* 💰 Monto fijo */
.tbl th:nth-child(5),
.tbl td:nth-child(5) {
    width: 130px;
    text-align: right;
    white-space: nowrap;
}

.tipo-ingreso {
    color: #22c55e !important;
    font-weight: 700;
}

.tipo-egreso {
    color: #ef4444 !important;
    font-weight: 700;
}

.tipo-neutral {
    color: #e5e7eb !important;
    font-weight: 700;
}