[file name]: taichat-expiration.css
[file content begin]
/* 
* TAI Chat - Estilos oscuros/esotéricos para el sistema de expiración y renovación
* Versión 2.0 - Tema Oscuro/Esotérico
* Compatibilidad total Android/iOS
*/

:root {
--cosmic-primary: #0a0e17;
--cosmic-secondary: #13182b;
--cosmic-accent: #6d28d9;
--cosmic-accent-glow: #8b5cf6;
--cosmic-text: #e2e8f0;
--cosmic-text-dim: #94a3b8;
--cosmic-border: #1e293b;
--cosmic-shadow: rgba(0, 0, 0, 0.5);
--celestial-glow: rgba(109, 40, 217, 0.15);
--orbital-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
--accent-gradient: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
}

/* Modal de Renovación - Tema Cósmico */
.tai-renewal-modal {
border-radius: 16px;
overflow: hidden;
box-shadow: 
0 10px 40px var(--cosmic-shadow),
0 0 60px var(--celestial-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid var(--cosmic-border);
background: var(--cosmic-primary);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}

.tai-renewal-modal .modal-header {
background: var(--orbital-gradient);
border-bottom: 1px solid var(--cosmic-border);
padding: 1.75rem 2rem;
position: relative;
overflow: hidden;
}

.tai-renewal-modal .modal-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--accent-gradient);
animation: scanline 3s linear infinite;
}

.tai-renewal-modal .modal-title {
font-weight: 700;
font-size: 1.5rem;
background: linear-gradient(to right, #e2e8f0, #a78bfa);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.5px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.tai-renewal-modal .modal-body {
padding: 2rem;
background: var(--cosmic-primary);
position: relative;
}

.tai-renewal-modal .section-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--cosmic-text);
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--cosmic-border);
position: relative;
letter-spacing: 0.5px;
}

.tai-renewal-modal .section-title::after {
content: '✦';
position: absolute;
right: 0;
color: var(--cosmic-accent-glow);
animation: pulse 2s infinite;
}

/* Tarjeta de Prompt - Estilo Orbital */
.prompt-card {
display: flex;
align-items: center;
background: var(--cosmic-secondary);
border-radius: 12px;
padding: 1.75rem;
box-shadow: 
0 4px 20px var(--cosmic-shadow),
0 0 30px rgba(109, 40, 217, 0.1);
border: 1px solid var(--cosmic-border);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}

.prompt-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
transition: left 0.7s ease;
}

.prompt-card:hover {
transform: translateY(-4px) scale(1.02);
border-color: var(--cosmic-accent);
box-shadow: 
0 8px 32px rgba(0, 0, 0, 0.6),
0 0 40px rgba(139, 92, 246, 0.2);
}

.prompt-card:hover::before {
left: 100%;
}

.prompt-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--accent-gradient);
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.75rem;
flex-shrink: 0;
position: relative;
box-shadow: 
0 0 20px rgba(139, 92, 246, 0.4),
inset 0 0 20px rgba(255, 255, 255, 0.1);
animation: orb-glow 3s ease-in-out infinite;
}

.prompt-avatar::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid transparent;
background: linear-gradient(45deg, #6d28d9, #8b5cf6, #a78bfa) border-box;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: destination-out;
}

.prompt-avatar i {
font-size: 2.5rem;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.prompt-details {
flex: 1;
}

.prompt-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--cosmic-text);
margin-bottom: 0.75rem;
background: linear-gradient(to right, #e2e8f0, #c4b5fd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.3px;
}

.prompt-description {
color: var(--cosmic-text-dim);
font-size: 1rem;
margin-bottom: 0;
line-height: 1.6;
}

