:root {
  --app-ink: #102d45;
  --app-muted: #587086;
  --app-deep: #183f91;
  --app-blue: #2856ad;
  --app-cyan: #31a8e0;
  --app-aqua: #cceef8;
  --app-green: #62c6c8;
  --app-sun: #f7bc2f;
  --app-line: rgba(24,63,145,.13);
  --app-shadow: 0 24px 64px rgba(24,63,145,.18);
}

body.portal-page,
body.app-view,
body {
  color: var(--app-ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(206,238,248,.34), transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(247,188,47,.10), transparent 18%),
    radial-gradient(circle at 72% 84%, rgba(49,168,224,.20), transparent 24%),
    linear-gradient(160deg,#8cc8e5 0%,#d7edf7 42%,#76b9d8 100%);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.mi-sv-services-shell,
.mi-sv-msg-shell,
.mi-sv-billing-shell,
.mi-sv-programs-shell,
.mi-sv-reclamos-shell,
.lic-app,
.mi-sv-profile-shell {
  width: min(100%, 480px) !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 18px 16px 104px !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.56), transparent 32%, rgba(49,168,224,.08) 62%, transparent),
    linear-gradient(160deg,#e9f8fd 0%,#f7fcff 48%,#eef8fc 100%);
}

.mi-sv-services-shell:before,
.mi-sv-msg-shell:before,
.mi-sv-billing-shell:before,
.mi-sv-programs-shell:before,
.mi-sv-reclamos-shell:before,
.lic-app:before,
.mi-sv-profile-shell:before {
  content: "Mi San Vicente";
  display: grid;
  align-items: center;
  min-height: 78px;
  margin-bottom: 16px;
  padding: 12px 76px 12px 86px;
  border-radius: 24px;
  background:
    url("../assets/escudo 370x370.png") 12px center / 62px 62px no-repeat,
    url("../assets/mi-san-vicente-logo-icono.png") calc(100% - 12px) center / 52px 52px no-repeat,
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(237,250,255,.9));
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: 0 18px 38px rgba(24,63,145,.13);
  color: var(--app-deep);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.mi-sv-services-hero,
.mi-sv-msg-hero,
.mi-sv-billing-card,
.mi-sv-programs-card,
.mi-sv-reclamos-hero,
.form-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(90,190,232,.34), transparent 25%),
    radial-gradient(circle at 98% 98%, rgba(180,226,236,.42), transparent 26%),
    radial-gradient(circle at 8% 8%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(135deg, #214896 0%, #1e74bd 52%, #36a9df 100%) !important;
  color: #fff !important;
  box-shadow: 0 28px 70px rgba(5,43,85,.22) !important;
}

.mi-sv-services-hero h1,
.mi-sv-msg-hero h1,
.mi-sv-billing-card h1,
.mi-sv-programs-card h1,
.mi-sv-reclamos-hero h1,
.mi-sv-services-hero p,
.mi-sv-msg-hero p,
.mi-sv-billing-card p,
.mi-sv-programs-card p,
.mi-sv-reclamos-hero p {
  color: #fff !important;
}

.mi-sv-services-grid,
.mi-sv-msg-grid,
.mi-sv-billing-hero,
.mi-sv-billing-grid,
.mi-sv-billing-actions,
.mi-sv-programs-hero,
.mi-sv-programs-grid,
.mi-sv-reclamos-grid {
  grid-template-columns: 1fr !important;
}

.mi-sv-services-card,
.mi-sv-msg-card,
.mi-sv-billing-summary,
.mi-sv-billing-option,
.mi-sv-billing-note,
.mi-sv-billing-service,
.mi-sv-programs-summary,
.mi-sv-program-card,
.mi-sv-sorteo-card,
.mi-sv-program-note,
.mi-sv-reclamo-card,
.mi-sv-reclamo-form,
.mi-sv-reclamo-history,
.card,
.registry-form,
.registry-aside {
  border: 1px solid rgba(255,255,255,.76) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(247,188,47,.26), transparent 30%),
    radial-gradient(circle at 10% 100%, rgba(49,168,224,.24), transparent 36%),
    linear-gradient(145deg,#eef9ff,#bfe7fb) !important;
  box-shadow: var(--app-shadow) !important;
}

.mi-sv-services-card:nth-child(2n),
.mi-sv-msg-card:nth-child(2n),
.mi-sv-billing-option:nth-child(2n),
.mi-sv-program-card:nth-child(2n),
.mi-sv-reclamo-card:nth-child(2n) {
  background:
    radial-gradient(circle at 16% 90%, rgba(98,198,200,.24), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(40,86,173,.18), transparent 30%),
    linear-gradient(145deg,#f3fbff,#cfe7ff) !important;
}

.mi-sv-services-card h2,
.mi-sv-msg-card h2,
.mi-sv-billing-option h2,
.mi-sv-billing-note strong,
.mi-sv-billing-service h2,
.mi-sv-program-card h2,
.mi-sv-sorteo-card h2,
.mi-sv-program-note strong,
.mi-sv-reclamo-card h2,
.mi-sv-reclamo-form h2,
.mi-sv-reclamo-history h2,
.card h1,
.card h2,
.form-hero h1,
.registry-form h2,
.registry-aside h2 {
  color: var(--app-deep) !important;
}

.btn.primary,
.mi-sv-reclamo-submit,
.card a {
  background: linear-gradient(135deg,var(--app-deep),var(--app-blue),var(--app-cyan)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 16px 32px rgba(24,63,145,.2);
}

.topbar {
  display: none !important;
}

.registry-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  max-width: none !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

.form-hero,
.registry-form,
.registry-aside {
  margin: 0 !important;
}

.field-row {
  grid-template-columns: 1fr !important;
}

.btn.light,
.btn.light {
  background: #fff !important;
  color: var(--app-deep) !important;
  border: 1px solid var(--app-line) !important;
}

.mi-sv-badge.live,
.mi-sv-msg-topic,
.mi-sv-billing-kicker,
.mi-sv-programs-kicker,
.mi-sv-program-badge.soon,
.mi-sv-reclamo-badge.live {
  background: #eef8fb !important;
  color: var(--app-deep) !important;
}

.form-hero,
.activation-hero {
  color: #fff !important;
}

.mi-sv-profile-shell .form-hero,
.mi-sv-profile-shell .activation-hero {
  display: grid !important;
  align-content: center !important;
  gap: 12px !important;
  min-height: 270px !important;
  padding: 34px 28px 38px !important;
}

.form-hero .kicker,
.form-hero h1,
.form-hero p,
.activation-hero .kicker,
.activation-hero h1,
.activation-hero p {
  color: #fff !important;
}

.form-hero .kicker,
.activation-hero .kicker {
  opacity: .82;
}

.mi-sv-profile-shell .form-hero .kicker,
.mi-sv-profile-shell .activation-hero .kicker {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.mi-sv-profile-shell .form-hero h1,
.mi-sv-profile-shell .activation-hero h1 {
  margin: 0 !important;
  max-width: 9ch !important;
  font-size: 40px !important;
  line-height: 1 !important;
}

.mi-sv-profile-shell .form-hero p,
.mi-sv-profile-shell .activation-hero p {
  margin: 0 !important;
  max-width: 28ch !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  opacity: .92 !important;
}

@media (max-width: 390px) {
  .mi-sv-profile-shell .form-hero,
  .mi-sv-profile-shell .activation-hero {
    min-height: 250px !important;
    padding: 30px 24px 34px !important;
  }

  .mi-sv-profile-shell .form-hero h1,
  .mi-sv-profile-shell .activation-hero h1 {
    font-size: 36px !important;
  }

  .mi-sv-profile-shell .form-hero p,
  .mi-sv-profile-shell .activation-hero p {
    font-size: 16px !important;
  }
}

.app-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 80;
  width: min(calc(100% - 28px), 452px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--app-line);
  box-shadow: 0 18px 30px rgba(24,63,145,.18);
}

.app-bottom-nav a {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 16px;
  color: var(--app-muted);
  text-decoration: none;
}

.app-bottom-nav a strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.app-bottom-nav a span {
  font-size: 11px;
}

.app-bottom-nav a.active {
  color: #fff;
  background: linear-gradient(135deg,var(--app-deep),var(--app-blue),var(--app-cyan));
}

@media (min-width: 760px) {
  .mi-sv-services-shell,
  .mi-sv-msg-shell,
  .mi-sv-billing-shell,
  .mi-sv-programs-shell,
.mi-sv-reclamos-shell,
.lic-app,
.mi-sv-profile-shell {
    border-left: 1px solid rgba(255,255,255,.56);
    border-right: 1px solid rgba(255,255,255,.56);
  }
}