/* REPORTES / VENTAS */

#pantallaReportes{
 padding:18px 24px;
 color:var(--pos-text,#172033);
}

.reportes-shell{
 max-width:1180px;
 margin:0 auto;
 background:var(--pos-surface-strong,#fff);
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:14px;
 padding:20px;
}

.reportes-header{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 margin-bottom:16px;
}

.reportes-header h2{
 margin:0;
 font-size:22px;
 font-weight:800;
 letter-spacing:-.02em;
 color:var(--pos-text,#172033);
}

.reportes-header p{
 margin:4px 0 0;
 color:var(--pos-muted,#687386);
 font-weight:600;
 font-size:13px;
}

.btn-reporte-exportar{
 width:auto;
 min-height:40px;
 padding:0 16px;
 border:0;
 border-radius:10px;
 background:var(--brand-color,#0d6efd) !important;
 color:#fff !important;
 font-weight:800;
 cursor:pointer;
}

.reportes-resumen{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:12px;
 margin-bottom:16px;
}

.reportes-resumen div{
 background:var(--pos-surface-strong,#fff);
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:12px;
 padding:14px;
}

.reportes-resumen span{
 display:block;
 color:var(--pos-muted,#687386);
 font-size:12px;
 font-weight:700;
 margin-bottom:6px;
}

.reportes-resumen strong{
 display:block;
 color:var(--pos-text,#172033);
 font-size:20px;
 font-weight:800;
}

.reporte-tendencia{
 display:block;
 margin-top:4px;
 font-size:11px;
 font-weight:700;
 font-style:normal;
 color:var(--pos-muted,#687386);
}
.reporte-tendencia.positiva{ color:#047857; }
.reporte-tendencia.negativa{ color:#b91c1c; }
body.oscuro .reporte-tendencia.positiva{ color:#6ee7b7; }
body.oscuro .reporte-tendencia.negativa{ color:#fca5a5; }

.reportes-grid{
 display:grid;
 grid-template-columns:1.35fr .8fr;
 gap:16px;
}

.reportes-panel{
 border:1px solid var(--pos-line,#dbe3ef);
 border-radius:12px;
 padding:16px;
 min-height:280px;
}

.reportes-panel h3{
 margin:0 0 14px;
 font-size:15px;
 font-weight:800;
 color:var(--pos-text,#172033);
}

.reportes-panel canvas{
 width:100% !important;
 height:260px !important;
}

.reporte-venta-item{
 display:flex;
 justify-content:space-between;
 gap:12px;
 padding:10px 0;
 border-bottom:1px solid var(--pos-line,#dbe3ef);
}

.reporte-venta-item strong{
 display:block;
 color:var(--pos-text,#172033);
 margin-bottom:3px;
}

.reporte-venta-item span{
 color:var(--pos-muted,#687386);
 font-size:12px;
}

.reporte-venta-item b{
 color:var(--brand-color,#0d6efd);
}

.reporte-vacio{
 color:var(--pos-muted,#687386);
 border:1px dashed var(--pos-line,#dbe3ef);
 border-radius:10px;
 padding:20px;
 text-align:center;
 font-weight:600;
}

.reportes-filtros{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
 align-items:center;
 margin:12px 0 18px;
}

.reportes-filtros button,
.reportes-filtros label{
 width:auto;
 min-height:38px;
 border-radius:9px;
 border:1px solid var(--pos-line,#dbe3ef);
 background:transparent;
 padding:0 12px;
 font-weight:700;
 font-size:13px;
 color:var(--pos-text,#172033);
 display:flex;
 align-items:center;
}

.reportes-filtros button{
 width:auto;
 background:transparent !important;
 color:var(--pos-text,#172033) !important;
 cursor:pointer;
}

.reportes-filtros button.activo{
 background:var(--brand-color,#0d6efd) !important;
 color:#fff !important;
 border-color:transparent;
}

.reportes-filtros input{
 border:0;
 background:transparent;
 font:inherit;
 color:var(--pos-text,#172033);
 margin-left:6px;
 max-width:130px;
}

.reportes-grid-secundario{
 margin-top:16px;
 grid-template-columns:repeat(3, minmax(0, 1fr));
}

.reportes-grid-terciario{
 margin-top:16px;
 grid-template-columns:repeat(2, minmax(0, 1fr));
}

.reporte-lista-compacta{
 display:grid;
 gap:8px;
}

.reporte-mini-row{
 display:flex;
 justify-content:space-between;
 gap:12px;
 align-items:center;
 border-bottom:1px solid var(--pos-line,#dbe3ef);
 padding:8px 0;
}

.reporte-mini-row strong,
.reporte-mini-row span{
 display:block;
}

.reporte-mini-row span{
 color:var(--pos-muted,#687386);
 font-size:12px;
 margin-top:2px;
}

.reporte-mini-row b{
 color:var(--brand-color, #0d6efd);
 white-space:nowrap;
}

/* Metodos de pago (donut) */
.reportes-donut-wrap{
 position:relative;
 height:150px;
 margin-bottom:10px;
}
.reportes-donut-wrap canvas{
 height:150px !important;
}
.reporte-metodos-leyenda{
 display:grid;
 gap:8px;
}
.reporte-metodo-fila{
 display:flex;
 align-items:center;
 gap:8px;
 padding:6px 0;
 border-bottom:1px solid var(--pos-line,#dbe3ef);
 font-size:13px;
}
.reporte-metodo-punto{
 width:9px;
 height:9px;
 border-radius:999px;
 flex:0 0 auto;
}
.reporte-metodo-nombre{
 flex:1 1 auto;
 text-transform:capitalize;
 color:var(--pos-text,#172033);
 font-weight:600;
}
.reporte-metodo-porcentaje{
 color:var(--pos-muted,#687386);
 font-weight:700;
 font-size:12px;
}
.reporte-metodo-fila b{
 color:var(--pos-text,#172033);
 font-weight:800;
 white-space:nowrap;
}

/* Ventas por categoria */
.reporte-categorias-lista{
 display:grid;
 gap:12px;
}
.reporte-categoria-fila{
 display:grid;
 gap:4px;
}
.reporte-categoria-encabezado{
 display:flex;
 justify-content:space-between;
 font-size:13px;
 font-weight:700;
 color:var(--pos-text,#172033);
}
.reporte-categoria-barra{
 height:6px;
 border-radius:999px;
 background:var(--pos-line,#dbe3ef);
 overflow:hidden;
}
.reporte-categoria-barra-relleno{
 height:100%;
 border-radius:999px;
 background:var(--brand-color,#0d6efd);
}
.reporte-categoria-porcentaje{
 color:var(--pos-muted,#687386);
 font-size:11px;
 font-weight:600;
}
.reportes-ver-todas{
 width:100%;
 margin-top:12px;
 border:0;
 background:transparent !important;
 color:var(--brand-color,#0d6efd) !important;
 font-weight:700;
 font-size:13px;
 cursor:pointer;
}
.reportes-ver-todas:hover{
 text-decoration:underline;
}

/* Resumen del periodo */
.reporte-resumen-periodo{
 display:grid;
 gap:10px;
}
.reporte-resumen-periodo-fila{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:10px;
 padding:8px 0;
 border-bottom:1px solid var(--pos-line,#dbe3ef);
}
.reporte-resumen-periodo-fila span{
 color:var(--pos-muted,#687386);
 font-size:12px;
 font-weight:700;
}
.reporte-resumen-periodo-fila b{
 color:var(--pos-text,#172033);
 font-size:13px;
 font-weight:800;
 text-align:right;
}

body.oscuro .reportes-panel h3,
body.oscuro .reporte-venta-item strong{
 color:#f8fafc;
}

@media (max-width:980px){
 .reportes-grid,
 .reportes-grid-secundario,
 .reportes-grid-terciario,
 .reportes-resumen{
  grid-template-columns:1fr;
 }
}