/* Estado - Panel de Cristal */
.status-info {
background: rgba(19, 24, 43, 0.8);
border-radius: 12px;
padding: 1.75rem;
box-shadow: 
0 4px 20px var(--cosmic-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
border: 1px solid var(--cosmic-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.status-items {
display: flex;
flex-direction: column;
gap: 1rem;
}

.status-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(30, 41, 59, 0.5);
position: relative;
}

.status-item:last-child {
border-bottom: none;
}

.status-item::before {
content: '▸';
position: absolute;
left: -1.5rem;
color: var(--cosmic-accent-glow);
font-size: 0.9rem;
}

.status-label {
font-weight: 600;
color: var(--cosmic-text);
font-size: 0.95rem;
letter-spacing: 0.3px;
}

.status-value {
font-size: 0.9rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
letter-spacing: 0.5px;
min-width: 100px;
text-align: center;
border: 1px solid transparent;
background: rgba(30, 41, 59, 0.8);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Tarjeta de Producto - Reliquia Cósmica */
.product-card {
background: var(--cosmic-secondary);
border-radius: 12px;
padding: 1.75rem;
box-shadow: 
0 4px 20px var(--cosmic-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
border: 1px solid var(--cosmic-border);
min-height: 220px;
position: relative;
overflow: hidden;
}

.product-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--accent-gradient);
}

.product-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(10, 14, 23, 0.95);
z-index: 10;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

.product-loading::before {
content: '⌛';
font-size: 2.5rem;
margin-bottom: 1rem;
animation: spin 3s linear infinite;
color: var(--cosmic-accent-glow);
}

.product-loaded {
display: none;
}

.product-loaded.active {
display: block;
animation: fadeInUp 0.6s ease-out;
}

.product-image {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1.25rem;
border: 1px solid var(--cosmic-border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.product-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--cosmic-text);
margin-bottom: 0.75rem;
letter-spacing: 0.3px;
}

.product-price {
font-size: 1.75rem;
font-weight: 800;
color: transparent;
margin-bottom: 1rem;
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
letter-spacing: 1px;
}

.product-description {
color: var(--cosmic-text-dim);
font-size: 0.95rem;
margin-bottom: 1.25rem;
line-height: 1.6;
}

/* Lista de Beneficios - Glifos Ancestrales */
.benefits-list {
list-style: none;
padding: 0;
margin: 0;
}

.benefits-list li {
padding: 0.65rem 0;
color: var(--cosmic-text);
font-size: 0.95rem;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}

.benefits-list li:last-child {
border-bottom: none;
}

.benefits-list li i {
margin-right: 1rem;
font-size: 1rem;
color: var(--cosmic-accent-glow);
min-width: 20px;
}

.benefits-list li::before {
content: '✓';
margin-right: 1rem;
color: var(--cosmic-accent-glow);
font-weight: bold;
}

/* Alertas - Señales Celestiales */
#taiRenewalStatusAlert {
border-radius: 12px;
padding: 1.25rem 1.75rem;
border: none;
margin-bottom: 0;
background: rgba(19, 24, 43, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-left: 4px solid;
animation: alert-pulse 2s infinite;
}

#taiRenewalStatusAlert.alert-warning {
border-left-color: #f59e0b;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(19, 24, 43, 0.9) 100%);
color: #fbbf24;
}

#taiRenewalStatusAlert.alert-danger {
border-left-color: #dc2626;
background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(19, 24, 43, 0.9) 100%);
color: #fca5a5;
}

#taiRenewalStatusAlert.alert-success {
border-left-color: #10b981;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(19, 24, 43, 0.9) 100%);
color: #34d399;
}

.alert-content {
display: flex;
align-items: center;
font-weight: 600;
letter-spacing: 0.3px;
}

.alert-content i {
font-size: 1.5rem;
margin-right: 1rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Botones del Modal - Portales Energéticos */
.modal-footer {
padding: 1.75rem 2rem;
border-top: 1px solid var(--cosmic-border);
background: var(--cosmic-secondary);
display: flex;
gap: 1rem;
}

#taiRenewalProductButton {
min-width: 200px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
padding: 1rem 2rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 12px;
background: var(--accent-gradient);
border: none;
color: white;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.95rem;
position: relative;
overflow: hidden;
box-shadow: 
0 4px 20px rgba(109, 40, 217, 0.3),
0 0 30px rgba(139, 92, 246, 0.2);
}

