*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #f0f2f5;
    --surface:   #ffffff;
    --primary:   #2563eb;
    --primary-h: #1d4ed8;
    --danger:    #dc2626;
    --danger-h:  #b91c1c;
    --outline:   #6b7280;
    --text:      #111827;
    --muted:     #6b7280;
    --border:    #e5e7eb;
    --radius:    0.5rem;
    --shadow:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --admin-bg:  #fef3c7;
    --admin-fg:  #92400e;
    --vend-bg:   #dbeafe;
    --vend-fg:   #1e40af;
}

html, body { overflow-x: hidden; max-width: 100%; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); }

/* ── Login ── */
.page-login { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-wrap  { width: 100%; max-width: 400px; padding: 1rem; }
.login-card  { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
               padding: 2.5rem 2rem; text-align: center; }
.login-logo  { color: var(--primary); margin-bottom: 1.5rem; }
.company-logo { width: 160px; height: auto; background: #1e293b; border-radius: .75rem; padding: .75rem 1rem; }
.login-card h1     { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.login-subtitle    { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }

/* ── Forms ── */
.form-group        { text-align: left; margin-bottom: 1rem; }
.form-group label  { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }
.form-group input  { width: 100%; padding: .625rem .75rem; border: 1px solid var(--border);
                     border-radius: var(--radius); font-size: .95rem; transition: border-color .15s; }
.form-group input:focus { outline: none; border-color: var(--primary);
                          box-shadow: 0 0 0 3px rgba(37,99,235,.2); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
       padding: .625rem 1rem; border: none; border-radius: var(--radius); font-size: .875rem;
       font-weight: 500; cursor: pointer; transition: background .15s, opacity .15s; text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-h); }
.btn-danger  { background: var(--danger);  color: #fff; }
.btn-danger:hover  { background: var(--danger-h); }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-outline { background: transparent; color: var(--outline); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg); }
.btn-full    { width: 100%; margin-top: .5rem; }
.btn-sm      { padding: .375rem .75rem; font-size: .8rem; }

/* ── Alert ── */
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .875rem; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-warn  { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }

/* ── Header ── */
.app-header { display: flex; align-items: center; justify-content: space-between;
              padding: .875rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border);
              box-shadow: var(--shadow); position: sticky; top: 0; z-index: 10; }
.header-brand { font-weight: 700; font-size: 1.1rem; color: var(--primary); display: flex; align-items: center; }
.header-logo  { height: 40px; width: auto; background: #1e293b; border-radius: .5rem; padding: .25rem .5rem; }
.header-user  { display: flex; align-items: center; gap: .75rem; }
.user-name    { font-size: .875rem; font-weight: 500; }

.role-badge   { font-size: .7rem; font-weight: 700; padding: .2rem .5rem;
                border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; }
.role-admin   { background: var(--admin-bg); color: var(--admin-fg); }
.role-vendedor{ background: var(--vend-bg);  color: var(--vend-fg); }

/* ── Menú desplegable de navegación ── */
.nav-dropdown        { position: relative; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-arrow  { font-size: .7rem; }
.nav-dropdown-menu   { position: fixed; top: 4.5rem; right: 1rem; bottom: 1rem; z-index: 20;
                       display: flex; flex-direction: column; min-width: 190px;
                       max-width: min(260px, calc(100vw - 2rem)); padding: .375rem;
                       background: var(--surface); border: 1px solid var(--border);
                       border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.nav-dropdown-divider, .nav-dropdown-item-danger { flex-shrink: 0; }
.nav-dropdown-item   { display: block; padding: .5rem .75rem; border-radius: .375rem;
                       font-size: .875rem; font-weight: 500; color: var(--text); text-decoration: none;
                       transition: background .15s; }
.nav-dropdown-item:hover    { background: var(--bg); }
.nav-dropdown-item-danger   { color: var(--danger); }
.nav-dropdown-divider       { height: 1px; background: var(--border); margin: .375rem 0; }

/* ── Layout ── */
.app-main    { padding: 1.5rem; }
.layout-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.layout-grid > * { min-width: 0; }
@media (max-width: 768px) { .layout-grid { grid-template-columns: 1fr; } }

.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }

/* ── Tabs ── */
.tabs    { display: flex; gap: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .75rem; }
.tab-btn { background: none; border: none; padding: .4rem .85rem; border-radius: var(--radius);
           font-size: .875rem; cursor: pointer; color: var(--muted); transition: all .15s; }
.tab-btn.active, .tab-btn:hover { background: var(--primary); color: #fff; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Camera ── */
#qr-reader         { width: 100%; border-radius: var(--radius); overflow: hidden; margin-bottom: .75rem; }
#qr-reader video   { width: 100%; }
.camera-actions    { display: flex; gap: .5rem; }

/* ── Código crudo QR ── */
.qr-raw-code  { margin: .5rem 0; padding: .5rem .75rem; background: #f8fafc; border: 1px solid var(--border);
                border-radius: var(--radius); font-size: .82rem; word-break: break-all; }
.qr-raw-label { color: var(--muted); margin-right: .4rem; }
.qr-raw-code code { color: #1e40af; font-family: monospace; }

/* ── Manual input ── */
.manual-row  { display: flex; gap: .5rem; }
.manual-row input { flex: 1; padding: .625rem .75rem; border: 1px solid var(--border);
                    border-radius: var(--radius); font-size: .95rem; }
.manual-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.hint { font-size: .8rem; color: var(--muted); margin-top: .5rem; }

/* ── Feedback ── */
.feedback       { margin-top: .75rem; padding: .625rem .875rem; border-radius: var(--radius);
                  font-size: .875rem; font-weight: 500; }
.feedback.ok    { background: #dcfce7; color: #166534; }
.feedback.error { background: #fee2e2; color: #991b1b; }

/* ── Botón eliminar fila ── */
.btn-del { background: none; border: none; color: #dc2626; cursor: pointer; font-size: .85rem;
           padding: .1rem .35rem; border-radius: .25rem; line-height: 1; }
.btn-del:hover { background: #fee2e2; }

/* ── Contador de ítems ── */
.count-badge { display: inline-flex; align-items: center; justify-content: center;
               background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700;
               min-width: 1.4rem; height: 1.4rem; border-radius: 99px; padding: 0 .4rem;
               vertical-align: middle; margin-left: .375rem; }

/* ── Results panel ── */
.results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.results-header h2 { font-size: 1rem; font-weight: 600; }
.results-actions { display: flex; gap: .5rem; }

.total-bar { display: flex; align-items: center; justify-content: space-between;
             background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius);
             padding: .625rem 1rem; margin-bottom: 1rem; }
.total-bar strong { font-size: 1.25rem; color: var(--primary); }

/* ── Table ── */
.table-wrap { overflow-x: auto; }
table  { width: 100%; border-collapse: collapse; font-size: .85rem; }
thead  { background: var(--bg); }
th, td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th     { font-weight: 600; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: #f9fafb; }

.empty-msg { color: var(--muted); font-size: .875rem; text-align: center; padding: 2rem 0; }

/* ── Granel ── */
.granel-section { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.granel-row     { display: flex; align-items: center; gap: .5rem; }
.granel-label   { font-size: .875rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.granel-input   { flex: 1; padding: .5rem .625rem; border: 1px solid var(--border);
                  border-radius: var(--radius); font-size: .95rem; }
.granel-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }

/* ── Fila granel en tabla ── */
tr.row-granel       { background: #f0fdf4 !important; }
tr.row-granel:hover { background: #dcfce7 !important; }

/* ── Input de precio editable en tabla ── */
.price-input { width: 82px; padding: .2rem .375rem; border: 1px solid var(--border);
               border-radius: .25rem; font-size: .85rem; text-align: right; }
.price-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.qty-input { width: 56px; }
.cell-subtotal { font-weight: 600; }

/* ── Modal de pago ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5);
                 display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-overlay[hidden] { display: none; }
.modal-dialog  { background: var(--surface); border-radius: var(--radius);
                 box-shadow: 0 20px 60px rgba(0,0,0,.3);
                 padding: 2rem; min-width: 300px; max-width: 90vw; }
.modal-dialog h3   { font-size: 1.125rem; font-weight: 700; margin-bottom: .75rem; }
.modal-total       { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.modal-total strong { font-size: 1.25rem; color: var(--primary); }
.modal-options     { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1.5rem; }
.modal-options label { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem;
                       border: 1px solid var(--border); border-radius: var(--radius);
                       cursor: pointer; font-size: .9rem; transition: background .1s; }
.modal-options label:hover { background: var(--bg); }
.modal-options label:has(input:checked) { border-color: #16a34a; background: #f0fdf4; }
.modal-obs-wrap  { display: none; margin-bottom: 1rem; }
.modal-options:has(input[value="deuda"]:checked) ~ .modal-obs-wrap { display: block; }

.cliente-wrap { display: none; margin-bottom: 1rem; }
.modal-options:has(input[value="deuda"]:checked) ~ .cliente-wrap { display: block; }
.cliente-seleccionado {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .75rem; border: 1px solid #16a34a; border-radius: var(--radius);
    background: #f0fdf4; font-size: .9rem; font-weight: 600;
}
.cliente-busqueda-row { display: flex; gap: .5rem; }
.cliente-busqueda-row .modal-obs-input { flex: 1; }
.cliente-resultados { margin-top: .5rem; max-height: 140px; overflow-y: auto; }
.cliente-resultado-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius);
    margin-top: .375rem; cursor: pointer; font-size: .85rem; transition: background .1s;
}
.cliente-resultado-item:hover { background: var(--bg); }
.cliente-resultado-vacio { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.btn-link {
    background: none; border: none; padding: .375rem 0; margin-top: .5rem;
    color: var(--primary); font-size: .85rem; font-weight: 600; cursor: pointer;
    text-decoration: underline;
}

.efectivo-wrap { display: none; margin-bottom: 1rem; }
.modal-options:has(input[value="efectivo"]:checked) ~ .efectivo-wrap { display: block; }
.efectivo-label { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); margin-bottom: .375rem; }
.efectivo-input {
    width: 100%; padding: .625rem .75rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 1.1rem; font-weight: 700;
    text-align: right; transition: border-color .15s;
}
.efectivo-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }

.cambio-display {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .5rem; padding: .5rem .75rem;
    background: #dcfce7; border-radius: var(--radius); transition: background .15s;
}
.cambio-display.insuficiente { background: #fee2e2; }
.cambio-display-label { font-size: .8rem; color: var(--muted); }
.cambio-positivo { color: #166534; font-weight: 700; font-size: 1rem; }
.cambio-negativo { color: #991b1b; font-weight: 700; font-size: .875rem; }

.mixto-wrap { display: none; margin-bottom: 1rem; }
.modal-options:has(input[value="mixto"]:checked) ~ .mixto-wrap { display: block; }
.mixto-medios { display: flex; flex-direction: column; gap: .5rem; }
.mixto-medio {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius);
}
.mixto-medio:has(.mixto-check:checked) { border-color: #16a34a; background: #f0fdf4; }
.mixto-medio-check {
    display: flex; align-items: center; gap: .5rem; font-size: .9rem;
    flex: 0 0 auto; min-width: 100px; cursor: pointer;
}
.mixto-monto {
    flex: 1; min-width: 0; padding: .5rem .625rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: .95rem; font-weight: 700;
    text-align: right; transition: border-color .15s;
}
.mixto-monto:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.mixto-monto:disabled { background: var(--bg); color: var(--muted); }
.mixto-banco {
    flex: 0 0 auto; padding: .5rem .625rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: .85rem; transition: border-color .15s;
}
.mixto-banco:disabled { background: var(--bg); color: var(--muted); }

.mixto-resumen {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .75rem; padding: .5rem .75rem; gap: .5rem;
    background: var(--bg); border-radius: var(--radius); font-size: .85rem;
}
.mixto-resumen-item strong { font-size: .95rem; }
#mixto-restante-wrap.mixto-falta  { color: #991b1b; }
#mixto-restante-wrap.mixto-cambio { color: #166534; }
.modal-obs-label { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); margin-bottom: .375rem; }
.modal-obs-input { width: 100%; padding: .5rem .75rem; border: 1px solid var(--border);
                   border-radius: var(--radius); font-size: .9rem; resize: vertical;
                   font-family: inherit; }
.modal-obs-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ── Modal resultado guardar producto ── */
.modal-resultado-dialog { max-width: 360px; }
.modal-resultado-dialog #modal-resultado-titulo.ok    { color: #166534; }
.modal-resultado-dialog #modal-resultado-titulo.error { color: #991b1b; }
.modal-resultado-dialog #modal-resultado-mensaje { color: var(--text); font-size: .9rem; margin-bottom: 1.25rem; }

/* ── Responsive mobile ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Header compacto */
    .app-header    { padding: .625rem 1rem; gap: .5rem; flex-wrap: wrap; }
    .header-logo   { height: 32px; }
    .user-name     { font-size: .8rem; }

    /* Limitar alto del preview de cámara (html5-qrcode puede ser muy alto) */
    #qr-reader     { max-height: 240px; overflow: hidden; }

    /* Main sin tanto padding */
    .app-main { padding: .75rem; }

    /* Panel results primero en móvil */
    .layout-grid { grid-template-columns: 1fr; }
    .panel-results { order: -1; }

    /* Botones de acción se envuelven */
    .results-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .results-actions { display: flex; flex-wrap: wrap; gap: .375rem; width: 100%; }
    .results-actions .btn { flex: 1; min-width: 70px; justify-content: center; }

    /* Touch targets mínimo 44px */
    .btn    { min-height: 44px; padding: .625rem .875rem; }
    .btn-sm { min-height: 40px; padding: .5rem .75rem; font-size: .82rem; }

    /* Tabs más grandes */
    .tab-btn { min-height: 40px; padding: .5rem 1rem; font-size: .875rem; }

    /* Inputs más grandes para dedo */
    .manual-row input,
    .granel-input,
    .form-group input { font-size: 1rem; min-height: 44px; }

    /* Granel en columna si es muy angosto */
    .granel-row { flex-wrap: wrap; }
    .granel-input { min-width: 0; }

    /* Precio editable más ancho */
    .price-input { width: 72px; font-size: .9rem; min-height: 36px; }

    /* Total bar */
    .total-bar strong { font-size: 1.4rem; }

    /* Eliminar botón más fácil de tocar */
    .btn-del { font-size: 1rem; padding: .25rem .5rem; min-height: 36px; min-width: 36px; }

    /* Modal ocupa casi toda la pantalla */
    .modal-dialog {
        width: calc(100vw - 1.5rem);
        max-width: 100%;
        padding: 1.5rem 1.25rem;
        border-radius: var(--radius);
    }
    .modal-options label { min-height: 48px; font-size: .95rem; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions .btn { width: 100%; min-height: 48px; }
}

@media (max-width: 400px) {
    .role-badge { display: none; }
    .results-actions .btn { font-size: .75rem; padding: .5rem .5rem; }
}

/* ── Ventas page ── */
.ventas-page      { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.ventas-toolbar   { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.ventas-title     { font-size: 1.25rem; font-weight: 700; }
.date-filter      { display: flex; gap: .5rem; align-items: center; }
.date-input       { padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .875rem; }
.date-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }

.fechas-disponibles { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.muted-label        { font-size: .8rem; color: var(--muted); }
.fecha-chip         { font-size: .78rem; padding: .2rem .6rem; border-radius: 99px;
                      background: var(--bg); border: 1px solid var(--border); color: var(--text);
                      text-decoration: none; transition: background .1s; }
.fecha-chip:hover   { background: #dbeafe; border-color: #93c5fd; }
.fecha-chip-active  { background: var(--primary); color: #fff; border-color: var(--primary); }

.stats-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card   { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; }
.stat-label  { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.stat-value  { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.stat-money  { color: var(--primary); }

.pago-breakdown  { }
.breakdown-title { font-size: .9rem; font-weight: 600; margin-bottom: .75rem; }

/* ── Resumen por vendedor (ventas.php) ── */
.vendedor-resumen-list { display: flex; flex-direction: column; gap: .5rem; }
.vendedor-resumen-item { display: flex; align-items: center; gap: 1rem;
    padding: .6rem .75rem; border-radius: var(--radius);
    background: var(--bg); border: 1px solid var(--border); }
.vendedor-nombre  { font-weight: 600; font-size: .9rem; min-width: 100px; }
.vendedor-total   { font-weight: 700; color: var(--primary); font-size: .9rem; }
.vendedor-count   { font-size: .8rem; color: var(--muted); flex: 1; }

/* ── Detalle vendedor (ventas_vendedor.php) ── */
.ventas-fecha-badge { font-size: .7rem; font-weight: 500; color: var(--muted);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 99px; padding: .15rem .6rem; margin-left: .5rem; vertical-align: middle; }
.breakdown-sub { opacity: .85; padding-left: .75rem; }
.breakdown-sub .badge-pago { font-size: .65rem; }
.breakdown-sub-label { font-size: .8rem; color: var(--muted); }
.breakdown-list  { display: flex; flex-wrap: wrap; gap: .75rem; }
.breakdown-item  { display: flex; align-items: center; gap: .5rem; }
.breakdown-monto { font-weight: 600; font-size: .9rem; }

.badge-pago      { font-size: .72rem; font-weight: 600; padding: .2rem .55rem;
                   border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.badge-efectivo  { background: #dcfce7; color: #166534; }
.badge-nequi     { background: #ede9fe; color: #5b21b6; }
.badge-daviplata { background: #fef3c7; color: #92400e; }
.badge-cuenta    { background: #dbeafe; color: #1e40af; }
.badge-deuda     { background: #fee2e2; color: #991b1b; }
.badge-mixto     { background: #fce7f3; color: #9d174d; }

.venta-id  { font-size: .78rem; color: var(--muted); font-family: monospace; }
.col-money { font-weight: 600; }
.col-muted { color: var(--muted); font-size: .82rem; }

/* ── Estados de cuenta (facturas proveedor / cuentas por cobrar) ── */
.badge-estado    { font-size: .72rem; font-weight: 600; padding: .2rem .55rem;
                   border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.badge-pendiente { background: #fef3c7; color: #92400e; }
.badge-parcial   { background: #dbeafe; color: #1e40af; }
.badge-pagada    { background: #dcfce7; color: #166534; }
.badge-anulada   { background: #fee2e2; color: #991b1b; }

/* ── Modal cambio efectivo ── */
.modal-cambio-dialog { text-align: center; min-width: 260px; }
.cambio-title  { font-size: .9rem; color: var(--muted); text-transform: uppercase;
                 letter-spacing: .06em; margin-bottom: .5rem; }
.cambio-monto  { font-size: 3.5rem; font-weight: 800; color: #16a34a;
                 line-height: 1; margin: .75rem 0 1.5rem; }
.cambio-desglose {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .75rem 1rem; background: var(--bg);
    border-radius: var(--radius); margin-bottom: 1.5rem; font-size: .875rem;
}
.cambio-row { display: flex; justify-content: space-between; align-items: center; }
.cambio-row span  { color: var(--muted); }
.cambio-row strong { color: var(--text); }
.cambio-actions { display: flex; gap: .5rem; }
.cambio-actions .btn { flex: 1; margin-top: 0; }

/* ── Modal búsqueda por nombre ── */
.modal-busqueda-dialog {
    min-width: min(720px, 95vw);
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0;
}
.modal-busqueda-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    flex-shrink: 0;
}
.modal-busqueda-header h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.modal-busqueda-count     { font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.btn-modal-close {
    background: none; border: none; cursor: pointer; flex-shrink: 0;
    font-size: 1.1rem; color: var(--muted); padding: .2rem .5rem;
    border-radius: var(--radius); line-height: 1;
}
.btn-modal-close:hover { background: var(--bg); color: var(--text); }

.modal-busqueda-body  { overflow-y: auto; flex: 1; }
.modal-busqueda-empty { text-align: center; padding: 2rem; color: var(--muted); font-size: .875rem; }

.btn-add-product {
    padding: .25rem .7rem; font-size: .8rem;
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius);
    cursor: pointer; white-space: nowrap; transition: background .15s;
}
.btn-add-product:hover    { background: var(--primary-h); }
.btn-add-product:disabled { background: #16a34a; cursor: default; }

tr.row-added            { background: #dcfce7 !important; }
tr.row-added:hover      { background: #bbf7d0 !important; }
tr.row-added td         { color: #166534; }

@media (max-width: 768px) {
    .modal-busqueda-dialog { max-height: 90vh; padding: 1rem; }
    .modal-busqueda-header h3 { font-size: .9rem; }
}

/* ── Modal detalle de factura (facturas_proveedor.php) ── */
.modal-detalle-dialog {
    min-width: min(640px, 95vw);
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0;
}
.modal-detalle-dialog .section-title:not(:first-of-type) { margin-top: 1.25rem; }

.detalle-info     { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; font-size: .9rem; }
.detalle-info-row { display: flex; justify-content: space-between; align-items: center;
                    padding: .35rem 0; border-bottom: 1px solid var(--border); }
.detalle-info-row span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

.checkbox-label { flex-direction: row !important; align-items: center; gap: .5rem;
                  text-transform: none !important; font-weight: 500 !important;
                  font-size: .875rem !important; color: var(--text) !important; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }

@media (max-width: 768px) {
    .modal-detalle-dialog { max-height: 90vh; padding: 1rem; }
}

/* ── Usuarios form ── */
.usuario-form   { }
.usuario-fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 1rem; align-items: start; }
@media (max-width: 768px) { .usuario-fields { grid-template-columns: 1fr; } }

/* ── Modal: banco (cuenta) ── */
.banco-wrap  { display: none; margin-bottom: 1rem; }
.modal-options:has(input[value="cuenta"]:checked) ~ .banco-wrap { display: block; }
.banco-label { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); margin-bottom: .375rem; }
.banco-select {
    width: 100%; padding: .625rem .75rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: .9rem; background: var(--surface);
    cursor: pointer; transition: border-color .15s;
}
.banco-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }

/* ── Formularios: select y textarea ── */
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .625rem .875rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: .925rem;
    background: var(--surface);
    font-family: inherit;
    color: var(--text);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-group select:hover,
.form-group textarea:hover {
    border-color: #93c5fd;
    background: #fafbff;
}
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--surface);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15), 0 1px 3px rgba(37,99,235,.1);
}

/* Select: flecha personalizada */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
}
.form-group select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
}

/* Textarea */
.form-group textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* Labels: asterisco requerido */
.form-group label {
    display: flex;
    align-items: center;
    gap: .2rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}
.form-group label .req { color: var(--danger); font-size: .85rem; line-height: 1; }

.input-readonly {
    background: var(--bg) !important;
    color: var(--muted);
    cursor: default;
    pointer-events: none;
    border-style: dashed !important;
}
/* Campos auto-rellenados: más compactos */
.form-group-auto         { margin-bottom: .625rem; }
.form-group-auto label   { font-size: .72rem; margin-bottom: .25rem; }
.form-group-auto input   { font-size: .875rem; padding: .4rem .75rem; color: var(--muted); }

/* ── Gastos page ── */
.page-gastos    { }
.gastos-page    { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.gastos-layout  { display: grid; grid-template-columns: 380px 1fr; gap: 1.5rem; align-items: start; }
.gastos-layout > * { min-width: 0; }
@media (max-width: 900px) { .gastos-layout { grid-template-columns: 1fr; } }
.gastos-form-card { }
.section-title  { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }

.producto-busqueda-row { display: flex; gap: .4rem; margin-bottom: .5rem; }
.producto-busqueda-row:last-child { margin-bottom: 0; }
.producto-busqueda-row input { flex: 1; min-width: 0; }

.producto-seleccionado {
    margin-top: .4rem; padding: .5rem .75rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    font-size: .85rem;
}

/* ── Buscador moderno (agregar producto a factura de proveedor) ── */
.mpf-search-box {
    display: flex; align-items: center; gap: .5rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
    padding: .3rem .3rem .3rem 1rem; margin-bottom: .6rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.mpf-search-box:focus-within {
    border-color: var(--primary); background: var(--surface);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.mpf-search-icon { color: var(--muted); font-size: 1.1rem; line-height: 1; }
.mpf-search-box input {
    flex: 1; min-width: 0; border: none; background: transparent;
    padding: .55rem 0; font-size: .9rem; color: var(--text);
}
.mpf-search-box input:focus { outline: none; }
.mpf-search-box .btn { border-radius: 999px; }

.mpf-divider {
    display: flex; align-items: center; gap: .6rem; margin: .75rem 0;
    color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
}
.mpf-divider::before, .mpf-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Conciliación page ── */
.page-conciliacion   { }
.conciliacion-subtitle { font-size: .875rem; color: var(--muted); margin-top: .25rem; }
.stat-card-pending { border-left: 3px solid var(--warning, #f59e0b); }
.conciliacion-t1-hint { font-size: .72rem; color: var(--muted); font-style: italic; }
.conciliacion-filtro-form {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin: .75rem 0 1.25rem;
}
.conciliacion-filtro-form label { font-size: .875rem; color: var(--muted); }
.conciliacion-filtro-form input[type="date"] {
    padding: .35rem .6rem; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: .875rem; background: var(--surface); color: var(--text);
}
.conciliacion-table  { }
.col-number          { text-align: right; }
.col-gasto           { color: #991b1b; }
.col-positivo        { color: #166534; font-weight: 700; }
.col-negativo        { color: #991b1b; font-weight: 700; }
.conciliacion-total-col { font-size: .95rem; }
.conciliacion-totals-row { background: var(--bg) !important; font-weight: 600; }
.conciliacion-nota   {
    margin-top: 1rem; font-size: .8rem; color: var(--muted);
    padding: .625rem .875rem; background: var(--bg);
    border-radius: var(--radius); border: 1px solid var(--border);
}
.conciliacion-nota code { font-size: .78rem; color: var(--text); }

/* ── Desglose de cuenta por banco ── */
.conciliacion-row-padre       { border-bottom: none !important; }
.conciliacion-desglose-hint   { font-size: .7rem; color: var(--muted); margin-left: .5rem; font-style: italic; }
.conciliacion-row-sub         { background: #f8faff !important; }
.conciliacion-row-sub:hover   { background: #eef3ff !important; }
.conciliacion-row-sub td      { border-bottom: 1px dashed var(--border) !important; }
.conciliacion-row-sub:last-of-type td { border-bottom: 2px solid var(--border) !important; }
.conciliacion-sub-label       { padding-left: 2rem !important; font-size: .83rem; color: var(--muted); }
.conciliacion-sub-indent      { color: var(--primary); margin-right: .35rem; }
.conciliacion-sub-val         { font-size: .83rem; }