/* Path: /home/granrifa/public_html/css/main_style.css */
:root{
  --bg: #0e0e0f;
  --panel: #141416;
  --text: #f2f2f2;
  --muted: #b7b7b7;
  --line: rgba(255,255,255,.08);
  --orange: #f39221;
  --gold: #d4af37;
  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --radius: 18px;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  background: radial-gradient(1000px 600px at 20% 0%, rgba(243,146,33,.14), transparent 60%),
              radial-gradient(900px 600px at 90% 20%, rgba(212,175,55,.10), transparent 60%),
              var(--bg);
  color: var(--text);
}

.app-container{ max-width: 1100px; }
.app-bg{ background-color: var(--bg); }

.app-topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(14,14,15,.74);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.app-logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  padding: 6px;
}

.app-brand{ font-weight: 800; letter-spacing: .2px; color: var(--text); }
.app-subbrand{ font-size: 12px; color: var(--muted); }

.btn-app{
  background: linear-gradient(135deg, var(--orange), var(--gold));
  color: #141416 !important;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(243,146,33,.20);
}
.btn-app:hover{ filter: brightness(1.02); }
.btn-app-outline{
  border-radius: 14px;
  border: 1px solid rgba(243,146,33,.55);
  color: var(--text) !important;
  background: rgba(243,146,33,.08);
}
.btn-app-outline:hover{ background: rgba(243,146,33,.14); }

.app-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.app-card-soft{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hero{ padding: 18px 0 8px 0; }
.hero-badge{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.08);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
}
.hero-title{
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.08;
}
.hero-subtitle{ color: var(--muted); font-size: 14px; }

.section-title{ font-weight: 900; font-size: 18px; }
.section-subtitle{ color: var(--muted); font-size: 13px; }

.progress{
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}
.progress-bar{
  background: linear-gradient(135deg, var(--orange), var(--gold));
}

.raffle-img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

.tag{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.tag-orange{ border-color: rgba(243,146,33,.40); background: rgba(243,146,33,.10); }
.tag-gold{ border-color: rgba(212,175,55,.35); background: rgba(212,175,55,.09); }

.app-footer{
  border-top: 1px solid var(--line);
  background: rgba(14,14,15,.66);
}

a{ color: inherit; }
.text-orange{ color: var(--orange) !important; }
.text-gold{ color: var(--gold) !important; }


/* ===== FIX QUILL (FORMATO EDITOR) ===== */

.prizes-wrap .ql-align-center { text-align: center; }
.prizes-wrap .ql-align-right { text-align: right; }
.prizes-wrap .ql-align-justify { text-align: justify; }

.prizes-wrap .ql-indent-1 { padding-left: 2em; }
.prizes-wrap .ql-indent-2 { padding-left: 4em; }
.prizes-wrap .ql-indent-3 { padding-left: 6em; }

.prizes-wrap ul { padding-left: 20px; list-style: disc; }
.prizes-wrap ol { padding-left: 20px; list-style: decimal; }

.prizes-wrap strong { font-weight: bold; }
.prizes-wrap em { font-style: italic; }
.prizes-wrap u { text-decoration: underline; }