#taiRenewalProductButton::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.7s ease;
}

#taiRenewalProductButton:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 
0 8px 30px rgba(109, 40, 217, 0.4),
0 0 40px rgba(139, 92, 246, 0.3);
}

#taiRenewalProductButton:hover::before {
left: 100%;
}

#taiRenewalProductButton .button-price {
margin-left: 0.75rem;
font-weight: 800;
font-size: 1.2rem;
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.75rem;
border-radius: 20px;
}

#taiRenewalCheckoutButton {
min-width: 180px;
font-weight: 700;
padding: 1rem 2rem;
border-radius: 12px;
background: transparent;
border: 2px solid var(--cosmic-accent);
color: var(--cosmic-text);
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.95rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

#taiRenewalCheckoutButton:hover {
background: rgba(109, 40, 217, 0.1);
border-color: var(--cosmic-accent-glow);
color: var(--cosmic-accent-glow);
transform: translateY(-2px);
box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* Overlay de Bloqueo - Abismo Cósmico */
.tai-renewal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, #0a0e17 0%, #000000 100%);
z-index: 1040;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
animation: cosmic-void 20s linear infinite;
}

.tai-renewal-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 20% 50%, rgba(109, 40, 217, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(167, 139, 250, 0.1) 0%, transparent 50%);
animation: nebula-float 30s ease-in-out infinite;
}

.tai-renewal-overlay::after {
content: '⏳ ACCESO INTERRUMPIDO';
color: var(--cosmic-text);
font-size: 2rem;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 
0 0 10px var(--cosmic-accent-glow),
0 0 20px var(--cosmic-accent-glow),
0 0 30px var(--cosmic-accent-glow);
animation: 
pulse 2s infinite,
glitch 5s infinite;
position: relative;
padding: 2rem;
background: rgba(10, 14, 23, 0.7);
border-radius: 16px;
border: 1px solid rgba(139, 92, 246, 0.3);
box-shadow: 
0 0 60px rgba(139, 92, 246, 0.2),
inset 0 0 60px rgba(139, 92, 246, 0.1);
}

.tai-renewal-overlay::before {
animation: nebula-float 30s ease-in-out infinite;
}

