/* ===== LavaPro: estilos pensados para uso fácil en celular ===== */
:root {
    --lp-azul: #0b5ed7;
    --lp-yape: #742284;
    --lp-plin: #00a9b7;
    --lp-efectivo: #198754;
    --lp-transferencia: #0d6efd;
    --lp-fiado: #fd7e14;
    --menu-ancho: 250px;
    --barra-alto: 56px;
}

html { font-size: 16px; }
@media (min-width: 768px) { html { font-size: 16.5px; } }

body { background: #f3f6fb; min-height: 100vh; }
body.con-menu { padding-top: var(--barra-alto); padding-bottom: 76px; }
@media (min-width: 992px) { body.con-menu { padding-bottom: 0; } }

.barra-superior { height: var(--barra-alto); }

/* Menú lateral fijo en escritorio, deslizable en celular */
@media (min-width: 992px) {
    .menu-lateral {
        position: fixed; top: var(--barra-alto); bottom: 0; left: 0; width: var(--menu-ancho);
        overflow-y: auto; border-right: 1px solid #dee2e6;
    }
    .contenido:not(.sin-menu) { margin-left: var(--menu-ancho); }
}
.menu-lateral .nav-link { color: #344054; padding: .7rem 1.2rem; font-size: 1.02rem; border-left: 4px solid transparent; }
.menu-lateral .nav-link i { width: 1.6rem; display: inline-block; }
.menu-lateral .nav-link:hover { background: #e9f0fb; }
.menu-lateral .nav-link.active { background: #dce8fb; border-left-color: var(--lp-azul); color: var(--lp-azul); font-weight: 600; }
.menu-lateral .nav-destacado { color: #fff !important; background: var(--lp-efectivo); margin: .3rem .8rem; border-radius: .6rem; font-weight: 600; }
.menu-lateral .nav-destacado:hover { background: #157347; }
.menu-titulo { font-size: .75rem; text-transform: uppercase; color: #98a2b3; padding: 1rem 1.2rem .3rem; letter-spacing: .05em; }

/* Barra inferior estilo app (solo celular) */
.barra-inferior {
    position: fixed; bottom: 0; left: 0; right: 0; height: 68px; background: #fff; z-index: 1030;
    display: flex; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid #e4e7ec;
}
.barra-inferior a { display: flex; flex-direction: column; align-items: center; color: #667085; text-decoration: none; font-size: .72rem; flex: 1; }
.barra-inferior a i { font-size: 1.45rem; }
.barra-inferior a.active { color: var(--lp-azul); font-weight: 600; }
.barra-inferior .boton-central {
    flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--lp-efectivo); color: #fff !important;
    margin-top: -30px; box-shadow: 0 6px 16px rgba(25, 135, 84, .45); justify-content: center;
}
.barra-inferior .boton-central i { font-size: 2rem; }

/* Tarjetas e indicadores */
.card { border: 0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.kpi { border-radius: 1rem; padding: 1rem; color: #fff; height: 100%; }
.kpi .valor { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kpi .etiqueta { opacity: .9; font-size: .9rem; }
.kpi i { font-size: 1.8rem; opacity: .6; }
.kpi-azul { background: linear-gradient(135deg, #0b5ed7, #3d8bfd); }
.kpi-verde { background: linear-gradient(135deg, #198754, #3dbb7e); }
.kpi-naranja { background: linear-gradient(135deg, #e8590c, #fd9843); }
.kpi-morado { background: linear-gradient(135deg, #6f42c1, #9d7ae0); }

.titulo-pagina { font-weight: 700; font-size: 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Botones grandes, fáciles de tocar */
.btn-xl { padding: 1rem 1.25rem; font-size: 1.25rem; border-radius: .9rem; font-weight: 600; }
.btn { border-radius: .6rem; }
.form-control, .form-select { border-radius: .6rem; min-height: 46px; }
.form-control-lg { min-height: 56px; font-size: 1.3rem; }
.placa-input { text-transform: uppercase; letter-spacing: .15em; font-weight: 700; font-size: 1.6rem; text-align: center; }

/* Punto de venta */
.paso { font-weight: 700; color: #475467; margin: 1rem 0 .5rem; font-size: 1.05rem; }
.paso .num { display: inline-flex; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--lp-azul); color: #fff; align-items: center; justify-content: center; margin-right: .4rem; font-size: .95rem; }
.servicio-card {
    border: 2px solid #e4e7ec; border-radius: 1rem; padding: .9rem .6rem; background: #fff; text-align: center;
    cursor: pointer; user-select: none; height: 100%; transition: transform .08s, border-color .1s; position: relative; width: 100%;
}
.servicio-card:active { transform: scale(.97); }
.servicio-card i { font-size: 1.9rem; }
.servicio-card .nombre { font-weight: 600; line-height: 1.2; margin-top: .3rem; }
.servicio-card .precio { font-size: 1.15rem; font-weight: 700; color: var(--lp-efectivo); }
.servicio-card.seleccionado { border-color: var(--lp-efectivo); background: #e8f6ee; }
.servicio-card .cantidad { position: absolute; top: .4rem; right: .5rem; background: var(--lp-efectivo); color: #fff; border-radius: 1rem; padding: 0 .55rem; font-weight: 700; display: none; }
.servicio-card.seleccionado .cantidad { display: inline-block; }

.chip-opcion { border: 2px solid #d0d5dd; background: #fff; border-radius: 2rem; padding: .55rem 1rem; font-weight: 600; }
.chip-opcion.seleccionado { border-color: var(--lp-azul); background: #e7f0ff; color: var(--lp-azul); }

.medio-btn { border: 3px solid transparent; border-radius: 1rem; color: #fff; padding: .9rem .4rem; font-weight: 700; width: 100%; font-size: 1.05rem; }
.medio-btn i { font-size: 1.6rem; display: block; }
.medio-btn.seleccionado { border-color: #101828; box-shadow: 0 0 0 3px rgba(16, 24, 40, .15); transform: translateY(-2px); }
.medio-1 { background: var(--lp-efectivo); }
.medio-2 { background: var(--lp-yape); }
.medio-3 { background: var(--lp-plin); }
.medio-4 { background: var(--lp-transferencia); }
.medio-5 { background: var(--lp-fiado); }
.badge.medio-1, .badge.medio-2, .badge.medio-3, .badge.medio-4, .badge.medio-5 { color: #fff; }

.barra-cobrar {
    position: sticky; bottom: 76px; background: #fff; border-radius: 1rem; padding: .8rem 1rem; z-index: 10;
    box-shadow: 0 -4px 20px rgba(16, 24, 40, .12); margin-top: 1rem;
}
@media (min-width: 992px) { .barra-cobrar { bottom: 12px; } }
.barra-cobrar .total { font-size: 1.9rem; font-weight: 800; }

.premio { background: linear-gradient(135deg, #ffd43b, #fab005); border-radius: 1rem; padding: .8rem 1rem; font-weight: 600; }

/* Estados del lavado */
.estado-1 { background: #f2f4f7; color: #344054; }
.estado-2 { background: #dbeafe; color: #1d4ed8; }
.estado-3 { background: #dcfce7; color: #15803d; }
.estado-4 { background: #e5e7eb; color: #6b7280; }

/* Ticket térmico 58/80 mm */
.ticket { font-family: "Courier New", Courier, monospace; font-size: 13px; background: #fff; padding: 12px; width: 100%; max-width: 330px; margin: 0 auto; white-space: pre; overflow-x: auto; border: 1px dashed #ccc; }

@media print {
    @page { size: 58mm auto; margin: 0; }
    body { background: #fff !important; padding: 0 !important; }
    body * { visibility: hidden; }
    .ticket, .ticket * { visibility: visible; }
    .ticket { position: absolute; left: 0; top: 0; width: 58mm; max-width: 58mm; border: 0; padding: 2mm; font-size: 10px; overflow: visible; }
    .barra-inferior, .navbar, .menu-lateral { display: none !important; }
}

.tabla-movil td, .tabla-movil th { vertical-align: middle; }
.table-responsive { border-radius: .8rem; }
.vacio { text-align: center; color: #98a2b3; padding: 2.5rem 1rem; }
.vacio i { font-size: 3rem; display: block; }
.login-caja { max-width: 420px; margin: 6vh auto; }
.ayuda { font-size: .9rem; color: #667085; }
.cursor-pointer { cursor: pointer; }
.grafico { position: relative; height: 240px; }

/* Ajustes para pantallas pequeñas */
.kpi .valor { white-space: nowrap; }
@media (max-width: 575.98px) {
    .kpi { padding: .8rem; }
    .kpi .valor { font-size: 1.3rem; }
    .kpi i { display: none; }
    .medio-btn { font-size: .9rem; padding: .75rem .2rem; }
    .titulo-pagina { font-size: 1.3rem; }
}

/* Logotipo del negocio */
.logo-vista { width: 160px; height: 160px; border: 2px dashed #d0d5dd; border-radius: 1rem; display: flex; align-items: center; justify-content: center; background: #fff; padding: 10px; }
.logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-barra { height: 38px; max-width: 120px; object-fit: contain; background: #fff; border-radius: .5rem; padding: 3px 6px; }
.logo-inicio { height: 72px; max-width: 180px; object-fit: contain; }
.logo-ticket { display: block; max-width: 70%; max-height: 90px; margin: 0 auto 8px; object-fit: contain; }
.logo-mini { width: 40px; height: 40px; object-fit: contain; border-radius: .4rem; background: #fff; border: 1px solid #e4e7ec; }
@media print { .logo-ticket { max-height: 18mm; } }

/* Productos en el punto de venta */
.producto-card { border: 2px solid #e4e7ec; border-radius: 1rem; padding: .7rem .6rem; background: #fff; text-align: center; height: 100%; }
.producto-card .nombre { font-weight: 600; line-height: 1.2; min-height: 2.4em; }
.producto-card .precio { font-size: 1.1rem; font-weight: 700; color: var(--lp-efectivo); }
.producto-card .stock { font-size: .8rem; color: #667085; }
.producto-card .controles { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .4rem; }
.producto-card .controles .btn { width: 44px; height: 44px; font-size: 1.4rem; line-height: 1; border-radius: 50%; padding: 0; }
.producto-card .cant { font-size: 1.3rem; font-weight: 800; min-width: 1.6rem; }
.producto-card.seleccionado { border-color: var(--lp-efectivo); background: #e8f6ee; }
.producto-card.agotado { opacity: .5; }