:root { --azul: #1f4e79; }
body { background: #f3f6fa; padding-bottom: 72px; }
.barra { position: sticky; top: 0; z-index: 10; background: var(--azul); color: #fff; display: flex; align-items: center; gap: .6rem;
    padding: calc(.6rem + env(safe-area-inset-top)) .9rem .6rem; }
.barra .titulo { font-weight: 600; line-height: 1.1; }
.barra .sub { font-size: .75rem; opacity: .85; }
.logo-barra { height: 40px; width: auto; max-width: 110px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px 5px; }
.contenido { padding: 1rem; max-width: 720px; margin: 0 auto; }
.menu-inferior { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #dde3ea; display: flex;
    padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
.menu-inferior a { flex: 1; text-align: center; padding: .45rem 0 .35rem; color: #6c757d; text-decoration: none; font-size: .7rem; }
.menu-inferior a i { display: block; font-size: 1.3rem; }
.menu-inferior a.activo { color: var(--azul); font-weight: 600; }
.tarjeta { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 1rem; margin-bottom: .9rem; }
.kpi .valor { font-size: 1.6rem; font-weight: 700; }
.kpi .etiqueta { font-size: .8rem; color: #6c757d; }
.neg { color: #c0392b; }
.pos { color: #198754; }
.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.mosaico a { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: .9rem .3rem; text-align: center;
    color: #263238; text-decoration: none; font-size: .78rem; }
.mosaico a i { display: block; font-size: 1.7rem; color: var(--azul); margin-bottom: .2rem; }
.lista .item { display: flex; justify-content: space-between; align-items: center; padding: .65rem 0; border-bottom: 1px solid #eef1f4; }
.lista .item:last-child { border-bottom: 0; }
.chico { font-size: .8rem; color: #6c757d; }
.qr-caja { display: flex; justify-content: center; padding: 1rem; background: #fff; border-radius: 12px; }
#lector { width: 100%; border-radius: 12px; overflow: hidden; }
.login-logo { max-height: 110px; max-width: 220px; object-fit: contain; }