/* Estados de Expiración - Sellos Energéticos */
.expired-badge {
background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
color: #fecaca;
border: 1px solid rgba(220, 38, 38, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.warning-badge {
background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%);
color: #fef3c7;
border: 1px solid rgba(245, 158, 11, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ok-badge {
background: linear-gradient(135deg, #064e3b 0%, #10b981 100%);
color: #a7f3d0;
border: 1px solid rgba(16, 185, 129, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Animaciones Cósmicas */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes orb-glow {
0%, 100% { 
box-shadow: 
0 0 20px rgba(139, 92, 246, 0.4),
inset 0 0 20px rgba(255, 255, 255, 0.1);
}
50% { 
box-shadow: 
0 0 40px rgba(139, 92, 246, 0.6),
inset 0 0 30px rgba(255, 255, 255, 0.15);
}
}

@keyframes cosmic-void {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}

@keyframes nebula-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-30px, 30px) scale(1.1); }
66% { transform: translate(30px, -30px) scale(0.9); }
}

@keyframes scanline {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

@keyframes alert-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}

@keyframes glitch {
0% { transform: translate(0); }
2% { transform: translate(-2px, 2px); }
4% { transform: translate(-2px, -2px); }
6% { transform: translate(2px, 2px); }
8% { transform: translate(2px, -2px); }
10% { transform: translate(0); }
100% { transform: translate(0); }
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-animation {
animation: shake 0.5s ease-in-out;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in-up {
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive - Adaptación Universal */
@media (max-width: 768px) {
.tai-renewal-modal .modal-body {
padding: 1.5rem;
}

.tai-renewal-modal .modal-header {
padding: 1.5rem;
}

.prompt-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
}

.prompt-avatar {
margin-right: 0;
margin-bottom: 1.5rem;
width: 70px;
height: 70px;
}

.prompt-avatar i {
font-size: 2rem;
}

.status-items {
gap: 0.75rem;
}

.status-item::before {
display: none;
}

.modal-footer {
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
}

#taiRenewalProductButton,
#taiRenewalCheckoutButton {
width: 100%;
min-width: unset;
padding: 0.875rem 1.5rem;
}

.tai-renewal-overlay::after {
font-size: 1.5rem;
padding: 1.5rem;
margin: 1rem;
}

.product-price {
font-size: 1.5rem;
}
}

/* Optimizaciones para iOS */
@supports (-webkit-touch-callout: none) {
.tai-renewal-modal {
-webkit-overflow-scrolling: touch;
}

.tai-renewal-overlay {
-webkit-backdrop-filter: blur(30px);
}
}

/* Optimizaciones para Android */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.tai-renewal-modal {
transform: translateZ(0);
backface-visibility: hidden;
}
}

/* Soporte para modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
.tai-renewal-modal {
background: var(--cosmic-primary);
}
}

/* Mejoras de rendimiento */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
[file content end]

/* 
* TAI Chat - Override CSS para sistema de expiración (Tema Oscuro/Esotérico)
* Versión 2.0 - Override con !important para garantizar prevalencia
* Compatibilidad total Android/iOS
*/

/* ===== MODAL DE RENOVACIÓN ===== */
#taiRenewalModal .modal-content {
background: linear-gradient(135deg, #0a0e17 0%, #13182b 100%) !important;
border: 1px solid #1e293b !important;
border-radius: 16px !important;
box-shadow: 
0 10px 40px rgba(0, 0, 0, 0.5),
0 0 60px rgba(109, 40, 217, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}

#taiRenewalModal .modal-header {
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%) !important;
border-bottom: 1px solid #1e293b !important;
padding: 1.75rem 2rem !important;
}

#taiRenewalModal .modal-title {
font-weight: 700 !important;
font-size: 1.5rem !important;
background: linear-gradient(to right, #e2e8f0, #a78bfa) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
letter-spacing: 0.5px !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

#taiRenewalModal .modal-body {
background: #0a0e17 !important;
padding: 2rem !important;
}

#taiRenewalModal .modal-footer {
background: #13182b !important;
border-top: 1px solid #1e293b !important;
padding: 1.75rem 2rem !important;
}

/* ===== TARJETA DE PROMPT ===== */
.prompt-card {
background: #13182b !important;
border: 1px solid #1e293b !important;
border-radius: 12px !important;
box-shadow: 
0 4px 20px rgba(0, 0, 0, 0.5),
0 0 30px rgba(109, 40, 217, 0.1) !important;
padding: 1.75rem !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.prompt-card:hover {
transform: translateY(-4px) scale(1.02) !important;
border-color: #6d28d9 !important;
box-shadow: 
0 8px 32px rgba(0, 0, 0, 0.6),
0 0 40px rgba(139, 92, 246, 0.2) !important;
}

.prompt-avatar {
background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%) !important;
width: 80px !important;
height: 80px !important;
box-shadow: 
0 0 20px rgba(139, 92, 246, 0.4),
inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
animation: orb-glow 3s ease-in-out infinite !important;
}

.prompt-title {
font-size: 1.5rem !important;
font-weight: 700 !important;
background: linear-gradient(to right, #e2e8f0, #c4b5fd) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
letter-spacing: 0.3px !important;
}

.prompt-description {
color: #94a3b8 !important;
font-size: 1rem !important;
line-height: 1.6 !important;
}

/* ===== INFORMACIÓN DE ESTADO ===== */
.status-info {
background: rgba(19, 24, 43, 0.8) !important;
border: 1px solid #1e293b !important;
border-radius: 12px !important;
box-shadow: 
0 4px 20px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
padding: 1.75rem !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}

.status-item {
border-bottom: 1px solid rgba(30, 41, 59, 0.5) !important;
padding: 0.75rem 0 !important;
}

.status-label {
color: #e2e8f0 !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
letter-spacing: 0.3px !important;
}

.status-value {
background: rgba(30, 41, 59, 0.8) !important;
border: 1px solid transparent !important;
border-radius: 20px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
color: #e2e8f0 !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
min-width: 100px !important;
padding: 0.5rem 1rem !important;
text-align: center !important;
}

/* ===== ALERTAS DE ESTADO ===== */
#taiRenewalStatusAlert {
background: rgba(19, 24, 43, 0.9) !important;
border: none !important;
border-left: 4px solid !important;
border-radius: 12px !important;
padding: 1.25rem 1.75rem !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}

#taiRenewalStatusAlert.alert-warning {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(19, 24, 43, 0.9) 100%) !important;
border-left-color: #f59e0b !important;
color: #fbbf24 !important;
}

