/* ================================
   RESET + BASE
================================ */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.6;
}

.app-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}


/* ================================
   LAYOUT GENERAL
================================ */
.container {
    max-width: 1300px;
    padding: 24px;
}

.section {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* ================================
   TITULOS
================================ */
h1 {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 16px;
}

h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
}

h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
}

h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ================================
   TEXTOS
================================ */
p {
    margin-bottom: 12px;
    color: #334155;
}

/* ================================
   MENÚ / BOTONES PRINCIPALES
================================ */
.mb-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 32px;
}

button {
    cursor: pointer;
}

/* Base común */
#btn-stock,
#btn-entradas,
#btn-ventas,
#btn-resumen-ventas,
#btn-salidas,
#btn-caja,
#btn-conteo-stock,
#btn-export-db,
#btn-users,
#btn-logout {
    font-size: 20px;
    font-weight: 800;
    padding: 18px 28px;
    border-radius: 18px;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 8px 0 rgba(0,0,0,.18);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

#btn-stock:hover,
#btn-entradas:hover,
#btn-ventas:hover,
#btn-resumen-ventas:hover,
#btn-salidas:hover,
#btn-caja:hover,
#btn-conteo-stock:hover,
#btn-export-db:hover,
#btn-users:hover,
#btn-logout:hover {
    filter: brightness(1.1);
}

#btn-stock:active,
#btn-entradas:active,
#btn-ventas:active,
#btn-resumen-ventas:active,
#btn-salidas:active,
#btn-caja:active,
#btn-conteo-stock:active,
#btn-export-db:active,
#btn-users:active,
#btn-logout:active {
    transform: translateY(5px);
    box-shadow: 0 3px 0 rgba(0,0,0,.18);
}

/* COLORES */
#btn-stock { background: #2563eb; }
#btn-entradas { background: #16a34a; }
#btn-ventas { background: #9333ea; }
#btn-resumen-ventas { background: #0ea5e9; }
#btn-salidas { background: #dc2626; }
#btn-caja { background: #f59e0b; color: #1f2937 !important; }
#btn-conteo-stock { background: #059669; }
#btn-export-db { background: #475569; }
#btn-users { background: #6366f1; }
#btn-logout { background: #7f1d1d; }

/* ================================
   FORMULARIOS
================================ */
form {
    display: grid;
    gap: 18px;
}

label {
    font-weight: 700;
    font-size: 18px;
}

input,
select {
    font-size: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid #cbd5f5;
    outline: none;
}

input:focus,
select:focus {
    border-color: #2563eb;
}

/* ================================
   BOTONES INTERNOS
================================ */
.btn-action {
    font-size: 18px;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 14px;
    border: none;
    background: #2563eb;
    color: #ffffff;
}

.btn-action-danger {
    background: #dc2626;
}

.btn-action-success {
    background: #16a34a;
}

/* ================================
   TABLAS (STOCK / VENTAS / CAJA)
================================ */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

thead {
    background: #e2e8f0;
}

th {
    font-size: 18px;
    font-weight: 800;
    padding: 14px;
    text-align: left;
}

td {
    padding: 14px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 18px;
}

tbody tr:hover {
    background: #f8fafc;
}

/* ================================
   TARJETAS RESUMEN (VENTAS / CAJA)
================================ */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.summary-card {
    background: #f8fafc;
    border-radius: 18px;
    padding: 24px;
    box-shadow: inset 0 0 0 2px #e5e7eb;
}

.summary-card h4 {
    margin-bottom: 6px;
}

.summary-card strong {
    font-size: 28px;
}

/* ================================
   ALERTAS
================================ */
.alert {
    padding: 16px 20px;
    border-radius: 14px;
    font-weight: 700;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
}

.alert-error {
    background: #fee2e2;
    color: #7f1d1d;
}

/* ================================
   BÚSQUEDA EN STOCK
================================ */
tr.stock-highlight {
    background: #fefce8 !important;
    outline: 2px solid #facc15;
    outline-offset: -2px;
}

.search-mark {
    background: #fef08a;
    color: #713f12;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {

    body {
        font-size: 19px;
    }

    h1 { font-size: 34px; }
    h2 { font-size: 28px; }

    .mb-3 {
        flex-direction: column;
    }

    #btn-stock,
    #btn-entradas,
    #btn-ventas,
    #btn-resumen-ventas,
    #btn-salidas,
    #btn-caja,
    #btn-conteo-stock,
    #btn-export-db,
    #btn-users,
    #btn-logout {
        width: 100%;
        font-size: 22px;
        padding: 20px;
    }

    table {
        font-size: 17px;
    }
}


/* ================================
   TOP BAR / IDENTIDAD
================================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #0f172a;
    color: #ffffff;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* Marca */
.topbar-left {
    display: flex;
    flex-direction: column;
}

.brand {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .5px;
}

.brand-sub {
    font-size: 15px;
    color: #cbd5f5;
}

/* Usuario */
.topbar-right {
    font-size: 18px;
    font-weight: 700;
    background: #1e293b;
    padding: 10px 18px;
    border-radius: 14px;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .brand {
        font-size: 24px;
    }

    .topbar-right {
        width: 100%;
        text-align: center;
    }
}


/* ================================
   BOTONES GENERALES (override bootstrap)
================================ */
.btn {
    font-size: 20px;
    font-weight: 800;
    padding: 16px 26px;
    border-radius: 18px;
    box-shadow: 0 6px 0 rgba(0,0,0,.18);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn:hover {
    filter: brightness(1.1);
}

.btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(0,0,0,.18);
}


/* separación clara entre botones */
.mb-3 > .btn {
    margin: 10px 12px 10px 0;
}


/* ================================
   BOTONES DE ACCIÓN INTERNOS
================================ */
form .btn,
.card .btn {
    font-size: 19px;
    padding: 5px 15px;
    border-radius: 16px;
}

/* botones chicos que ahora NO deben ser chicos */
.btn-sm {
    font-size: 18px !important;
    padding: 12px 18px !important;
}



#totalDia {
    font-size: 32px;
    font-weight: 900;
    color: #16a34a;
    background: #f0fdf4;
    padding: 18px;
    border-radius: 18px;
    width: fit-content;
}





/* ================================
   TABLAS TIPO CARRITO (FIX)
   Venta / Entrada actuales
================================ */

#listaVentaActual,
#listaEntradaActual {
    display: table !important;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* header */
#listaVentaActual thead,
#listaEntradaActual thead {
    display: table-header-group !important;
}

/* body */
#listaVentaActual tbody,
#listaEntradaActual tbody {
    display: table-row-group !important;
}

/* filas */
#listaVentaActual tr,
#listaEntradaActual tr {
    display: table-row !important;
}

/* celdas */
#listaVentaActual th,
#listaVentaActual td,
#listaEntradaActual th,
#listaEntradaActual td {
    display: table-cell !important;
    vertical-align: middle;
    white-space: nowrap;
}