/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-primary:      #22C55E;
  --color-primary-dark: #047833;
  --color-primary-soft: #DDF8E8;
  --color-bg:           #F4F7FD;
  --color-card:         #FFFDF5;
  --color-gold:         #FFAA1B;
  --color-gold-dark:    #A66A00;
  --color-gold-soft:    #FFF3D0;
  --color-blue-soft:    #DCEBFF;
  --color-blue-nav:     #E8F1FF;
  --color-text:         #07142E;
  --color-muted:        #6B7280;
  --color-error:        #F87171;
  --color-error-soft:   #FEE2E2;
  --radius-card:        24px;
  --radius-btn:         999px;
  --shadow-card:        0 4px 20px rgba(0,0,0,0.07);
  --shadow-btn:         0 4px 16px rgba(34,197,94,0.35);
  --shadow-gold:        0 8px 32px rgba(255,170,27,0.30);
}

html {
  font-family: "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #DDE4EF;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--color-text);
}

/* ── Mobile shell centrado ── */
.app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--color-bg);
  position: relative;
  overflow-x: hidden;
  padding-bottom: 110px;
  box-shadow: 0 0 60px rgba(0,0,0,0.12);
}

/* ── Botones ── */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-weight: 800; font-size: 16px;
  padding: 17px 24px;
  border-radius: var(--radius-btn);
  border: none; cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s, background 0.15s;
  letter-spacing: 0.2px;
}
.btn-primary:hover  { background: #16a34a; transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--color-blue-soft);
  color: var(--color-primary-dark);
  font-family: "Nunito", sans-serif;
  font-weight: 700; font-size: 15px;
  padding: 15px 24px;
  border-radius: var(--radius-btn);
  border: none; cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.btn-secondary:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── Cards ── */
.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1.5px solid rgba(34,197,94,0.08);
  padding: 20px;
}

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  font-weight: 800; font-size: 13px;
}
.badge-gold  { background: var(--color-gold); color: #5A3A00; }
.badge-green { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge-blue  { background: var(--color-blue-soft); color: #1d4ed8; }

/* ── Animaciones ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.anim-fade-up  { animation: fadeUp 0.4s ease both; }
.anim-scale-in { animation: scaleIn 0.35s cubic-bezier(.34,1.56,.64,1) both; }
.anim-float    { animation: float 3s ease-in-out infinite; }

/* ============================================
   LÍNEA GRÁFICA JEP — override de tokens
   ============================================ */
:root {
  /* Paleta oficial JEP */
  --jep-green: #007e32;
  --jep-green-light: #00ae2a;
  --jep-orange: #f39200;
  --jep-orange-light: #faae02;
  --jep-bg: #f6f6f6;
  --jep-gray-1: #efefef;
  --jep-gray-2: #e5e5e5;
  --jep-gray-light: #9d9d9d;
  --jep-gray-dark: #555555;
  --jep-text: #1a1a1a;
  --jep-error: #C10100;

  /* Remapeo de tokens antiguos → JEP (las páginas viejas heredan) */
  --color-primary: #007e32;
  --color-bg: #f6f6f6;
  --color-text: #1a1a1a;
  --color-muted: #555555;
  --color-gold: #f39200;
  --color-gold-dark: #f39200;
}

body {
  font-family: 'Fira Sans', -apple-system, sans-serif !important;
  background: var(--jep-bg);
}

/* JEP pide: sin sombras ni resplandores */
.app-shell *, .app-shell {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Botón primario unificado JEP: verde sólido, sin degradado */
.btn-primary {
  background: var(--jep-green) !important;
  background-image: none !important;
  color: #fff !important;
  border: none;
  border-radius: 12px;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Fira Sans', sans-serif;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:disabled {
  background: var(--jep-gray-2) !important;
  color: var(--jep-gray-light) !important;
  cursor: not-allowed;
}