:root {
    --sidebar-bg: #0f2a1a;
    --sidebar-bg-active: #163d24;
    --verde: #15803d;
    --verde-oscuro: #166534;
    --fondo: #f4f6f4;
    --texto: #1f2937;
    --borde: #e5e7eb;
    --error: #b91c1c;
    --error-bg: #fee2e2;
    --card-radius: 12px;
    --sidebar-width: 250px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--fondo);
    color: var(--texto);
}

a { color: inherit; }

/* ---------- Layout con sidebar (paginas autenticadas) ---------- */

.app-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: #dcfce7;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    transition: width 0.2s ease, padding 0.2s ease;
}

/* Sidebar colapsada en escritorio: solo iconos, mas espacio para el contenido */
.sidebar.collapsed {
    width: 76px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.sidebar.collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .user-meta { display: none; }
.sidebar.collapsed .side-nav a { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
.sidebar.collapsed .userbox { justify-content: center; }
.sidebar.collapsed .btn-logout { padding-left: 0.5rem; padding-right: 0.5rem; }

/* Sin transicion en la carga inicial de la pagina, para que el estado
   colapsado/abierto no "parpadee" al navegar entre vistas. */
.sidebar.no-transition { transition: none !important; }

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
}

.brand-icon { font-size: 1.5rem; }

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.side-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: #bbf7d0;
    font-size: 0.95rem;
}

.side-nav a svg.icon {
    flex-shrink: 0;
    opacity: 0.9;
}

.side-nav a:hover { background: rgba(255, 255, 255, 0.06); color: white; }

.side-nav a.active {
    background: var(--verde);
    color: white;
    font-weight: 600;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    margin-top: 1rem;
}

.userbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.userbox .avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta small { color: #86efac; text-transform: capitalize; }

.btn-logout {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #dcfce7;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}

.btn-logout:hover { background: rgba(255, 255, 255, 0.08); }

.main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    background: white;
    border-bottom: 1px solid var(--borde);
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.hamburger {
    display: inline-block;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    width: auto;
    padding: 0.25rem 0.5rem;
    color: var(--texto);
    border-radius: 6px;
}

.hamburger:hover { background: #f3f4f6; }

.topbar-spacer { flex: 1; }
.topbar-user { font-weight: 600; color: #374151; }
.user-meta small.user-bodega { text-transform: none; color: #bbf7d0; }
.topbar-bodega { background: #dcfce7; color: #166534; font-weight: 600; font-size: 0.85rem; padding: 4px 10px; border-radius: 999px; margin-right: 10px; white-space: nowrap; }
.topbar-bodega.sin-bodega { background: #fee2e2; color: #991b1b; }
.topbar-brand { display: none; align-items: center; gap: 0.4rem; font-weight: 700; }
.topbar-brand .brand-icon { font-size: 1.2rem; }

.container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
}

.container-auth {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* ---------- Componentes generales ---------- */

.card {
    background: white;
    border: 1px solid var(--borde);
    border-radius: var(--card-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ---------- Login ---------- */

.login-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

.login-brand-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--sidebar-bg), var(--verde-oscuro));
    color: white;
    padding: 3rem;
}

.login-brand-content { max-width: 380px; text-align: center; }
.login-brand-icon { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.login-brand-content h1 { margin-bottom: 0.5rem; }
.login-brand-content p { color: #bbf7d0; line-height: 1.5; }

.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: white;
}

.login-card {
    max-width: 380px;
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.login-card-icon {
    display: none;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.login-card h1 { margin-bottom: 0.25rem; }
.login-card form { text-align: left; margin-top: 1.5rem; }

.btn-login {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.75rem;
}

@media (max-width: 860px) {
    /* Movil: fondo verde con la marca arriba y el formulario como una hoja blanca que sube sobre el. */
    .login-shell { flex-direction: column; background: linear-gradient(160deg, var(--sidebar-bg), var(--verde-oscuro)); }
    .login-brand-panel {
        flex: 0 0 auto;
        background: transparent;
        padding: calc(2.25rem + env(safe-area-inset-top, 0px)) 1.5rem 3.5rem;
    }
    .login-brand-icon {
        display: flex; align-items: center; justify-content: center;
        width: 4.5rem; height: 4.5rem; margin: 0 auto 0.9rem;
        font-size: 2.4rem; border-radius: 22px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
    }
    .login-brand-content h1 { font-size: 1.6rem; }
    .login-brand-content p { font-size: 0.9rem; margin: 0; }
    .login-card-icon { display: none; }
    .login-form-panel {
        flex: 1;
        align-items: flex-start;
        margin-top: -1.75rem;
        padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
    }
    .login-card h1 { font-size: 1.35rem; }
    .login-card input { min-height: 50px; border-radius: 10px; background: #f9fafb; }
    .login-card input:focus { background: white; }
    .btn-login { min-height: 52px; font-size: 1.05rem; border-radius: 10px; }
}

label { display: block; margin-top: 0.75rem; font-weight: 600; font-size: 0.9rem; }

input, select, button {
    font-size: 1rem;
    padding: 0.55rem 0.65rem;
    margin-top: 0.25rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    width: 100%;
    font-family: inherit;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

button {
    background: var(--verde);
    color: white;
    border: none;
    cursor: pointer;
    width: auto;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
}

button:hover { background: var(--verde-oscuro); }

.inline-form { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; width: auto; }
.inline-form input, .inline-form select { width: auto; margin: 0; }

.btn {
    display: inline-block;
    background: var(--verde);
    color: white;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 { margin: 0 0 0.15rem; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

.table { width: 100%; border-collapse: collapse; background: white; border-radius: var(--card-radius); overflow: hidden; }
.table th, .table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; }
.table th { background: #f9fafb; font-size: 0.85rem; font-weight: 600; color: #4b5563; }

.badge { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; color: white; font-weight: 600; }
.badge-pendiente { background: #d97706; }
.badge-pagada { background: #16a34a; }
.badge-anulada { background: #6b7280; }

.role-badge { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.role-superadmin { background: #ede9fe; color: #6d28d9; }
.role-socio { background: #dbeafe; color: #1d4ed8; }
.role-bodeguero { background: #fef3c7; color: #b45309; }
.role-conductor { background: #cffafe; color: #0e7490; }

.status-pill { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.status-pill.status-activo { background: #dcfce7; color: #15803d; }
.status-pill.status-inactivo { background: #f3f4f6; color: #6b7280; }
.status-pill.status-saldo { background: #fee2e2; color: #dc2626; }
.status-pill.status-aldia { background: #dcfce7; color: #15803d; }
.status-pill.status-parcial { background: #fef3c7; color: #d97706; }

.alert {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 2rem 0.6rem 0.9rem;
    border-radius: 10px;
    margin: 0;
    width: max-content;
    max-width: min(420px, calc(100vw - 2rem));
    font-size: 0.88rem;
    line-height: 1.45;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    animation: alerta-entrada 0.25s ease-out;
}
.alert.alerta-saliendo { animation: alerta-salida 0.25s ease-in forwards; }
@keyframes alerta-entrada {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes alerta-salida {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}
.alert::before {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
}
.alert-error { background: var(--error-bg); color: var(--error); border-color: #fecaca; }
.alert-error::before { content: '!'; background: var(--error); }
.alert-exito { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* Aviso contextual dentro de un formulario (no flotante, no toast). */
.aviso-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    margin-top: 0.5rem;
}
.alert-exito::before { content: '\2713'; background: var(--verde); }
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert ul li { margin-bottom: 0.15rem; }
.alert ul li:last-child { margin-bottom: 0; }

.alert-cerrar {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
}
.alert-cerrar:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }

.muted { color: #6b7280; margin: 0; }

/* ---------- Botones pequenos de accion en filas de tabla ---------- */

.row-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }

/* Los botones de activar/desactivar/borrar van adentro de un <form> (para poder
   mandar su propio POST). Sin esto, ese <form> -no el <button> de adentro- es
   el item flex que ve .row-actions, y al ser un bloque sin flex propio puede
   quedar mal centrado verticalmente contra el link de editar (que si es un
   item flex directo). Convertirlo el tambien en flex centrado lo iguala. */
.row-actions form { display: inline-flex; align-items: center; }
/* ".card form + form" (mas abajo) separa formularios apilados con margen superior;
   en una fila de acciones eso empujaba el boton de borrar hacia abajo. */
.row-actions form, .card .row-actions form + form { margin: 0; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    border: 1px solid var(--borde);
    background: white;
    color: #4b5563;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}

.btn-icon svg.icon { display: block; }

.btn-icon:hover { background: #f3f4f6; }

.btn-icon-editar:hover { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
.btn-icon-borrar:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.btn-icon-activar:hover { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
.btn-icon-desactivar:hover { color: #d97706; border-color: #fde68a; background: #fffbeb; }

.btn-icon-disabled { color: #d1d5db; background: #f9fafb; cursor: not-allowed; }
.btn-icon-disabled:hover { background: #f9fafb; }

.avatar-cell { display: flex; align-items: center; gap: 0.65rem; }
.avatar-circle {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--verde);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.user-info { display: flex; flex-direction: column; gap: 0.15rem; }
.user-name { font-weight: 600; }
.user-info .role-badge { width: fit-content; padding: 0.05rem 0.5rem; font-size: 0.72rem; }

.date-cell { display: flex; flex-direction: column; gap: 0.1rem; }
.date-main { font-size: 0.9rem; }
.date-sub { font-size: 0.78rem; color: #6b7280; }

.btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid var(--borde);
}

.btn-secondary:hover { background: #f3f4f6; }

.form-actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; align-items: center; }
.form-actions button, .form-actions .btn { width: auto; }

.footer { text-align: center; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); color: #6b7280; font-size: 0.85rem; }

/* ---------- Tiles de estadisticas / accesos (dashboard) ---------- */

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.stat-tile {
    background: white;
    border: 1px solid var(--borde);
    border-radius: var(--card-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}

.stat-tile:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }

.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.stat-icon-green { background: #dcfce7; color: #15803d; }
.stat-icon .icon { width: 1.35rem; height: 1.35rem; }
.stat-icon-amber { background: #fef3c7; color: #d97706; }
.stat-icon-blue { background: #dbeafe; color: #2563eb; }

.stat-label { font-weight: 600; color: #374151; }
.stat-value { font-size: 1.1rem; font-weight: 700; }

/* ---------- Tarjetas de metricas numericas (usuarios) ---------- */

.metric-cards { margin-bottom: 1.5rem; }
@media (min-width: 901px) { .metric-cards { grid-template-columns: repeat(3, 1fr); } }

.metric-card {
    background: white;
    border: 1px solid var(--borde);
    border-radius: var(--card-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.metric-card .stat-value { font-size: 1.6rem; }
.metric-sub { font-size: 0.8rem; color: #6b7280; }
.dot-activo { color: #16a34a; }

.variacion-positiva { font-size: 0.8rem; color: #16a34a; font-weight: 600; }
.variacion-negativa { font-size: 0.8rem; color: #dc2626; font-weight: 600; }

/* ---------- Donut "Ventas por calibre" ---------- */
.donut-chart svg { max-width: 100%; height: auto; }
.donut-chart { display: flex; justify-content: center; align-items: center; position: relative; margin: 1rem 0; }
.donut-total { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.donut-total-value { font-size: 1.1rem; font-weight: 700; }
.donut-total-label { font-size: 0.78rem; color: #6b7280; }
.donut-legend { display: flex; flex-direction: column; gap: 0.5rem; }
.donut-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.donut-legend-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; }
.dot-inactivo { color: #6b7280; }

/* ---------- Formulario "Nueva venta" (tarjetas estilo app movil) ---------- */

.venta-form-grid, .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.venta-producto-header, .venta-pago-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--verde-oscuro);
    margin-bottom: 1rem;
}

.venta-calibre-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.venta-pill {
    background: #ecfdf5;
    color: var(--verde-oscuro);
    font-weight: 700;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    min-width: 2.4rem;
    text-align: center;
    flex-shrink: 0;
}

.venta-calibre-label { color: #6b7280; font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; }

.venta-calibre-row input { flex: 1; min-width: 5rem; margin-top: 0; }

.venta-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borde);
    font-weight: 700;
    font-size: 1.05rem;
}

.venta-subtotal-row .venta-subtotal-valor { color: var(--verde); }

.venta-pago-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.venta-totales { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }

.venta-total-box { background: #f9fafb; border-radius: var(--card-radius); padding: 0.75rem 1rem; text-align: center; }
.venta-total-label { font-size: 0.78rem; color: #6b7280; }
.venta-total-valor { display: block; font-size: 1.15rem; font-weight: 700; margin-top: 0.15rem; }
.venta-total-box.venta-deuda .venta-total-valor { color: #dc2626; }

.btn-generar-venta {
    width: 100%;
    padding: 0.85rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

@media (max-width: 640px) {
    .venta-form-grid, .venta-pago-grid, .form-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .venta-calibre-row { gap: 0.4rem; flex-wrap: nowrap; }
    .venta-calibre-row input { min-width: 0; padding: 0.5rem 0.4rem; font-size: 1rem; }
    .venta-calibre-label { font-size: 0.75rem; }
    .venta-pill { padding: 0.45rem 0.5rem; min-width: 2rem; font-size: 0.85rem; }
}

/* ---------- Tabs / filtros de la lista de usuarios ---------- */

.tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 1.25rem;
}

.tab {
    padding: 0.8rem 0.4rem;
    margin-bottom: -1px;
    color: #6b7280;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    margin-right: 1.25rem;
}

.tab.active { color: var(--verde); border-bottom-color: var(--verde); }

.filter-bar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.select-input {
    width: auto;
    margin: 0;
    min-width: 170px;
}

.search-input {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-input input {
    width: 100%;
    margin: 0;
    padding-left: 2.1rem;
}

.search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.6;
}

.btn-filtrar { width: auto; margin: 0; }

.id-cell { color: #6b7280; font-size: 0.85rem; }

/* ---------- Paginacion ---------- */

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.pagination-info { font-size: 0.85rem; color: #6b7280; }

.pagination-links { display: flex; gap: 0.3rem; }

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--borde);
    color: #374151;
    text-decoration: none;
    font-size: 0.85rem;
}

.page-link:hover { background: #f3f4f6; }
.page-link.active { background: var(--verde); border-color: var(--verde); color: white; }
.page-link.disabled { opacity: 0.4; pointer-events: none; }

/* ---------- Roles del sistema (tarjetas informativas) ---------- */

.roles-header { margin-top: 2rem; }
.roles-header h2 { margin: 0; }

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.role-info-card {
    background: white;
    border: 1px solid var(--borde);
    border-radius: var(--card-radius);
    padding: 1.25rem;
}

.role-info-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.role-info-head p { margin: 0; font-size: 0.8rem; }

.role-info-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.role-info-list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: #4b5563; display: flex; flex-direction: column; gap: 0.35rem; }

.oculto { display: none !important; }

[data-ajax-panel][aria-busy="true"] { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }

/* ---------- Inventario: fila de totales en tablas pivote ---------- */

.table tr.fila-total td { background: #f0fdf4; font-weight: 700; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    }

    .sidebar.open { transform: translateX(0); }

    .hamburger { display: inline-block; }

    .container { padding: 1rem; }
}

@media (max-width: 600px) {
    .page-header { flex-direction: column; align-items: flex-start; }
    .topbar-user { display: none; }
    .table th, .table td { padding: 0.6rem; }
    .row-actions { flex-wrap: wrap; }
    .row-actions > * { flex: 1 1 auto; }
}

/* ---------- Responsive: vista de usuarios ---------- */

@media (max-width: 900px) {
    .metric-cards { grid-template-columns: repeat(2, 1fr); }
    .roles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .metric-cards { grid-template-columns: 1fr; }

    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .tab { flex-shrink: 0; }

    .filter-bar { flex-direction: column; align-items: stretch; }
    .select-input, .search-input { width: 100%; min-width: 0; }

    .pagination { flex-direction: column; align-items: stretch; text-align: center; }
    .pagination-links { justify-content: center; flex-wrap: wrap; }
}

/* ---------- Perfil de conductor: navegacion movil tipo app ---------- */

.mobile-tabbar { display: none; }

.mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.25rem;
    border-radius: 10px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
}
.mobile-tab:hover { background: #f3f4f6; }
.mobile-tab.active { color: var(--verde-oscuro); }

@media (max-width: 900px) {
    body.rol-conductor .topbar,
    body.rol-bodeguero .topbar {
        background: linear-gradient(160deg, var(--sidebar-bg), var(--verde-oscuro));
        border-bottom: none;
    }
    body.rol-conductor .hamburger,
    body.rol-bodeguero .hamburger { color: white; }
    body.rol-conductor .hamburger:hover,
    body.rol-bodeguero .hamburger:hover { background: rgba(255, 255, 255, 0.12); }
    body.rol-conductor .topbar-brand,
    body.rol-bodeguero .topbar-brand { display: flex; color: white; }
    body.rol-conductor .topbar-user,
    body.rol-bodeguero .topbar-user { display: none; }
    body.rol-conductor .topbar-bodega:not(.sin-bodega),
    body.rol-bodeguero .topbar-bodega:not(.sin-bodega) { background: rgba(255, 255, 255, 0.16); color: white; }

    body.rol-conductor .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background: white;
        border-top: 1px solid var(--borde);
        padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    }

    body.rol-conductor .container { padding-bottom: 5.5rem; }
}

/* ---------- Movil: cajon lateral, zonas seguras y tactil (Safari iOS / Chrome Android) ---------- */

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

/* Con viewport-fit=cover el contenido llega hasta el notch: se compensa con las zonas seguras. */
.topbar {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
}

@media (max-width: 900px) {
    body.menu-abierto { overflow: hidden; }

    .topbar {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }

    .container {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    /* Cajon: alto dinamico (dvh) para que el pie -usuario y "Cerrar sesion"- quede
       por encima de la barra de Safari, con espacio extra abajo por si la barra
       vuelve a aparecer. El menu hace scroll por dentro si la pantalla es corta. */
    .sidebar {
        width: min(82vw, 300px);
        height: 100vh;
        height: 100dvh;
        padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
    }

    /* El estado "colapsado" es solo de escritorio. */
    .sidebar.collapsed { width: min(82vw, 300px); }

    .sidebar-footer {
        margin-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .btn-logout { padding: 0.75rem; min-height: 44px; }

    .side-nav a { padding: 0.8rem 0.75rem; min-height: 44px; }

    .hamburger { padding: 0.5rem 0.75rem; min-height: 44px; min-width: 44px; font-size: 1.5rem; }

    /* iOS hace zoom al enfocar campos con fuente menor a 16px. */
    input, select, textarea { font-size: 16px; }
}

@media (max-width: 600px) {
    .card { padding: 1rem; margin-bottom: 1rem; }

    /* Avisos flotantes: ocupan el ancho y respetan el notch. */
    .alert {
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
    }

    /* Botones de accion en cabeceras y formularios: a lo ancho y faciles de tocar. */
    .page-header { gap: 0.75rem; margin-bottom: 1rem; }
    .page-header > .row-actions, .page-header > .btn { width: 100%; }
    .page-header .row-actions { flex-wrap: wrap; }
    .page-header .row-actions > .btn { flex: 1 1 100%; text-align: center; }

    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions button, .form-actions .btn { width: 100%; text-align: center; }
    .btn, button { min-height: 44px; }
    .alert-cerrar { min-height: 0; }

    .table th, .table td { font-size: 0.88rem; }
}

/* Pantallas tactiles: objetivos de al menos ~44px y sin efectos hover que se quedan pegados. */
@media (pointer: coarse) {
    .btn-icon { width: 2.75rem; height: 2.75rem; }
    .tab { padding-top: 0.8rem; padding-bottom: 0.8rem; }
    .page-link { min-width: 2.5rem; height: 2.5rem; }
    .stat-tile:hover { transform: none; box-shadow: none; }
}

/* Barra inferior del conductor: etiquetas largas en dos lineas y por encima del indicador de Safari. */
.mobile-tab span { text-align: center; line-height: 1.15; }

@media (max-width: 900px) {
    body.rol-conductor .mobile-tabbar {
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
    body.rol-conductor .mobile-tab { min-height: 48px; justify-content: center; }
    body.rol-conductor .container { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Botones, espaciado y tablas: pulido de legibilidad ---------- */

/* Texto de botones y enlaces-boton siempre centrado (tambien cuando ocupan todo el ancho). */
.btn, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    line-height: 1.25;
}

.btn-block { width: 100%; }

/* <summary class="btn"> dentro de <details>: sin la flechita del navegador y centrado. */
summary.btn {
    display: flex;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ''; }
details[open] > summary.btn { margin-bottom: 0.75rem; }

/* Aire entre titulos, textos, tablas y botones dentro de las tarjetas (.muted no tiene margen). */
.card > h2:first-child { margin-top: 0; }
.card > .muted:not(:last-child) { margin-bottom: 1rem; }
.card > .table-wrap + .muted,
.card > .table-wrap + form,
.card > .table-wrap + .form-grid-2,
.card > .table-wrap + a.btn { margin-top: 1rem; }
.card > .table-wrap + .muted + form { margin-top: 0; }
.card .card { background: #fafafa; margin-bottom: 0.75rem; }
.card .card:last-child { margin-bottom: 0; }
.muted .status-pill { line-height: 1.3; margin-top: 0.15rem; }
.card form + form { margin-top: 0.75rem; }

/* Tablas: contenedor con borde, filas alternadas y resaltado al pasar el mouse. */
.table-wrap {
    border: 1px solid var(--borde);
    border-radius: var(--card-radius);
    background: white;
}
.table { border-radius: 0; }
.table tbody tr:nth-child(even) td { background: #fafbfa; }
.table tbody tr:hover td { background: #f3f8f4; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.fila-total td { background: #f0fdf4 !important; }
.table td { vertical-align: middle; }
.table td a:not(.btn):not(.btn-icon) { color: var(--verde-oscuro); font-weight: 600; text-decoration: none; }
.table td a:not(.btn):not(.btn-icon):hover { text-decoration: underline; }

/* Tablas chicas (pocas columnas): en movil el texto se ajusta en vez de obligar a hacer scroll. */
@media (max-width: 600px) {
    .table-compact th, .table-compact td {
        white-space: normal;
        padding: 0.7rem 0.6rem;
        line-height: 1.3;
    }
    .table-compact th { font-size: 0.7rem; letter-spacing: 0.02em; vertical-align: bottom; }
    .table-compact td { font-size: 0.9rem; }
    .form-grid-2 { row-gap: 0.75rem; }
}

/* Listas largas (ej. historial de ventas): en movil cada fila es una tarjeta con etiqueta: valor. */
@media (max-width: 700px) {
    .table-wrap:has(> .table-cards) { border: 0; background: transparent; overflow: visible; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards { background: transparent; }
    .table-cards thead { display: none; }
    .table-cards tbody tr {
        background: white;
        border: 1px solid var(--borde);
        border-radius: var(--card-radius);
        margin-bottom: 0.85rem;
        padding: 0.4rem 1rem;
    }
    .table-cards tbody tr:nth-child(even) td,
    .table-cards tbody tr:hover td { background: transparent; }
    .table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.6rem 0;
        border-bottom: 1px dashed var(--borde);
        white-space: normal;
        text-align: right;
    }
    .table-cards tbody tr td:last-child { border-bottom: 0; }
    .table-cards td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #6b7280;
        text-align: left;
    }
    .table-cards td:not([data-label])::before { content: none; }
    .table-cards td[colspan] { display: block; text-align: center; color: #6b7280; }
}

@media (max-width: 600px) {
    .btn-block-movil { width: 100%; }
}

/* ---------- Campos de fecha: se adaptan al ancho disponible ---------- */
/* input[type=date] trae un ancho minimo propio (sobre todo en Safari iOS) que ignora
   width y se sale del marco; los hijos de grid/flex tampoco se encogen sin min-width: 0. */
input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
    min-height: 2.6rem;
    text-align: left;
    background-color: white;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.form-grid-2 > *, .venta-form-grid > *, .venta-pago-grid > * { min-width: 0; }

/* Barra de filtros: los campos se reparten el ancho y bajan de linea si no caben. */
.filter-bar > .select-input, .filter-bar > input[type="date"] { flex: 1 1 10rem; width: auto; min-width: 0; }
.filter-bar > .search-input { flex: 2 1 14rem; min-width: 0; }

@media (max-width: 640px) {
    .filter-bar > .select-input, .filter-bar > input[type="date"], .filter-bar > .search-input { flex: 1 1 100%; width: 100%; }
}

/* ---------- Dashboards con graficos ---------- */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    align-items: start;
}
.dash-grid > * { min-width: 0; }
.dash-grid .card { margin-bottom: 0; }
.dash-ancho { grid-column: 1 / -1; }
.dash-ancho > .card { margin-bottom: 0; }

.chart-periodo { margin-bottom: 1rem; }
.chart-card h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.chart-sub { margin: 0 0 1rem; font-size: 0.82rem; }
.chart-vacio { text-align: center; padding: 1.75rem 0.5rem; }

/* Barras verticales por dia (SVG que escala con el contenedor) */
.chart-wrap { width: 100%; }
.chart-svg { display: block; width: 100%; height: auto; max-height: 280px; overflow: visible; }
.chart-grid { stroke: #e5e7eb; stroke-width: 0.6; }
.chart-eje { fill: #6b7280; font-size: 8px; font-family: inherit; }
.chart-barra { transition: opacity 0.15s; }
.chart-barra:hover { opacity: 0.75; }

/* Ranking / barras horizontales */
.hbar-list { display: flex; flex-direction: column; gap: 0.85rem; }
.hbar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: 0.9rem; margin-bottom: 0.3rem; }
.hbar-label { color: #374151; overflow-wrap: anywhere; }
.hbar-head strong { white-space: nowrap; }
.hbar-track { height: 0.7rem; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 999px; min-width: 3px; transition: width 0.4s ease; }
.hbar-stack { display: flex; height: 100%; border-radius: 999px; overflow: hidden; min-width: 3px; }
.hbar-seg { display: block; height: 100%; }
.hbar .metric-sub { display: block; margin-top: 0.2rem; }

.chart-leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; font-size: 0.82rem; color: #4b5563; }
.chart-leyenda-item { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Donut */
.chart-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.chart-donut { width: 170px; height: 170px; max-width: 100%; display: block; }
.chart-donut-wrap .donut-legend { align-self: stretch; }
.chart-donut-wrap .donut-chart { margin: 0; }

/* Indicadores clicables y avisos */
.metric-card-link { text-decoration: none; color: inherit; transition: box-shadow 0.15s, transform 0.15s; }
.metric-card-link:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }

.dash-alertas { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.dash-alerta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    text-decoration: none;
    font-size: 0.92rem;
}
a.dash-alerta:hover { background: #fef3c7; }
.dash-alerta span { margin-left: auto; font-weight: 600; }
.dash-alerta-ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

.dash-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }

@media (max-width: 640px) {
    .dash-grid { gap: 1rem; }
    .chart-eje { font-size: 11px; }
    .dash-acciones { grid-template-columns: 1fr; }
    .chart-periodo { margin-bottom: 0.75rem; }
}

/* Campo de filtro con etiqueta visible (p. ej. Fecha inicial / Fecha final) */
.filter-bar > .filter-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 10rem; min-width: 0; margin: 0; }
.filter-field > span { font-size: 0.78rem; font-weight: 600; color: #6b7280; }
.filter-field > input { width: 100%; min-width: 0; }
@media (max-width: 900px) { .filter-bar > .filter-field { flex: 1 1 100%; } }

/* En movil el boton principal va ARRIBA de "Cancelar" (por defecto .form-actions lo deja abajo) */
@media (max-width: 900px) { .form-actions.form-actions-principal-arriba { flex-direction: column; } }

/* ---------- Utilidades ---------- */
.util-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.util-columnas > .card { margin-bottom: 1.5rem; }
@media (max-width: 900px) { .util-columnas { grid-template-columns: 1fr; gap: 0; } }
.util-titulo { font-size: 1.05rem; margin: 0 0 0.5rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--borde); }
.util-titulo-egreso { color: #b91c1c; border-bottom-color: #fecaca; }
.util-titulo-ingreso { color: #15803d; border-bottom-color: #bbf7d0; }
.util-fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid #f3f4f6; }
.util-fila:last-child { border-bottom: none; }
.util-fila > div { min-width: 0; }
.util-label { display: block; font-weight: 600; color: #374151; }
.util-ayuda { display: block; font-size: 0.8rem; color: #6b7280; margin-top: 0.15rem; }
.util-valor { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.util-valor-ingreso { color: #15803d; }
.util-valor-egreso { color: #b91c1c; }
.util-editar { padding: 0 0 0.8rem; border-bottom: 1px solid #f3f4f6; }
.util-editar summary { cursor: pointer; padding: 0.6rem 0; font-size: 0.85rem; color: var(--verde-oscuro); }
.util-editar-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.util-editar-form input { flex: 1; min-width: 0; margin: 0; }
.util-editar-form button { width: auto; margin: 0; }
.util-resultado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.util-resultado-label { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.util-resultado-valor { font-size: 1.6rem; font-weight: 800; white-space: nowrap; }
.util-positiva { background: #f0fdf4; border-color: #bbf7d0; }
.util-positiva .util-resultado-valor { color: #15803d; }
.util-negativa { background: #fef2f2; border-color: #fecaca; }
.util-negativa .util-resultado-valor { color: #b91c1c; }

/* ---------- Avisos (ver Aviso.php y initAvisos en main.js) ---------- */
.nav-badge { margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 0.4rem; border-radius: 999px; background: #dc2626; color: white; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nav-badge[hidden] { display: none; }
.sidebar.collapsed .nav-badge { position: absolute; top: 0.2rem; right: 0.2rem; margin: 0; min-width: 1.1rem; height: 1.1rem; font-size: 0.65rem; padding: 0 0.25rem; }
.side-nav a { position: relative; }
.hamburger { position: relative; }
.hamburger-dot { position: absolute; top: 0.25rem; right: 0.25rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #dc2626; border: 2px solid white; }
.hamburger-dot[hidden] { display: none; }
.avisos:empty { display: none; }
.avisos { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.aviso-banner { display: block; padding: 0.75rem 1rem 0.75rem 2.4rem; border-radius: 10px; background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-weight: 600; text-decoration: none; position: relative; }
.aviso-banner::before { content: '!'; position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #d97706; color: white; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; }
.aviso-banner:hover { background: #fde68a; }

/* ---------- Cierre de bodega ---------- */
.texto-negativo { color: #b91c1c; font-weight: 600; }
.texto-positivo { color: #15803d; font-weight: 600; }
.fila-alerta td { background: #fef2f2; }

.nav-badge.nav-badge-info { background: #f59e0b; }
.stat-icon-red { background: #fee2e2; color: #b91c1c; }

/* ---------- Tablero de merma ---------- */
.merma-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.merma-filtros .chart-periodo { margin-bottom: 0; }
.merma-filtros form { margin: 0; }
.merma-filtros select { width: auto; min-width: 200px; margin: 0; }
#merma-panel > .aviso-banner { margin-bottom: 1.25rem; }
@media (max-width: 600px) { .merma-filtros select { width: 100%; } .merma-filtros form { width: 100%; } }

/* ---------- Movil: pistas de scroll en tablas anchas y accion principal fija ---------- */
@media (max-width: 700px) {
    /* Sombras en los bordes que aparecen solo si la tabla se puede desplazar hacia ese lado. */
    .table-wrap:not(:has(> .table-cards)) {
        background:
            linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)) left center / 2rem 100% no-repeat local,
            linear-gradient(to left, white 30%, rgba(255, 255, 255, 0)) right center / 2rem 100% no-repeat local,
            linear-gradient(to right, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) left center / 0.8rem 100% no-repeat scroll,
            linear-gradient(to left, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) right center / 0.8rem 100% no-repeat scroll;
    }
}

@media (max-width: 900px) {
    /* Boton principal siempre a la mano en formularios largos (arriba de la barra inferior del conductor). */
    .form-actions-fijo {
        position: sticky;
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        z-index: 20;
        background: var(--fondo);
        padding: 0.6rem 0;
        box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.18);
    }
    body.rol-conductor .form-actions-fijo { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
    .form-actions-fijo button { min-height: 48px; font-size: 1.05rem; }
    .form-actions-fijo .btn-secondary { display: none; }
}

/* ---------- Legibilidad: cifras alineadas y estados vacios ---------- */
.table td, .table th, .stat-value, .metric-sub, .util-valor { font-variant-numeric: tabular-nums; }

.table tr.fila-vacia td,
.table tr.fila-vacia:hover td {
    text-align: center;
    white-space: normal;
    padding: 2rem 1rem;
    color: #6b7280;
    background: white;
}
.table .num { text-align: right; }

/* Pantallas anchas: los 6 KPIs en una sola fila. */
@media (min-width: 1400px) {
    .metric-cards:has(> :nth-child(6)) { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Utilidades: resumen arriba, detalle abajo ---------- */
.util-kpis .stat-value { font-size: 1.9rem; }
.util-kpis .metric-card:last-child { border-width: 2px; }
.util-kpis .metric-card:nth-child(1) .stat-value { color: #15803d; }
.util-kpis .metric-card:nth-child(2) .stat-value { color: #b91c1c; }
.util-kpis .metric-card:nth-child(3):has(.stat-icon-green) { background: #f0fdf4; border-color: #86efac; }
.util-kpis .metric-card:nth-child(3):has(.stat-icon-red) { background: #fef2f2; border-color: #fca5a5; }
.util-kpis .metric-card:nth-child(3):has(.stat-icon-red) .stat-value { color: #b91c1c; }
.util-kpis .metric-card:nth-child(3):has(.stat-icon-green) .stat-value { color: #15803d; }
.util-card .util-titulo { font-size: 0.95rem; font-weight: 700; }

/* ---------- Movil: objetivos tactiles y campos dentro de tarjetas ---------- */
@media (max-width: 700px) {
    .table-cards td a:not(.btn):not(.btn-icon) { display: inline-block; padding: 0.55rem 0.25rem; }
    .table-cards td input, .table-cards td select { width: 55%; max-width: 12rem; margin: 0; text-align: right; }
    .card .page-header > a { display: inline-block; padding: 0.55rem 0; }
}
@media (max-width: 900px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 44px; }
}

/* ---------- Conductor y bodeguero: tableros compactos ---------- */
/* Con 4 tarjetas (bodeguero, merma) en escritorio: una sola fila en vez de 3 + 1. */
@media (min-width: 901px) {
    .metric-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
    /* Los KPIs de campo van de a 2 por fila para no obligar a hacer scroll de más. */
    body.rol-conductor .metric-cards,
    body.rol-bodeguero .metric-cards { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    body.rol-conductor .metric-cards > :last-child:nth-child(odd),
    body.rol-bodeguero .metric-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    body.rol-conductor .metric-card,
    body.rol-bodeguero .metric-card { padding: 0.9rem; gap: 0.25rem; }
    body.rol-conductor .metric-card .stat-value,
    body.rol-bodeguero .metric-card .stat-value { font-size: 1.3rem; }
    body.rol-conductor .metric-card .stat-icon,
    body.rol-bodeguero .metric-card .stat-icon { width: 2.1rem; height: 2.1rem; }

    /* Accion principal del conductor: grande y facil de tocar con el pulgar. */
    body.rol-conductor .dash-acciones .btn,
    body.rol-bodeguero .dash-acciones .btn { min-height: 52px; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; }
}

/* ---------- Login: detalles ---------- */
.campo-password { position: relative; }
.campo-password input { padding-right: 3rem; }
.btn-ver-password {
    position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
    margin: 0; padding: 0; width: 2.5rem; height: 2.5rem; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: #6b7280; border: none; border-radius: 8px;
}
.btn-ver-password:hover { background: #f3f4f6; color: var(--texto); }
.btn-ver-password.activo { color: var(--verde); }
.login-card input:focus { box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2); }

@media (max-width: 860px) {
    /* Circulos suaves de fondo para dar profundidad al verde. */
    .login-shell { position: relative; overflow: hidden; }
    .login-shell::before, .login-shell::after {
        content: ''; position: absolute; border-radius: 50%; pointer-events: none;
        background: rgba(255, 255, 255, 0.06);
    }
    .login-shell::before { width: 16rem; height: 16rem; top: -6rem; right: -5rem; }
    .login-shell::after { width: 10rem; height: 10rem; top: 5rem; left: -4rem; }
    .login-brand-panel, .login-form-panel { position: relative; z-index: 1; }
    .login-card .muted { margin-bottom: 0.25rem; }
}

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
    .login-form-panel { animation: login-subir 0.45s ease-out both; }
    .login-brand-content { animation: login-aparecer 0.6s ease-out both; }
}
@keyframes login-subir { from { transform: translateY(2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes login-aparecer { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }

/* ---------- Caja: tarjetas (efectivo / transferencia) + desglose ---------- */
.caja-registrar { border-bottom: 0; padding-bottom: 0; }
.caja-registrar form { margin-top: 0.6rem; }
.caja-pista { display: none; }
.caja-tarjetas, .caja-paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.caja-tarjetas > .card, .caja-paneles > .card { margin-bottom: 1.25rem; min-width: 0; }
.caja-total { display: flex; flex-direction: column; gap: 0.35rem; border-width: 2px; }
.caja-total:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.caja-total-efectivo { border-color: #86efac; background: #f0fdf4; }
.caja-total-transferencia { border-color: #93c5fd; background: #eff6ff; }
.caja-total-label { font-weight: 600; color: #374151; }
.caja-total-valor { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #111827; overflow-wrap: anywhere; }
.caja-total-efectivo .caja-total-valor { color: #15803d; }
.caja-total-transferencia .caja-total-valor { color: #1d4ed8; }
.caja-total-negativo .caja-total-valor { color: #b91c1c; }
.caja-resumen { margin-top: 0.5rem; border-top: 1px solid rgba(0, 0, 0, 0.08); font-variant-numeric: tabular-nums; }
.caja-resumen .util-fila { padding: 0.45rem 0; border-bottom-color: rgba(0, 0, 0, 0.05); }
.caja-resumen .util-fila > span:last-child { font-weight: 600; white-space: nowrap; }
.caja-resumen-panel { display: none; }
.caja-mov { align-items: flex-start; }
.caja-mov .util-label { font-weight: 500; overflow-wrap: anywhere; }
.caja-mov .util-valor { font-size: 0.98rem; font-variant-numeric: tabular-nums; }

/* En pantallas angostas: las dos tarjetas lado a lado y abajo solo el
   desglose de la tarjeta seleccionada (se cambia tocando la tarjeta). */
@media (max-width: 900px) {
    .caja-pista { display: block; margin: 0 0 0.5rem; font-size: 0.85rem; }
    .caja-tarjetas { gap: 0.6rem; margin-bottom: 0.4rem; }
    .caja-tarjetas > .card { margin-bottom: 0; }
    .caja-total { padding: 0.85rem; gap: 0.2rem; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; }
    .caja-total.caja-activa { opacity: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
    .caja-total .stat-icon { width: 2rem; height: 2rem; }
    .caja-total-label { font-size: 0.85rem; }
    .caja-total-valor { font-size: 1.2rem; }
    .caja-total .metric-sub { font-size: 0.72rem; }
    .caja-resumen-tarjeta { display: none; }
    .caja-resumen-panel { display: block; margin: 0 0 0.5rem; }
    .caja-paneles { grid-template-columns: 1fr; gap: 0; }
    .caja-lista { display: none; }
    .caja-lista.caja-activa { display: block; }
    .caja-lista.caja-activa .caja-resumen-panel { border-top: 0; }
}

/* Tienda (views/tienda): atajo "Todo en efectivo" bajo cada medio de pago y boton apagado cuando la tienda ya cerro. */
[data-venta-pagar-todo] { margin-top: 0.5rem; font-size: 0.85rem; }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* ==========================================================================
   Tienda del bodeguero (views/tienda): pensada para celular y para alguien
   con poca practica. Botones grandes, una pregunta por pantalla al vender.
   ========================================================================== */

.btn-grande { min-height: 56px; font-size: 1.1rem; padding: 0.8rem 1.25rem; border-radius: 12px; }
.input-grande { font-size: 1.5rem; padding: 0.75rem; font-weight: 700; }

/* Barra inferior del bodeguero (Tienda / Vender / Cerrar dia), igual a la del conductor. */
@media (max-width: 900px) {
    body.rol-bodeguero .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background: white;
        border-top: 1px solid var(--borde);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        padding: 0.4rem max(0.5rem, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
    }
    body.rol-bodeguero .mobile-tab { min-height: 52px; justify-content: center; font-size: 0.8rem; }
    body.rol-bodeguero .mobile-tab-principal { background: var(--verde); color: white; margin: 0 0.35rem; }
    body.rol-bodeguero .mobile-tab-principal.active { color: white; background: var(--verde-oscuro); }
    body.rol-bodeguero .container { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}

/* Inicio de la tienda */
.tienda-hoy {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.tienda-hoy > div {
    background: white;
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.tienda-hoy span { font-size: 0.8rem; color: #6b7280; font-weight: 600; }
.tienda-hoy strong { font-size: 1.15rem; }

.tienda-acciones { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.tienda-accion {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 76px;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: white;
    border: 2px solid var(--borde);
    text-decoration: none;
    color: var(--texto);
}
.tienda-accion strong { display: block; font-size: 1.15rem; }
.tienda-accion small { display: block; color: #6b7280; font-size: 0.9rem; margin-top: 0.15rem; }
.tienda-accion-icono {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0fdf4;
    color: var(--verde);
}
.tienda-accion-icono .icon { width: 26px; height: 26px; }
.tienda-accion-vender { background: var(--verde); border-color: var(--verde); color: white; min-height: 92px; }
.tienda-accion-vender strong { font-size: 1.4rem; }
.tienda-accion-vender small { color: rgba(255, 255, 255, 0.85); }
.tienda-accion-vender .tienda-accion-icono { background: rgba(255, 255, 255, 0.18); color: white; }
.tienda-accion-alerta { border-color: #f59e0b; background: #fffbeb; }
.tienda-accion-alerta small { color: #b45309; font-weight: 600; }
.tienda-accion-alerta .tienda-accion-icono { background: #fef3c7; color: #b45309; }
.tienda-accion-apagada { background: #f3f4f6; color: #6b7280; }

.tienda-ventas-lista { display: grid; gap: 0.5rem; }
.tienda-venta-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    text-decoration: none;
    color: var(--texto);
}
.tienda-venta-fila small { display: block; color: #6b7280; margin-top: 0.15rem; }
.tienda-secundarias { display: grid; gap: 0.6rem; margin-bottom: 1rem; }

.tienda-esperado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.tienda-esperado span { font-weight: 600; }
.tienda-esperado strong { font-size: 1.5rem; color: var(--verde-oscuro); }

/* Venta en pasos */
.venta-pasos.js-activo .venta-paso { display: none; }
.venta-pasos.js-activo .venta-paso.activo { display: block; }
.venta-paso { background: white; border-radius: var(--card-radius); padding: 1.1rem; margin-bottom: 1rem; border: 1px solid var(--borde); }

.venta-progreso { display: flex; gap: 0.35rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.venta-progreso li {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    padding-top: 0.45rem;
    border-top: 4px solid var(--borde);
}
.venta-progreso li.hecho { color: var(--verde); border-top-color: #86efac; }
.venta-progreso li.actual { color: var(--verde-oscuro); border-top-color: var(--verde); }

.venta-pregunta { font-size: 1.45rem; margin: 0 0 1rem; }

.opcion-grande, .opcion-chica, .cliente-opcion { display: block; margin: 0 0 0.75rem; font-weight: 400; cursor: pointer; }
.opcion-grande input, .opcion-chica input, .cliente-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.opcion-grande-cuerpo {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 72px;
    padding: 0.9rem 1rem;
    border: 2px solid var(--borde);
    border-radius: 14px;
    background: white;
}
.opcion-grande-cuerpo strong { display: block; font-size: 1.2rem; }
.opcion-grande-cuerpo small { display: block; color: #6b7280; font-size: 0.92rem; margin-top: 0.1rem; }
.opcion-grande-icono { font-size: 1.8rem; line-height: 1; flex: 0 0 auto; }
.opcion-grande input:checked + .opcion-grande-cuerpo { border-color: var(--verde); background: #f0fdf4; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.opcion-grande input:focus-visible + .opcion-grande-cuerpo,
.opcion-chica input:focus-visible + span,
.cliente-opcion input:focus-visible + span { outline: 3px solid rgba(22, 163, 74, 0.4); outline-offset: 2px; }
.opcion-chica span { display: block; padding: 0.7rem 0.9rem; border: 1px dashed #d1d5db; border-radius: 10px; color: #374151; font-size: 0.95rem; }
.opcion-chica input:checked + span { border-style: solid; border-color: var(--verde); background: #f0fdf4; font-weight: 600; }

.venta-clientes { margin-top: 0.5rem; }
.venta-clientes input[type="search"] { font-size: 1.1rem; padding: 0.75rem; }
.venta-clientes-lista { margin-top: 0.6rem; max-height: 55vh; overflow-y: auto; }
.cliente-opcion { margin-bottom: 0.5rem; }
.cliente-opcion span { display: block; padding: 0.85rem 1rem; border: 2px solid var(--borde); border-radius: 12px; }
.cliente-opcion strong { display: block; font-size: 1.05rem; }
.cliente-opcion small { display: block; margin-top: 0.15rem; }
.cliente-opcion input:checked + span { border-color: var(--verde); background: #f0fdf4; }

.venta-linea { border: 1px solid var(--borde); border-radius: 12px; padding: 0.8rem; margin-bottom: 0.75rem; }
.venta-linea-titulo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.venta-linea-titulo strong { font-size: 1.1rem; }
.venta-linea-titulo small { color: #6b7280; margin-left: auto; }
.venta-linea-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.venta-linea-campos label, .stepper > span { margin-top: 0; font-size: 0.85rem; }
.venta-linea-campos input { font-size: 1.2rem; padding: 0.7rem; }
.stepper > span { display: block; font-weight: 600; }
.stepper-control { display: grid; grid-template-columns: 48px 1fr 48px; gap: 0.3rem; margin-top: 0.25rem; }
.stepper-control input { text-align: center; margin: 0; }
.stepper-btn { margin: 0; padding: 0; font-size: 1.5rem; min-height: 48px; border-radius: 10px; background: #f3f4f6; color: var(--texto); border: 1px solid var(--borde); }
.stepper-btn:hover { background: #e5e7eb; }

.venta-otros { margin-top: 1.5rem; }
.venta-otros > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 1rem;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}
.venta-otros > summary::-webkit-details-marker { display: none; }
.venta-otros > summary::before { content: "＋ "; color: var(--verde); }
.venta-otros[open] > summary::before { content: "－ "; }

.venta-total-fijo {
    position: sticky;
    bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--sidebar-bg);
    color: white;
    z-index: 5;
}
.venta-total-fijo strong { font-size: 1.5rem; }
.venta-total-grande { font-size: 1.2rem; margin: -0.25rem 0 1rem; }
.venta-total-grande strong { font-size: 1.6rem; color: var(--verde-oscuro); }

.venta-montos { margin: 0.5rem 0 0.75rem; padding: 0.9rem; border-radius: 12px; background: #f9fafb; border: 1px solid var(--borde); }
.venta-montos input { font-size: 1.2rem; }

.venta-error { margin: 0.75rem 0 0; padding: 0.8rem 0.9rem; border-radius: 10px; background: var(--error-bg); color: var(--error); font-weight: 600; font-size: 1rem; }
.venta-botones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.6rem; margin-top: 1rem; }
.venta-botones .btn, .venta-botones button { width: 100%; margin: 0; }

.venta-resumen { display: grid; gap: 0.1rem; font-size: 1.05rem; }
.venta-resumen .util-fila { padding: 0.6rem 0; }
.venta-resumen-total { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; padding: 0.9rem 1rem; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.venta-resumen-total strong { font-size: 1.6rem; color: var(--verde-oscuro); }
.venta-resumen-debe { color: var(--error); font-weight: 700; }

.venta-ok { max-width: 520px; margin: 0 auto; text-align: center; }
.venta-ok-check { width: 84px; height: 84px; margin: 0.5rem auto 0.75rem; border-radius: 50%; background: var(--verde); color: white; font-size: 3rem; line-height: 84px; font-weight: 700; }
.venta-ok h1 { margin: 0; }
.venta-ok-total { font-size: 2.2rem; font-weight: 800; color: var(--verde-oscuro); margin: 0.25rem 0; }
.venta-ok-detalle { text-align: left; margin: 1rem 0; }
.venta-ok .btn { margin-bottom: 0.6rem; }

@media (max-width: 600px) {
    .tienda-hoy { grid-template-columns: 1fr 1fr; }
}
/* Lo que la venta en pasos oculta con [hidden] (clientes filtrados, bloques de detal/cliente) debe ocultarse aunque tenga display propio. */
.venta-pasos [hidden] { display: none !important; }

/* Anular venta / reabrir cierre (solo superadmin). */
.status-pill.status-anulada { background: #e5e7eb; color: #374151; text-decoration: line-through; }
.aviso-anulada { display: block; background: #f3f4f6; color: #374151; border-color: #d1d5db; margin-bottom: 1rem; }
.aviso-reabierto { display: block; background: #fef3c7; color: #92400e; border-color: #fde68a; margin-bottom: 1rem; }
.zona-peligro { border: 1px dashed #fca5a5; }
.zona-peligro > summary { cursor: pointer; font-weight: 600; color: #b91c1c; padding: 0.25rem 0; }
.zona-peligro[open] > summary { margin-bottom: 0.5rem; }
.btn.btn-peligro, button.btn-peligro { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.btn-peligro:hover, button.btn-peligro:hover { background: #b91c1c; }