#taiRenewalStatusAlert.alert-danger {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(19, 24, 43, 0.9) 100%) !important;
border-left-color: #dc2626 !important;
color: #fca5a5 !important;
}

#taiRenewalStatusAlert.alert-success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(19, 24, 43, 0.9) 100%) !important;
border-left-color: #10b981 !important;
color: #34d399 !important;
}

.alert-content {
font-weight: 600 !important;
letter-spacing: 0.3px !important;
}

.alert-content i {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* ===== TARJETA DE PRODUCTO ===== */
#taiRenewalProductCard {
background: #13182b !important;
border: 1px solid #1e293b !important;
border-radius: 12px !important;
box-shadow: 
0 4px 20px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
min-height: 220px !important;
padding: 1.75rem !important;
position: relative !important;
}

.product-loaded.active {
animation: fadeInUp 0.6s ease-out !important;
}

.product-title {
color: #e2e8f0 !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
}

.product-price {
background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
font-size: 1.75rem !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.product-description {
color: #94a3b8 !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
}

/* ===== BOTONES ===== */
#taiRenewalProductButton {
background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%) !important;
border: none !important;
border-radius: 12px !important;
box-shadow: 
0 4px 20px rgba(109, 40, 217, 0.3),
0 0 30px rgba(139, 92, 246, 0.2) !important;
color: white !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
min-width: 200px !important;
padding: 1rem 2rem !important;
text-transform: uppercase !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#taiRenewalProductButton:hover {
transform: translateY(-3px) scale(1.05) !important;
box-shadow: 
0 8px 30px rgba(109, 40, 217, 0.4),
0 0 40px rgba(139, 92, 246, 0.3) !important;
}

#taiRenewalCheckoutButton {
background: transparent !important;
border: 2px solid #6d28d9 !important;
border-radius: 12px !important;
color: #e2e8f0 !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
min-width: 180px !important;
padding: 1rem 2rem !important;
text-transform: uppercase !important;
transition: all 0.3s ease !important;
}

#taiRenewalCheckoutButton:hover {
background: rgba(109, 40, 217, 0.1) !important;
border-color: #8b5cf6 !important;
color: #8b5cf6 !important;
transform: translateY(-2px) !important;
box-shadow: 0 0 20px rgba(139, 92, 246, 0.2) !important;
}

/* ===== OVERLAY DE BLOQUEO ===== */
#taiRenewalOverlay {
background: radial-gradient(circle at center, #0a0e17 0%, #000000 100%) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
animation: cosmic-void 20s linear infinite !important;
}

/* ===== TOASTS DE NOTIFICACIÓN ===== */
#taiExpirationToasts .toast {
background: #13182b !important;
border: 1px solid #1e293b !important;
border-radius: 12px !important;
box-shadow: 
0 4px 20px rgba(0, 0, 0, 0.5),
0 0 30px rgba(109, 40, 217, 0.1) !important;
}

#taiExpirationToasts .toast.text-bg-warning {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, #13182b 100%) !important;
color: #fbbf24 !important;
}

#taiExpirationToasts .toast.text-bg-danger {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, #13182b 100%) !important;
color: #fca5a5 !important;
}

#taiExpirationToasts .btn-outline-light {
border-color: rgba(255, 255, 255, 0.3) !important;
color: #e2e8f0 !important;
}

