/*
 * Pantallas de gestión (W4): reportes, gastos, cierre del día, tablero, libros de IVA y funcionarios.
 * Mismo estilo clásico de app.css (granate y blanco, sin adornos); sólo agrega lo propio de estas pantallas.
 */

/* ---------- Estructura ---------- */
.w4-vista { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.w4-vista.w4-desplazable { height: auto; min-height: 100%; }
.w4-crece { flex: 1; min-height: 140px; }
.w4-con-pestanas { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.w4-pestana-cuerpo { flex: 1; min-height: 0; border: 1px solid var(--c-borde); border-top: 0; padding: 8px; background: #fff; overflow: auto; }
.w4-pestana-cuerpo > .w4-vista { height: 100%; }
.w4-pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--c-borde); }
.w4-pestana {
    border: 1px solid var(--c-borde); border-bottom: 0; background: #f3eeee; padding: 5px 16px; cursor: pointer;
    border-radius: 2px 2px 0 0; margin-bottom: -1px;
}
.w4-pestana:hover { background: #ebe3e4; }
.w4-pestana.activa { background: #fff; color: var(--c-acento-oscuro); font-weight: bold; border-color: var(--c-acento); border-bottom: 1px solid #fff; }
.w4-centro { display: flex; gap: 8px; flex: 1; min-height: 0; }
.w4-centro > .w4-crece { min-width: 0; }
.w4-lateral { width: 350px; min-width: 300px; display: flex; flex-direction: column; gap: 6px; }
.w4-lateral .marco-tabla { flex: 1; min-height: 100px; }
.w4-barra-doble { display: flex; flex-direction: column; gap: 8px; }
.w4-fila-campos { display: flex; gap: 8px; flex-wrap: wrap; }
.w4-fila-campos > .campo { flex: 1; min-width: 150px; }
.w4-tarjeta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.w4-par { display: flex; gap: 12px; flex-wrap: wrap; }
.w4-par > .w4-tarjeta { flex: 1; min-width: 300px; }
.w4-dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.w4-columna { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ---------- Controles ---------- */
.w4-fecha { width: 105px; }
.w4-filtro { flex: 1 1 220px !important; min-width: 160px; }
.w4-importe { text-align: right; }
.w4-telefono { width: 170px; }
.w4-dias { width: 90px; border: 1px solid var(--c-borde); border-radius: 2px; padding: 5px 7px; }
.w4-mensaje-whatsapp {
    width: 100%; border: 1px solid var(--c-borde); border-radius: 2px; padding: 6px 8px; resize: vertical; font-family: inherit;
}

/* ---------- Tablas ---------- */
.w4-marco { min-height: 80px; }
.w4-marco:focus { outline: 2px solid var(--c-acento); outline-offset: -2px; }
.w4-tabla th.w4-ordenable { cursor: pointer; user-select: none; }
.w4-tabla th.w4-ordenable:hover { background: var(--c-seleccion-suave); }
.w4-tabla tfoot td { position: sticky; bottom: 0; background: var(--c-panel); border-top: 2px solid var(--c-borde); }
.w4-tabla td.w4-total, .w4-tabla tr.w4-destacada td { font-weight: bold; }
.w4-tabla tr.w4-apagada td { color: #9a8a8d; }
.w4-tabla tr.sel.w4-apagada td { color: #f0d5d9; }

/* ---------- Gráficos de barras ---------- */
.w4-grafico-marco { overflow-x: auto; }
.w4-grafico { display: block; font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
.w4-grafico-barra { fill: var(--c-acento); }
.w4-grafico-barra:hover { fill: var(--c-acento-oscuro); }
.w4-grafico-guia { stroke: #efe7e8; stroke-width: 1; }
.w4-grafico-eje-linea { stroke: var(--c-borde); stroke-width: 1; }
.w4-grafico-eje, .w4-grafico-rotulo { fill: var(--c-texto-suave); font-size: 11px; }
.w4-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }

/* ---------- Tablero ---------- */
.w4-indicadores { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; }
.w4-indicador { display: flex; flex-direction: column; gap: 2px; border-left: 4px solid var(--c-acento); }
.w4-indicador-rotulo { color: var(--c-texto-suave); font-size: 12px; }
.w4-indicador-valor { font-size: 20px; font-weight: bold; font-variant-numeric: tabular-nums; }
.w4-sube { color: var(--c-exito); }
.w4-baja { color: var(--c-peligro); }
.w4-dato { font-weight: bold; }

/* ---------- Cierre del día ---------- */
.w4-titulo-cierre { font-size: 15px; }
.w4-bloque { display: grid; grid-template-columns: 1fr auto minmax(50px, auto) minmax(90px, auto); gap: 3px 12px; align-items: baseline; }
.w4-bloque .num { text-align: right; font-variant-numeric: tabular-nums; }
.w4-ancho-total { grid-column: 1 / -1; }
.w4-detalle-largo { grid-column: 2 / -1; text-align: right; }
.w4-subtitulo-bloque { padding-top: 8px; }
.w4-negrita { font-weight: bold; }

/* ---------- Libros de IVA ---------- */
.w4-saldo { text-align: left; }

/* ---------- Marcación rápida ---------- */
.w4-marcacion { display: flex; justify-content: center; padding-top: 40px; }
.w4-marcacion-tarjeta { width: 480px; display: flex; flex-direction: column; gap: 10px; }
.w4-cedula { font-size: 20px; font-weight: bold; padding: 6px 8px; }
.w4-ultima-marcacion { min-height: 24px; color: var(--c-acento-oscuro); }

@media (max-width: 1000px) {
    .w4-indicadores { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .w4-dos-columnas { grid-template-columns: 1fr; }
    .w4-centro { flex-direction: column; }
    .w4-lateral { width: auto; }
}