File size: 3,125 Bytes
92d3bf8 90d92da 92d3bf8 90d92da 92d3bf8 90d92da 92d3bf8 90d92da 92d3bf8 90d92da 92d3bf8 90d92da 92d3bf8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
/* === 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; }
}
|