style.css

/* === NIGHT THEME (rojo anaranjado + blanco) === */

/* Paleta */
:root{
  --bg-1:#0d0f12;
  --bg-2:#12151a;
  --card:#171b22;
  --border:rgba(255,255,255,.06);
  --text:#ffffff;
  --text-muted:#E5E7EB;
  --primary:#FF5A3C;        /* naranja/rojo */
  --primary-strong:#E53935; /* rojo */
  --glow:rgba(229,57,53,.25);
  --pill-bg:rgba(255,90,60,.12);
}

/* fondo con degradado oscuro */
.gradio-container{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,90,60,.10) 0%, rgba(255,90,60,0) 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 60%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* tarjetas, paneles, grupos */
.gr-box, .gr-panel, .gr-group{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
}

/* inputs */
textarea, input, .gr-textbox, .gr-text-input, .gr-text-area{
  background: #12161e !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}

/* botones */
button, .gr-button{ border-radius: 999px !important; }
button.primary, .gr-button-primary{
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-strong) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 24px var(--glow);
}
button.primary:hover, .gr-button-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(229,57,53,.35);
}

/* títulos */
#title{ text-align:center; }
#title h1{
  font-weight: 800;
  letter-spacing: .2px;
  color:#fff; /* contraste asegurado */
  text-shadow: 0 2px 18px rgba(229,57,53,.25);
}
#subtitle{
  text-align:center;
  color: var(--text-muted);
  margin-top: -6px;
}
#title .accent, #subtitle strong{ color: var(--primary); }

/* acordeones */
.accordion{
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
}

/* pill de resultado */
#result-pill{
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--pill-bg);
  color: #fff;
  font-weight: 700;
  display: inline-block;
  border: 1px solid rgba(255,90,60,.25);
}

/* sombras suaves opcionales */
.shadow-soft{ box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* Mobile tweaks */
@media (max-width: 640px){
  #title h1{ font-size: 1.6rem; line-height: 1.2; }
  #subtitle{ font-size: .95rem; margin-top: -2px; }
  .gradio-container{
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  }
}

/* (opcional) modo claro si el dispositivo lo pide */
@media (prefers-color-scheme: light){
  .gradio-container{
    background:
      radial-gradient(1200px 600px at 80% -10%, #FFE7DE 0%, rgba(255,231,222,0) 60%),
      linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 60%);
    color:#1f2937;
  }
  .gr-box, .gr-panel, .gr-group{
    background:#fff !important; border:1px solid rgba(17,24,39,.06) !important;
  }
  #title h1{ color: var(--primary-strong); text-shadow:none; }
  #subtitle{ color:#FF7043; }
  #result-pill{ background:#FFE6DE; color:#D84315; border:none; }
}