* { box-sizing: border-box; }
body { margin: 0; padding-top: 32px; background: #f5f5f5; color: #222; font: 12px Arial, 'Segoe UI', sans-serif; }
.oculto { display: none !important; }

.barraTitulo { position: fixed; top: 0; left: 0; right: 0; height: 32px; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; background: #0a5277; color: #fff; }
.nombreSistema { font-size: 13px; font-weight: bold; letter-spacing: 0.5px; }
.datosSistema { display: flex; align-items: center; gap: 14px; font-size: 11px; }
.datosSistema .boton { padding: 2px 10px; }

.avisoSinConexion { padding: 6px 12px; background: #fff3cd; border-bottom: 1px solid #d9b84a; color: #664d03; }

.menuPrincipal { display: flex; background: #e9eef2; border-bottom: 1px solid #ccc; }
.menuPrincipal a { padding: 8px 16px; color: #0a5277; text-decoration: none; border-right: 1px solid #ccc; }
.menuPrincipal a:hover { background: #dbe5ec; }
.menuPrincipal a.activo { background: #fff; font-weight: bold; border-bottom: 2px solid #0a5277; }

.contenido { padding: 12px; max-width: 1200px; margin: 0 auto; }
h1 { margin: 0 0 10px; font-size: 15px; color: #0a5277; }

.bloque { background: #fff; border: 1px solid #ccc; margin-bottom: 12px; }
.bloqueTitulo { padding: 6px 10px; background: #e9eef2; border-bottom: 1px solid #ccc; font-weight: bold; color: #0a5277; }
.bloqueCuerpo { padding: 10px; }
.vacio { color: #777; font-style: italic; }

.boton { padding: 5px 14px; background: #fff; border: 1px solid #999; color: #222; font: inherit; cursor: pointer; }
.botonPrimario { background: #0a5277; border-color: #0a5277; color: #fff; }
.boton:hover { filter: brightness(0.95); }

.campo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.campo label { color: #444; }
.campo input { height: 24px; padding: 2px 6px; border: 1px solid #aaa; font: inherit; }
.campo input:focus { outline: none; border-color: #0a5277; }
.mensajeError { color: #b00020; margin: 6px 0; min-height: 14px; }
.mensajeOk { color: #1b6e2d; margin: 6px 0; }

.cajaLogin { width: 340px; max-width: 100%; margin: 60px auto; }

.barraGrilla { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.barraGrilla input { height: 24px; width: 260px; padding: 2px 6px; border: 1px solid #aaa; font: inherit; }
.tabla { width: 100%; border-collapse: collapse; background: #fff; }
.tabla th, .tabla td { border: 1px solid #ccc; padding: 4px 8px; text-align: left; }
.tabla th { background: #e9eef2; color: #0a5277; cursor: pointer; user-select: none; white-space: nowrap; }
.tabla th.sinOrden { cursor: default; }
.tabla tbody tr:nth-child(even) { background: #f7f9fb; }
.tabla td.numero, .tabla th.numero { text-align: right; }

@media (max-width: 700px) {
    .menuPrincipal { overflow-x: auto; }
    .menuPrincipal a { white-space: nowrap; }
    .datosSistema #usuarioActual { display: none; }
}

.barraMes { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; border-bottom: 1px solid #ccc; }
.barraMes select, .filtros select { height: 24px; padding: 2px 6px; border: 1px solid #aaa; background: #fff; font: inherit; }
.filtros { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.nota { margin-bottom: 8px; color: #555; }
.envoltorioTabla { overflow-x: auto; }
.tabla td.entrada { color: #1b6e2d; }
.tabla td.salida { color: #b00020; }
.tabla td.celdaBarra { min-width: 150px; white-space: nowrap; }

.tarjetas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tarjeta { flex: 1 1 150px; background: #fff; border: 1px solid #ccc; border-top: 3px solid #0a5277; padding: 8px 10px; }
.tarjeta.destacada { background: #e9eef2; }
.tarjeta.negativo { border-top-color: #b00020; }
.tarjeta.negativo .tarjetaValor { color: #b00020; }
.tarjetaTitulo { color: #555; margin-bottom: 4px; }
.tarjetaValor { font-size: 17px; font-weight: bold; color: #0a5277; text-align: right; }

.barraProgreso { display: inline-block; vertical-align: middle; width: 90px; height: 10px; margin-right: 6px; background: #e3e3e3; border: 1px solid #bbb; }
.barraRelleno { height: 100%; background: #999; }
.barraRelleno.verde { background: #2e7d32; }
.barraRelleno.amarillo { background: #e6a700; }
.barraRelleno.rojo { background: #c62828; }
.barraRelleno.azul { background: #0a5277; }
.barraTexto { display: inline-block; min-width: 34px; text-align: right; }

.semaforo { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #999; }
.punto.verde { background: #2e7d32; }
.punto.amarillo { background: #e6a700; }
.punto.rojo { background: #c62828; }
.punto.azul { background: #0a5277; }
.punto.gris { background: #999; }

.alerta { padding: 5px 8px; margin-bottom: 4px; border: 1px solid #ccc; border-left-width: 4px; background: #fff; }
.alerta.amarillo { border-left-color: #e6a700; background: #fffaf0; }
.alerta.rojo { border-left-color: #c62828; background: #fff5f5; }

@media (max-width: 700px) {
    .barraGrilla { flex-direction: column; align-items: stretch; gap: 4px; }
    .barraGrilla input { width: 100%; }
    .contenido { padding: 8px; }
    .tarjeta { flex: 1 1 45%; }
    .tabla th, .tabla td { padding: 3px 5px; }
}