/*
 * ==============================================================================
 * Archivo: estilo.css
 * Ubicación: citychip_certificados/assets/css/estilo.css
 * Uso: Estilos visuales centralizados. Actualizado a versión PREMIUM.
 * ==============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Montserrat:wght@400;500;600&display=swap');

:root {
    --bg-dark: #121418;
    --bg-light: #ffffff;
    --bg-premium: #f8f9fa;
    --primary: #FF8C00;
    --primary-hover: #e07b00;
    --accent: #FFD700;
    --text-main: #2b2b2b;
    --text-desc: #6c757d;
    --font-primary: 'Exo 2', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    --shadow-premium: 0 20px 40px rgba(0,0,0,0.08);
}

body {
    font-family: var(--font-secondary);
    background-color: var(--bg-premium);
    color: var(--text-main);
    /* El fondo premium tiene un gradiente sutil y elegante */
    background-image: radial-gradient(circle at top right, rgba(255,140,0,0.05), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(255,215,0,0.05), transparent 40%);
    background-attachment: fixed;
}

h1, h2, h3, .nav-brand { font-family: var(--font-primary); font-weight: 700; }

.text-muted {
    color: var(--text-desc) !important;
}

.bg-citychip-dark { background-color: var(--bg-dark); }

/* Botones Premium */
.btn-primary-city {
    background-color: var(--primary); 
    color: var(--bg-light); 
    border: none;
    font-weight: 600; 
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
    transition: all 0.3s ease;
}
.btn-primary-city:hover { 
    background-color: var(--primary-hover); 
    color: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.4);
}

/* Tarjetas Premium */
.card-custom { 
    border: none; 
    border-radius: 16px; 
    box-shadow: var(--shadow-premium); 
    border-top: 5px solid var(--primary);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

/* Input Premium para Verificación */
.input-premium {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 1.1rem;
    font-family: var(--font-secondary);
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.3s ease;
}
.input-premium:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1);
    outline: none;
}

/* Certificado Responsivo */
.certificado-canvas {
    background-color: var(--bg-light); 
    border: 8px solid var(--bg-dark); 
    outline: 3px solid var(--accent); 
    outline-offset: -8px;
    padding: 40px 20px; 
    position: relative; 
    text-align: center; 
    color: var(--bg-dark); 
    margin-top: 30px;
    border-radius: 4px;
    box-shadow: var(--shadow-premium);
}
.certificado-title { color: var(--primary); font-size: 2.2rem; text-transform: uppercase; margin-bottom: 25px; letter-spacing: 1.5px; }
.certificado-data h3 { font-size: 1.8rem; margin: 8px 0; color: var(--text-main); }
.certificado-data p { font-size: 1.1rem; margin: 4px 0; color: var(--text-desc); }
.qr-container { margin-top: 25px; }
.qr-container img { width: 130px; border: 2px solid var(--accent); padding: 5px; border-radius: 8px; }

/* Ajustes Móviles al 100% */
@media (max-width: 768px) {
    .certificado-canvas { padding: 30px 15px; border-width: 5px; outline-offset: -5px; }
    .certificado-title { font-size: 1.5rem; }
    .certificado-data h3 { font-size: 1.3rem; }
    .certificado-data p { font-size: 0.95rem; }
    .qr-container img { width: 100px; }
}

@media print {
    body { background: none; background-color: var(--bg-light); }
    .no-print { display: none !important; }
    .certificado-canvas {
        border: 10px solid var(--bg-dark) !important; outline: 4px solid var(--accent) !important;
        width: 100%; height: auto; box-shadow: none; margin: 0; padding: 50px; page-break-after: always;
    }
}