/* ============================================================
   CO — Colombia 🇨🇴
   Estilo: amarillo / azul / rojo (bandera) + aire cafetero y
   montañas (fondos crema-café, degradados diagonales).
   Sin @import / sin fuentes externas
   ============================================================ */

:root {
  --brand: #003893;          /* azul Colombia */
  --brand2: #fcd116;         /* amarillo Colombia */
  --brand3: #ce1126;         /* rojo Colombia */
  --bg: #faf5ec;             /* crema café */
  --card: #fffdf8;
  --ink: #2b2018;
}

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

/* Franja: amarillo ancho sobre azul/rojo */
.flagstrip {
  height: 6px;
  background: linear-gradient(to right, #fcd116 0 50%, #003893 50% 75%, #ce1126 75% 100%);
}

/* Appbar: azul profundo con sol amarillo diagonal */
.appbar {
  background:
    linear-gradient(135deg, #003893 0%, #0a4bb5 55%, #002766 100%);
  border-radius: 0 0 0 22px;   /* esquina diagonal cafetería */
}
.appbar .brand .logo {
  border-radius: 10px;
  background: linear-gradient(135deg, #fcd116 0 50%, #003893 50%);
}
.appbar .iconbtn { border-radius: 10px; }

/* Tarjeta de saldo */
.wallet-card {
  background: rgba(0,56,147,.30);
  border: 1px solid rgba(252,209,22,.5);
  border-radius: 16px;
}
.wallet-card .acts a { color: var(--brand); border-radius: 999px; }

/* Tarjetas: crema-café, esquina recortada superior */
.card {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid #e8dcc4;
  box-shadow: 0 4px 14px rgba(120,90,40,.12);
}

/* Botón: amarillo→azul, cálido */
.btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #fcd116 0%, #f5b800 50%, #003893 160%);
  color: #2b2018;
  box-shadow: 0 5px 14px rgba(245,184,0,.4);
  font-weight: 700;
}
.btn.secondary { background: #f0e6d2; color: var(--ink); box-shadow: none; }

/* Promo: amarillo cálido */
.promo {
  border-radius: 14px;
  background: linear-gradient(120deg, #fcd116 0%, #ffdd55 100%);
  color: #2b2018;
  box-shadow: 0 6px 18px rgba(252,209,22,.45);
}

/* Chips: café, amarillo borde */
.chip { border-radius: 999px; border-color: #e0c98a; color: var(--brand); background: #fffdf8; }

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

/* Stats: azul→amarillo */
.stats {
  background: linear-gradient(135deg, #003893, #fcd116);
  border-radius: 14px;
}

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

/* Howto: círculo azul */
.howto .n { background: var(--brand); color: #fffdf8; }

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

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