/* static/css/base.css
   =========================================
   Urareva - Base Theme (Warm: yellow/orange/red)
   FIX: Fondo sin cortes (no “tile”)
   ========================================= */

/* ---------- Theme Tokens ---------- */
:root{
  --color-primary: #f97316;      /* orange */
  --color-secondary: #ef4444;    /* red */
  --color-accent: #facc15;       /* yellow */
  --color-primary-dark: #c2410c; /* dark orange */

  --bg-page: #fff7ed;            /* warm soft background */
  --bg-card: rgba(255,255,255,0.78);
  --border-soft: rgba(249,115,22,0.18);

  --text-main: #111827;
  --text-muted: rgba(17,24,39,0.65);

  --radius-pill: 999px;
  --radius-card: 18px;

  --shadow-soft: 0 18px 50px rgba(17,24,39,0.08);
}

/* ---------- Base Layout ---------- */
html, body{
  height: 100%;
}

body{
  min-height: 100%;
  margin: 0;

  /* ✅ Fondo base sólido (el gradiente real va en ::before) */
  background-color: var(--bg-page);
  color: var(--text-main);

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ✅ evitar efectos de “tile” por accidente */
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;

  /* para que el pseudo-elemento fijo se renderice fino */
  position: relative;
}

/* ✅ Fondo único y continuo para toda la página (NO se corta) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(1200px 700px at 18% 8%, rgba(250,204,21,0.22), transparent 60%),
    radial-gradient(1200px 700px at 85% 18%, rgba(249,115,22,0.18), transparent 60%),
    radial-gradient(1200px 700px at 55% 95%, rgba(239,68,68,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-page) 0%, #ffffff 55%, var(--bg-page) 100%);

  transform: translateZ(0);
  pointer-events: none;
}

/* ✅ iOS/Android fix (si fixed causa glitches) */
@media (max-width: 768px){
  body{
    background-attachment: scroll !important;
  }
  body::before{
    position: absolute;
  }
}

/* Links */
a{
  text-decoration: none;
}
a:hover{
  text-decoration: none;
}

/* ---------- Common Utilities ---------- */
.text-rose{
  /* ✅ mantenemos la clase pero cambiamos el color */
  color: var(--color-primary) !important;
}

.bg-rose{
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary), var(--color-secondary)) !important;
}

/* Acentos antiguos para badges (mantén nombres) */
.bg-pink{
  background-color: rgba(250,204,21,0.35) !important; /* warm yellow tint */
}
.bg-purple{
  background-color: rgba(239,68,68,0.18) !important; /* soft red tint */
}

/* ---------- Cards ---------- */
.card-soft{
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}

/* ---------- Buttons ---------- */
.btn-rose{
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary), var(--color-secondary));
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-rose:hover{
  filter: saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(249,115,22,0.40);
}

.btn-rose:active{
  transform: scale(0.98);
}

.btn-soft{
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(249,115,22,0.35) !important;
  background: rgba(255,255,255,0.70) !important;
  color: var(--color-primary-dark) !important;
  font-weight: 750;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.btn-soft:hover{
  background: rgba(255,247,237,0.95) !important;
  border-color: rgba(249,115,22,0.65) !important;
}

.btn-outline-rose,
.btn-outline-rose2{
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(249,115,22,0.55) !important;
  color: var(--color-primary-dark) !important;
  background: transparent !important;
  font-weight: 750;
}
.btn-outline-rose:hover,
.btn-outline-rose2:hover{
  background: rgba(255,247,237,0.95) !important;
  border-color: rgba(249,115,22,0.85) !important;
}

/* ---------- Navbar ---------- */
.navbar{
  backdrop-filter: blur(10px);
}

.navbar .navbar-brand{
  font-weight: 900;
  letter-spacing: .6px;
}

.nav-link{
  font-weight: 650;
}

.nav-link:hover{
  color: var(--color-primary) !important;
}

.active-link{
  color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary);
}

/* ---------- Forms ---------- */
.form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="date"], select{
  border-radius: 14px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus{
  border-color: rgba(249,115,22,0.70) !important;
  box-shadow: 0 0 0 .2rem rgba(249,115,22,0.22) !important;
  outline: none !important;
}

/* ---------- Footer ---------- */
.site-footer{
  color: var(--text-muted);
}

/* ---------- Responsive helpers ---------- */
.container-xl{
  max-width: 1200px;
}
.page-link {
    background-color: transparent;
    padding: 0.5rem 0.8rem;
}

.page-link.text-rose:hover {
    color: var(--color-primary-dark) !important;
    background-color: var(--bg-page);
    transform: translateY(-1px);
}

.fw-black {
    font-weight: 900;
}