#taiExpirationToasts .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ===== OPCIONES DEL SELECTOR ===== */
.expired-option {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, transparent 100%) !important;
color: #fca5a5 !important;
opacity: 0.7 !important;
}

.warning-option {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, transparent 100%) !important;
color: #fbbf24 !important;
}

/* ===== MENSAJES DEL SISTEMA EN CHAT ===== */
.system-message .alert {
background: rgba(19, 24, 43, 0.9) !important;
border: 1px solid #1e293b !important;
border-radius: 12px !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}

.system-message .alert-info {
background: linear-gradient(135deg, rgba(109, 40, 217, 0.2) 0%, rgba(19, 24, 43, 0.9) 100%) !important;
border-color: #6d28d9 !important;
color: #a78bfa !important;
}

.system-message .alert-danger {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(19, 24, 43, 0.9) 100%) !important;
border-color: #dc2626 !important;
color: #fca5a5 !important;
}

/* ===== MODAL DE PROCESAMIENTO ===== */
#taiRenewalProcessingModal .modal-content {
background: linear-gradient(135deg, #0a0e17 0%, #13182b 100%) !important;
border: 1px solid #1e293b !important;
border-radius: 16px !important;
box-shadow: 
0 10px 40px rgba(0, 0, 0, 0.5),
0 0 60px rgba(109, 40, 217, 0.15) !important;
}

/* ===== BADGES DE ESTADO ===== */
.expired-badge {
background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%) !important;
border: 1px solid rgba(220, 38, 38, 0.3) !important;
color: #fecaca !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.warning-badge {
background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%) !important;
border: 1px solid rgba(245, 158, 11, 0.3) !important;
color: #fef3c7 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.ok-badge {
background: linear-gradient(135deg, #064e3b 0%, #10b981 100%) !important;
border: 1px solid rgba(16, 185, 129, 0.3) !important;
color: #a7f3d0 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ===== TOASTS DE ERROR DINÁMICOS ===== */
.toast.text-bg-danger {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, #13182b 100%) !important;
border: 1px solid #1e293b !important;
border-radius: 12px !important;
box-shadow: 
0 4px 20px rgba(0, 0, 0, 0.5),
0 0 30px rgba(220, 38, 38, 0.1) !important;
color: #fca5a5 !important;
}

/* ===== ANIMACIONES ===== */
@keyframes orb-glow {
0%, 100% { 
box-shadow: 
0 0 20px rgba(139, 92, 246, 0.4),
inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
}
50% { 
box-shadow: 
0 0 40px rgba(139, 92, 246, 0.6),
inset 0 0 30px rgba(255, 255, 255, 0.15) !important;
}
}

@keyframes cosmic-void {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
#taiRenewalModal .modal-header,
#taiRenewalModal .modal-body,
#taiRenewalModal .modal-footer {
padding: 1.5rem !important;
}

.prompt-card {
padding: 1.5rem !important;
text-align: center !important;
}

.prompt-avatar {
margin-right: 0 !important;
margin-bottom: 1.5rem !important;
width: 70px !important;
height: 70px !important;
}

.prompt-avatar i {
font-size: 2rem !important;
}

#taiRenewalProductButton,
#taiRenewalCheckoutButton {
width: 100% !important;
min-width: unset !important;
padding: 0.875rem 1.5rem !important;
}

.product-price {
font-size: 1.5rem !important;
}
}

/* ===== COMPATIBILIDAD IOS ===== */
@supports (-webkit-touch-callout: none) {
#taiRenewalModal .modal-content,
.status-info,
#taiRenewalStatusAlert,
#taiRenewalProductCard,
#taiExpirationToasts .toast,
.system-message .alert {
-webkit-backdrop-filter: blur(20px) !important;
}
}

/* ===== COMPATIBILIDAD ANDROID ===== */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
#taiRenewalModal .modal-content,
.prompt-card,
.status-info,
#taiRenewalProductCard {
transform: translateZ(0) !important;
backface-visibility: hidden !important;
}
}