/* Zona de clientes: lo propio de esta zona. El diseño general (colores, tarjetas, tablas, menú, formularios) viene de medsys-tema.css, igual que el aplicativo. */

/* El fondo de la pantalla de ingreso (back.png) lo pone adminlte.css, igual que en el aplicativo. */
.zona-pie-login{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }

/* ===== MARCA DEL MENU LATERAL ===== */
.main-sidebar .brand-link.zona-marca{ display:flex; align-items:center; height:57px; padding:0 .8rem; overflow:hidden; white-space:nowrap; }
.main-sidebar .brand-link.zona-marca .brand-image{ float:none; height:32px; width:auto; max-height:32px; margin:0 .6rem 0 0; }
.main-sidebar .brand-link.zona-marca .brand-text{ font-size:1.05rem; color:var(--ms-fg); }
.main-sidebar, .main-sidebar .sidebar{ overflow-x:hidden !important; }

/* ===== PLAN, MONTOS Y CUENTA ===== */
.zona-plan{ font-size:1.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.zona-estado{ font-size:.9rem; padding:.45em .9em; border-radius:50px; }

.zona-total{ background:var(--ms-muted); border:1px solid var(--ms-border); border-radius:8px; padding:12px 16px; font-size:1.1rem; }
.zona-total b{ font-size:1.4rem; color:var(--ms-primary); font-variant-numeric:tabular-nums; }

.zona-cuenta{ padding:10px 0; border-bottom:1px solid var(--ms-border); }
.zona-cuenta:last-of-type{ border-bottom:0; }

.zona-motivo{ max-width:280px; white-space:normal; }

@media (max-width:575.98px){
  .zona-plan{ font-size:1.3rem; }
}

/* ===== PANTALLA DEL QR DE TAYPI ===== */
.zona-taypi-monto{ font-size:2.2rem; font-weight:700; color:var(--ms-primary); font-variant-numeric:tabular-nums; line-height:1.1; }
.zona-taypi-qr{ display:inline-block; background:#fff; border:1px solid var(--ms-border); border-radius:12px; padding:14px; min-width:288px; min-height:288px; }
.zona-taypi-qr img{ display:block; max-width:100%; height:auto; }
.zona-taypi-aviso-monto{ max-width:420px; margin:0 auto 1rem; }

/* los botones dentro de un aviso (callout) no se subrayan como enlaces */
.callout a.btn, .callout a.btn:hover{ text-decoration:none; }