/* ============================================================
   MX — México 🇲🇽
   Estilo: verde / blanco / rojo (bandera) + geometría azteca
   (greca escalonada). Formas angulosas, bordes marcados.
   Sin @import / sin fuentes externas
   ============================================================ */

:root {
  --brand: #006847;          /* verde México */
  --brand2: #ce1126;         /* rojo México */
  --brand3: #a5382a;
  --bg: #f3f6f2;
  --card: #ffffff;
  --ink: #14241c;
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: #e2e8e2;
  color: var(--ink);
}
.app { background: var(--bg); }

/* Franja: verde · blanco · rojo */
.flagstrip {
  height: 6px;
  background: linear-gradient(to right, #006847 0 33%, #ffffff 33% 66%, #ce1126 66% 100%);
}

/* Appbar: verde oscuro con greca azteca escalonada */
.appbar {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px),
    linear-gradient(135deg, #006847 0%, #0a8a5f 60%, #004d31 100%);
  border-radius: 0;
  border-bottom: 5px solid #ce1126;
}
.appbar .brand .logo {
  border-radius: 6px;
  background: linear-gradient(135deg, #006847 50%, #ce1126 50%);
}
.appbar .iconbtn { border-radius: 8px; }

/* Tarjeta de saldo */
.wallet-card {
  background: rgba(0,77,49,.35);
  border: 1px solid rgba(206,18,38,.4);
  border-radius: 10px;
}
.wallet-card .acts a { color: var(--brand); border-radius: 8px; }

/* Tarjetas: esquinas cortadas, borde doble verde/rojo */
.card {
  background: var(--card);
  border-radius: 8px;
  border: 1px solid #cdd8cd;
  border-top: 3px solid var(--brand2);
  box-shadow: 0 2px 8px rgba(20,36,28,.08);
}

/* Botón: verde con filo rojo, anguloso */
.btn {
  border-radius: 6px;
  background: linear-gradient(135deg, #006847, #0a8a5f);
  box-shadow: inset 0 -3px 0 #004d31, 0 4px 12px rgba(0,104,71,.3);
  font-weight: 700;
  letter-spacing: .3px;
}
.btn.secondary { background: #e2e8e2; color: var(--ink); box-shadow: none; }

/* Promo: rojo vibrante */
.promo {
  border-radius: 8px;
  background: linear-gradient(120deg, #ce1126 0%, #e0354a 100%);
  color: #fff;
  box-shadow: 0 5px 16px rgba(206,18,38,.4);
}

/* Chips: cuadrados, borde verde */
.chip { border-radius: 6px; border-color: #9cc7b0; color: var(--brand); background: #fff; }

.cat { background: var(--card); border-radius: 8px; border: 1px solid #cdd8cd; }
.cat .nm { color: var(--ink); }

/* Stats: verde→rojo */
.stats {
  background: linear-gradient(135deg, #006847, #ce1126);
  border-radius: 8px;
}

.badge { background: var(--card); border-radius: 8px; border: 1px solid #cdd8cd; }
.badge .b-t { color: var(--ink); }

/* Howto: cuadrado verde */
.howto .n { background: var(--brand); color: #fff; border-radius: 4px; }

.price { color: var(--brand2); font-weight: 700; }

.tabbar { background: var(--card); border-top: 1px solid #cdd8cd; }
.tabbar a.on { color: var(--brand2); }
.tabbar a.on .ic { filter: none; }