/* Estilos para el formulario de login - Valoras | Inspirado en Flycam */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* =================================================================
   SISTEMA DE TOKENS — VALORA.VIP
   Fuente de verdad: DESIGN_SYSTEM.md (raíz del proyecto)
   Filosofía: minimizar tokens, agrupar tonos similares (drift ≤15 RGB)
   Creado en W1b.1 | Reemplazos por var() pendientes para W1b.2 y W1b.3
   ================================================================= */

html {
    font-size: 16px;
}

:root {
    /* ---------- MARCA ---------- */
    --color-primario: #882a57;
    --color-primario-oscuro: #6a1b1b;
    --color-primario-claro: #ee6f92;
    --color-primario-sutil: #f5e6ee;

    /* ---------- ESTADOS ---------- */
    --color-exito: #28a745;
    --color-exito-fondo: #d4edda;
    --color-exito-texto: #155724;
    --color-exito-borde: #c3e6cb;

    --color-error: #dc3545;
    --color-error-fondo: #f8d7da;
    --color-error-borde: #f5c6cb;
    /* Texto de error usa --color-primario-oscuro (son visualmente idénticos) */

    --color-advertencia: #ffc107;
    --color-advertencia-fondo: #fff3cd;
    --color-advertencia-texto: #856404;

    --color-info: #17a2b8;
    --color-info-fondo: #d1ecf1;
    --color-info-texto: #0c5460;
    --color-info-borde: #bee5eb;

    /* ---------- NEUTROS — TEXTO ---------- */
    --color-texto-principal: #333333;
    --color-texto-secundario: #666666;
    --color-texto-sutil: #999999;
    --color-texto-deshabilitado: #888888;
    --color-texto-muted: #6c757d;
    --color-cal-revisado: #ffe69c;
    --color-advertencia-pastel: #ffe69c;

    /* ---------- NEUTROS — FONDOS Y BORDES ---------- */
    --color-fondo-pagina: #f8f9fa;
    --color-fondo-tarjeta: #ffffff;
    --color-borde-sutil: #dee2e6;
    --color-borde-medio: #e9ecef;

    /* ---------- TIPOGRAFÍA ---------- */
    --fuente-base: 'Poppins', sans-serif;
    --fuente-mono: 'Courier New', monospace;

    --tamano-xs: 0.625rem;      /* 10px */
    --tamano-sm: 0.75rem;       /* 12px */
    --tamano-md: 0.875rem;      /* 14px — metadatos, labels secundarios */
    --tamano-base: 1rem;        /* 16px — texto del body */
    --tamano-lg: 1.125rem;      /* 18px */
    --tamano-xl: 1.25rem;       /* 20px */
    --tamano-2xl: 1.5rem;       /* 24px */
    --tamano-3xl: 2rem;         /* 32px */
    --tamano-hero: 3rem;        /* 48px */

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-semibold: 600;
    --peso-bold: 700;

    /* ---------- ESPACIADO ---------- */
    --espaciado-xs: 0.25rem;    /* 4px */
    --espaciado-sm: 0.5rem;     /* 8px */
    --espaciado-md: 0.75rem;    /* 12px — dominante en el sistema */
    --espaciado-lg: 1rem;       /* 16px — absorbe usos de 15px */
    --espaciado-xl: 1.25rem;    /* 20px */
    --espaciado-2xl: 1.875rem;  /* 30px */
    --espaciado-3xl: 2.5rem;    /* 40px */
}

/* Asegurar scroll global */
html, body {
    height: auto;
    overflow-y: auto;
}

body {
    font-family: var(--fuente-base);
    background-color: #fce4ec;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Layout solo para páginas de autenticación */
body.auth-layout {
    min-height: 100vh;
    background: inherit;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.login-container {
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(224, 224, 224, 0.4);
    width: 100%;
    max-width: 380px;
    border: 1px solid var(--color-primario-claro);
    backdrop-filter: blur(10px);
    margin-top: 0;
    margin-bottom: 40px;
}

.login-container h2 {
    text-align: center;
    color: var(--color-primario);
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 0.5px;
}

@media (max-width: 480px) {
    .login-container h2 {
        font-size: 20px;
        white-space: nowrap;
    }
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primario);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-primario-claro);
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--fuente-base);
    box-sizing: border-box;
    transition: all 0.3s ease;
    background-color: var(--color-fondo-pagina);
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 15px rgba(238, 111, 146, 0.2);
    background-color: white;
    transform: translateY(-1px);
}

.btn-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-claro) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--fuente-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(136, 42, 87, 0.3);
}

.btn-submit:hover {
    background: linear-gradient(135deg, var(--color-primario-oscuro) 0%, var(--color-primario-claro) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(136, 42, 87, 0.4);
}

.btn-submit:active {
    transform: translateY(0px);
}

/* Estilos para el botón de reenvío de código */
.btn-resend {
    background-color: var(--color-primario);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 0 auto;
    display: inline-block;
}

.btn-resend:hover:not(:disabled) {
    background-color: #6d1f43;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(136, 42, 87, 0.3);
}

.btn-resend:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #cccccc;
}

.resend-section {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background-color: var(--color-fondo-pagina);
    border-radius: 8px;
    border: 1px solid var(--color-borde-medio);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.countdown-text {
    color: var(--color-texto-secundario);
    font-size: 13px;
    margin-left: 10px;
    font-weight: 500;
}

.resend-message {
    margin-top: 10px;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 4px;
}

.resend-message .success {
    color: var(--color-exito);
    background-color: var(--color-exito-fondo);
    border: 1px solid var(--color-exito-borde);
}

.resend-message .error {
    color: var(--color-error);
    background-color: var(--color-error-fondo);
    border: 1px solid var(--color-error-borde);
}

.logo {
    display: block;
    margin: 0 auto 0px auto;
    max-width: 180px;
}

/* Estilos para el select del código de país */
select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-primario-claro);
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--fuente-base);
    box-sizing: border-box;
    transition: all 0.3s ease;
    background-color: var(--color-fondo-pagina);
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 15px rgba(238, 111, 146, 0.2);
    background-color: white;
    transform: translateY(-1px);
}

/* Botón primario reutilizable - Compatible con continue-btn existente */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primario-claro) 0%, var(--color-primario-claro) 100%);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 30px auto 0;
    min-width: 200px;
    text-decoration: none;
    text-align: center;
    font-family: var(--fuente-base);
}

/* Botón toggle de filtro (mostrar/ocultar inactivos, archivados, etc.). Genérico y reusable. */
.btn-toggle-filtro {
    background: rgba(106, 27, 27, 0.15);
    color: #6A1B1B;
    border: 1px solid rgba(106, 27, 27, 0.3);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-toggle-filtro:hover {
    background: rgba(106, 27, 27, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, var(--color-primario-claro) 0%, var(--color-primario-oscuro) 100%);
}

.btn-primary:active {
    transform: translateY(0px);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary i {
    margin-right: 8px;
}

/* ==================================
   ESTILOS PARA VERIFICACIÓN DE DOCUMENTO
   ================================== */

/* Control del salto visual al expandir details */
details[open], 
.ocr-text-toggle, 
.results-container,
#idScanResult {
    scroll-margin-top: 90px;
    overflow-anchor: none;
}

details {
    transition: all 0.3s ease;
}

/* Scroll interno del texto OCR extraído */
.ocr-text-content {
    max-height: 420px;
    overflow-y: auto;
    background: var(--color-fondo-tarjeta);
    border-radius: 10px;
    padding: 12px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Scrollbar personalizada para el texto OCR */
.ocr-text-content::-webkit-scrollbar {
    width: 8px;
}

.ocr-text-content::-webkit-scrollbar-track {
    background: var(--color-fondo-pagina);
    border-radius: 10px;
}

.ocr-text-content::-webkit-scrollbar-thumb {
    background: var(--color-primario);
    border-radius: 10px;
}

.ocr-text-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-primario-oscuro);
}

/* Botón de análisis centrado y responsivo */
.analyze-button,
#analyzeIdButton {
    display: block;
    margin: 20px auto;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Ajustes responsive para móvil */
@media (max-width: 768px) {
    body.auth-layout {
        padding-top: 40px;
    }
    
    details[open], 
    .ocr-text-toggle, 
    #idScanResult {
        scroll-margin-top: 70px;
    }
    
    .ocr-text-content {
        max-height: 300px;
        font-size: 13px;
    }
    
    .analyze-button,
    #analyzeIdButton {
        max-width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body.auth-layout {
        padding-top: 20px;
    }
    
    details[open], 
    .ocr-text-toggle,
    #idScanResult {
        scroll-margin-top: 60px;
    }
    
    .ocr-text-content {
        max-height: 250px;
        font-size: 12px;
        padding: 10px;
    }
}

/* ==========================================
   AUTH SPACE — Links secundarios
   ========================================== */
.auth-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    text-align: center;
}

.auth-links .auth-link {
    color: var(--color-primario);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: block;
}

.auth-links .auth-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* ==========================================
   auth: register/step1.php
   ========================================== */

* {
    box-sizing: border-box;
}

.stepper-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.register-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

.auth-logo {
    text-align: center;
    margin-bottom: 20px;
}

.auth-logo img {
    max-width: 140px;
}

.header {
    text-align: center;
    margin-bottom: 30px;
}

.header h1 {
    color: var(--color-primario);
    font-size: 28px;
    margin-bottom: 10px;
}

.header p {
    color: var(--color-texto-secundario);
    font-size: 16px;
}

.btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.suggestions {
    display: none;
}

.suggestions.show {
    display: block;
}

.loading {
    text-align: center;
    padding: 30px;
    color: var(--color-texto-secundario);
}

.loading.hide {
    display: none;
}

.suggestions h3 {
    color: var(--color-primario);
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
}

.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 30px;
    width: 100%;
}

.custom-username-section {
    margin-top: 30px;
    padding-top: 30px;
}

.divider {
    text-align: center;
    position: relative;
    margin-bottom: 25px;
}

.divider span {
    background: white;
    padding: 0 15px;
    color: var(--color-texto-secundario);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
}

.custom-input-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

.custom-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 10px;
    text-align: center;
}

.custom-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--color-borde-medio);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.custom-input:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(136, 42, 87, 0.1);
}

.validation-hints {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.hint {
    font-size: 12px;
    color: var(--color-texto-sutil);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* AUTH-REGISTER.D4 (D5): indicador funcional con 3 estados.
   Gris (default, sin valor) / verde (valid) / rojo (invalid).
   Reemplaza al patrón anterior con ::before '✓ ' que duplicaba feedback. */
.hint .hint-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-borde, #ccc);
    transition: background 0.3s ease;
}

.hint.valid {
    color: var(--color-exito);
    font-weight: 600;
}
.hint.valid .hint-indicator {
    background: var(--color-exito);
}

.hint.invalid {
    color: var(--color-error);
    font-weight: 600;
}
.hint.invalid .hint-indicator {
    background: var(--color-error);
}

.btn-verify {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-claro));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.btn-verify:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primario-oscuro), var(--color-primario));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(136, 42, 87, 0.3);
}

.btn-verify:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.custom-result {
    margin-top: 20px;
    animation: fadeIn 0.4s ease;
}

.custom-result-card {
    background: white;
    border: 3px solid var(--color-exito);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
}

.custom-result-card.unavailable {
    border-color: var(--color-error);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
}

.custom-result-card.selected {
    border-color: var(--color-primario);
    background: linear-gradient(135deg, #f8f0f4, var(--color-fondo-tarjeta));
    box-shadow: 0 8px 24px rgba(136, 42, 87, 0.25);
}

.custom-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.username-display-large {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin-bottom: 5px;
}

.username-score-large {
    font-size: 14px;
    color: var(--color-texto-secundario);
    font-weight: 600;
}

.available-badge {
    background: linear-gradient(135deg, var(--color-exito), #20c997);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.unavailable-badge {
    background: linear-gradient(135deg, var(--color-error), #c82333);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.platform-status-large {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px;
    background: var(--color-fondo-pagina);
    border-radius: 8px;
    margin-bottom: 15px;
}

.status-item-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.btn-select-custom {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-claro));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-select-custom:hover {
    background: linear-gradient(135deg, var(--color-primario-oscuro), var(--color-primario));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(136, 42, 87, 0.3);
}

.error-message {
    text-align: center;
    color: var(--color-error);
    font-weight: 600;
    padding: 15px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* position:relative necesario para badges absolutos en availability.php */
.suggestion-item {
    padding: 16px 14px;
    background: var(--color-fondo-pagina);
    border: 2px solid var(--color-borde-medio);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    min-width: 140px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    position: relative;
}

.suggestion-item.top-1 {
    border: 3px solid #ff6b6b;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);
}

.suggestion-item.top-2 {
    border: 2.5px solid #ffd700;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.2);
}

.suggestion-item.top-3 {
    border: 2px solid #9b59b6;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.15);
}

.suggestion-item:hover {
    border-color: var(--color-primario);
    background: var(--color-fondo-tarjeta);
    transform: translateY(-2px);
}

.suggestion-item.top-1:hover,
.suggestion-item.top-2:hover,
.suggestion-item.top-3:hover {
    transform: translateY(-4px);
}

.suggestion-item.selected {
    background: var(--color-primario);
    color: white;
    border-color: var(--color-primario);
}

.username-display {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-texto-principal);
    margin-bottom: 4px;
    overflow-wrap: break-word;
    hyphens: none;
}

.suggestion-item.selected .username-display {
    color: white;
}

.username-translation {
    font-size: 12px;
    color: var(--color-texto-secundario);
    font-style: italic;
    margin-bottom: 8px;
}

.suggestion-item.selected .username-translation {
    color: rgba(255, 255, 255, 0.85);
}

.platform-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 11px;
    margin-top: 8px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-icon {
    font-size: 16px;
    display: inline-block;
    font-weight: var(--peso-bold);
    animation: fadeInScale 0.6s ease-out forwards;
}

.status-icon.checking {
    color: var(--color-advertencia);
    filter: drop-shadow(0 0 3px rgba(255, 193, 7, 0.5));
    animation: fadeInScale 0.4s ease-out forwards, rotate 1.5s linear infinite;
}

.status-icon.available {
    color: var(--color-exito);
    filter: drop-shadow(0 0 4px rgba(40, 167, 69, 0.6));
    animation: fadeInScale 0.6s ease-out forwards, pulseGreen 2s 0.6s ease-in-out infinite;
}

.status-icon.unavailable {
    color: var(--color-error);
    filter: drop-shadow(0 0 3px rgba(220, 53, 69, 0.4));
    animation: fadeInScale 0.6s ease-out forwards, glowRed 2s 0.6s ease-in-out infinite;
}

@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseGreen {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes glowRed {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

.suggestion-item.selected .status-item {
    color: rgba(255, 255, 255, 0.9);
}

.suggestion-item.selected .status-icon.available {
    color: #90ee90;
    filter: drop-shadow(0 0 6px rgba(144, 238, 144, 0.8));
}

.suggestion-item.selected .status-icon.unavailable {
    color: #ffcccb;
    filter: drop-shadow(0 0 5px rgba(255, 204, 203, 0.7));
}

.platform-name {
    font-size: 10px;
    opacity: 0.8;
}

.username-score {
    font-size: 11px;
    color: var(--color-texto-secundario);
    margin-top: 6px;
    font-weight: 500;
}

.suggestion-item.selected .username-score {
    color: rgba(255, 255, 255, 0.9);
}

.score-stars {
    color: var(--color-advertencia);
    margin-right: 4px;
}

.recommended-badge {
    display: block;
    margin: 0 auto 8px;
    width: fit-content;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(238, 90, 111, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

.excellent-badge {
    display: block;
    margin: 0 auto 8px;
    width: fit-content;
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: var(--color-texto-principal);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

.verygood-badge {
    display: block;
    margin: 0 auto 8px;
    width: fit-content;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

.normalita-badge {
    display: block;
    margin: 0 auto 8px;
    width: fit-content;
    background: var(--color-texto-muted);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(108, 117, 125, 0.3);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.spinner {
    border: 3px solid var(--color-fondo-pagina);
    border-top: 3px solid var(--color-primario);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    background: linear-gradient(90deg, var(--color-texto-secundario) 0%, var(--color-texto-secundario) 40%, #b388a8 50%, var(--color-texto-secundario) 60%, var(--color-texto-secundario) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 2s linear infinite;
    font-size: 16px;
    font-weight: 500;
}

@keyframes shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* CONFLICT: .info-box tiene valores distintos en cada archivo.
   step1: gradient verde con text-align:center.
   step2 (registro): fondo gris — scoped en .results-section.
   step3 (registro): border-left azul — scoped en .continue-form.
   step2 (verif): sin conflicto relevante. */
.info-box {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border: 2px solid #4caf50;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
    text-align: center;
}

.info-box h3 {
    color: #2e7d32;
    margin: 0 0 10px 0;
    font-size: 16px;
}

.info-box p {
    color: #2e7d32;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.footer-links {
    text-align: center;
    margin-top: 25px;
    color: var(--color-texto-secundario);
    font-size: 14px;
}

.footer-links a {
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 500;
}

.footer-links a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .register-card {
        padding: 20px 16px;
    }

    .header {
        margin-bottom: 20px;
    }

    .header h1 {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .header p {
        font-size: 14px;
    }

    .info-box {
        padding: 12px 16px;
        margin-bottom: 16px;
    }

    .info-box p {
        font-size: 13px;
    }

    .suggestions-grid {
        gap: 10px;
        margin-bottom: 20px;
    }

    .suggestion-item {
        padding: 12px 8px;
        border-radius: 10px;
    }

    .username-display {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .username-translation {
        font-size: 10px;
        margin-bottom: 6px;
        line-height: 1.2;
    }

    .platform-status {
        gap: 8px;
        font-size: 10px;
        margin-top: 6px;
    }

    .status-icon {
        font-size: 14px;
    }

    .platform-name {
        font-size: 9px;
    }

    .username-score {
        font-size: 10px;
        margin-top: 5px;
    }

    .recommended-badge,
    .excellent-badge,
    .verygood-badge,
    .normalita-badge {
        padding: 3px 8px;
        border-radius: 10px;
        font-size: 9px;
        margin-bottom: 6px;
    }

    .suggestions h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .custom-username-section {
        margin-top: 25px;
        padding-top: 25px;
    }

    .divider {
        margin-bottom: 20px;
    }

    .divider span {
        font-size: 13px;
        padding: 0 12px;
    }

    .custom-label {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .custom-input {
        padding: 12px 16px;
        font-size: 15px;
    }

    .validation-hints {
        gap: 8px;
        margin: 10px 0;
        flex-direction: column;
        align-items: center;
    }

    .hint {
        font-size: 11px;
    }

    .btn-verify {
        padding: 12px;
        font-size: 14px;
        margin-top: 12px;
    }

    .custom-result-card {
        padding: 16px;
    }

    .custom-result-header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }

    .username-display-large {
        font-size: 20px;
    }

    .username-score-large {
        font-size: 13px;
    }

    .available-badge,
    .unavailable-badge {
        padding: 6px 14px;
        font-size: 12px;
    }

    .platform-status-large {
        gap: 12px;
        padding: 12px;
    }

    .btn-select-custom {
        padding: 12px;
        font-size: 14px;
    }

    .footer-links {
        margin-top: 20px;
        font-size: 13px;
    }

    .footer-links a {
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .suggestions-grid {
        gap: 8px;
    }

    .suggestion-item {
        padding: 10px 6px;
    }

    .username-display {
        font-size: 12px;
    }

    .header h1 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .register-card {
        padding: 20px;
    }
}

/* ==========================================
   auth: register/availability.php
   ========================================== */

/* CONFLICT: body global tiene background-color:#fce4ec; availability necesita gradient.
   Sin body class específica no es posible scopear sin regresión en otras páginas auth.
   FIXME: agregar body.page-availability para aislar. Se omite migración global de body. */

.container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

.card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* CONFLICT: en step1 los badges son display:block centrados; en availability flotan absolute sobre la card */
.card .recommended-badge,
.card .excellent-badge,
.card .verygood-badge,
.card .normalita-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    display: block;
    margin: 0;
    width: auto;
}

/* CONFLICT: .info-box global (step1) tiene padding:14px 20px y text-align:center;
   en availability tiene padding:20px y sin text-align */
.card .info-box {
    padding: 20px;
    margin-bottom: 25px;
    text-align: left;
}

.card .info-box p {
    color: #555;
    font-weight: var(--peso-normal);
}

@media (max-width: 576px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .card {
        padding: 25px;
    }

    .header h1 {
        font-size: 24px;
    }

    .card .custom-result-header {
        flex-direction: column;
        gap: 10px;
    }

    .platform-status-large {
        gap: 15px;
    }

    .validation-hints {
        gap: 10px;
    }
}

/* ==========================================
   auth: register/step2.php
   ========================================== */

.subtitle {
    text-align: center;
    color: var(--color-texto-secundario);
    margin-bottom: 30px;
    font-size: 14px;
}

.username-badge {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border: 2px solid #4CAF50;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
}

.username-badge h3 {
    margin: 0 0 8px 0;
    color: #2e7d32;
    font-size: 18px;
}

.username-badge p {
    margin: 0;
    color: #1b5e20;
    font-size: 14px;
}

.tips-box {
    background: #e7f3ff;
    border-left: 4px solid #2196F3;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

.tips-box h3 {
    color: #1976D2;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tips-box ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.tips-box li {
    margin: 8px 0;
    color: var(--color-texto-principal);
}

.upload-section {
    margin: 30px 0;
}

.file-input-wrapper {
    position: relative;
    margin: 30px 0;
}

.file-input-label {
    display: block;
    padding: 50px 30px;
    border: 3px dashed var(--color-primario-claro);
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--color-fondo-pagina) 0%, #fff5f8 100%);
    position: relative;
}

.file-input-label:hover {
    border-color: var(--color-primario);
    background: linear-gradient(135deg, #fff5f8 0%, #ffe6f0 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(136, 42, 87, 0.15);
}

.file-input-label.has-file {
    border-color: #4CAF50;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.file-input {
    display: none;
}

.id-card-visual {
    max-width: 280px;
    margin: 0 auto 20px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.file-input-label:hover .id-card-visual {
    transform: scale(1.05);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 15px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.file-name {
    font-size: 13px;
    color: var(--color-texto-sutil);
}

.submit-button {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--color-primario-claro), var(--color-primario));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.submit-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 111, 146, 0.3);
}

.submit-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.document-preview-container {
    display: none;
    margin-top: 30px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    animation: fadeInUp 0.5s;
}

.document-preview-container.show {
    display: block;
}

.document-preview-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

/* REGISTER-STEP2.E2: bloque CSS del overlay de markers eliminado.
   Las reglas que pintaban cuadros sobre la foto del documento (overlay
   absoluto + tarjetas flotantes con datos extraídos + badge de validación
   + sus animaciones popIn/drawLine/bounceIn) fueron removidas porque la
   foto ahora se muestra limpia, sin elementos superpuestos. Los datos
   viven solo en el formulario editable de abajo. */

.confetti-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    background: var(--color-primario-claro);
    animation: confettiFall 3s ease-out forwards;
    pointer-events: none;
    z-index: 10000;
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotateZ(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0; }
}

.results-section {
    display: none;
    margin-top: 30px;
    animation: fadeInUp 0.5s;
}

.results-section.show {
    display: block;
}

/* CONFLICT: step1 tiene @keyframes fadeIn con translateY(-10px) (desde arriba).
   step2 usa translateY(+10px) (desde abajo). Se renombra a fadeInUp para evitar conflicto. */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* CONFLICT: .alert en verificación usa border:1px solid transparent.
   Scoped bajo .register-card para el contexto de subida de documento (step2 registro). */
.register-card .alert {
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
    border-left: 4px solid;
}

.register-card .alert-success {
    background: var(--color-exito-fondo);
    border-color: #4CAF50;
    color: var(--color-exito-texto);
}

.register-card .alert-error {
    background: var(--color-error-fondo);
    border-color: #f44336;
    color: var(--color-primario-oscuro);
}

.register-card .alert-warning {
    background: var(--color-advertencia-fondo);
    border-color: #ff9800;
    color: var(--color-advertencia-texto);
}

.register-card .alert-info {
    background: var(--color-info-fondo);
    border-color: var(--color-info);
    color: var(--color-info-texto);
}

/* CONFLICT: .info-box global es verde; en el bloque de resultados OCR se necesita gris neutro */
.results-section .info-box {
    background: var(--color-fondo-pagina);
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
    border: none;
    text-align: left;
}

.results-section .info-box h3 {
    margin-top: 0;
    color: #555;
    font-size: 16px;
    margin-bottom: 15px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-borde-sutil);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: var(--color-texto-secundario);
}

.info-value {
    color: var(--color-texto-principal);
    text-align: right;
}

.user-exists-box {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    padding: 30px;
    border-radius: 12px;
    margin: 20px 0;
    border: 2px solid #ff9800;
}

.user-exists-box h3 {
    color: #e65100;
    margin-top: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-exists-box p {
    color: #5d4037;
    margin: 15px 0;
    line-height: 1.6;
}

/* step2 usa flex:1 para botones dentro de .user-exists-box */
.user-exists-box .btn {
    flex: 1;
    display: block;
    box-sizing: border-box;
}

/* Espejo verde de .user-exists-box para Rama 3 de displayResults en verificación: userMatch=true (PROCEDER). */
.user-found-box {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    padding: 30px;
    border-radius: 12px;
    margin: 20px 0;
    border: 2px solid #2e7d32;
}

.user-found-box h3 {
    color: #1b5e20;
    margin-top: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-found-box p {
    color: #2e7d32;
    margin: 15px 0;
    line-height: 1.6;
}

.user-found-data {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(46, 125, 50, 0.2);
}

.user-found-data p {
    margin: 8px 0;
    font-size: 15px;
}

.register-card .btn-secondary {
    background: white;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
}

.register-card .btn-secondary:hover {
    background: var(--color-fondo-pagina);
}

.back-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

.continue-form {
    margin-top: 30px;
}

/* CONFLICT: .form-group global tiene margin-bottom:20px; step2/step3 usan margin:20px 0 (con top).
   Scoped bajo .register-card para no afectar formulario de login. */
.register-card .form-group {
    margin: 20px 0;
}

/* CONFLICT: .form-group label global tiene color:#882A57 font-weight:500.
   step2/step3 registro usan color:#333 font-weight:600. Scoped bajo .register-card. */
.register-card .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-texto-principal);
}

.form-group input:read-only {
    background-color: var(--color-borde-medio);
    cursor: not-allowed;
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: var(--color-texto-secundario);
    font-size: 12px;
}

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.loading-overlay.show {
    display: flex;
}

.loading-content {
    background: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
}

.loading-spinner {
    border: 4px solid var(--color-fondo-pagina);
    border-top: 4px solid var(--color-primario);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* CONFLICT: .loading-text global tiene animación shimmer; aquí es texto simple para overlay de carga */
.loading-content .loading-text {
    color: var(--color-texto-principal);
    font-size: 18px;
    font-weight: 600;
    background: none;
    -webkit-text-fill-color: var(--color-texto-principal);
    animation: none;
}

/* ==========================================
   auth: register/step3.php
   ========================================== */

/* CONFLICT: .info-box global es verde con gradient; step3 registro usa border-left azul verde.
   Scoped bajo .continue-form para aislar del contexto de selección de usernames. */
.continue-form .info-box {
    background: #e8f5e9;
    border: none;
    border-left: 4px solid #4CAF50;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px;
    text-align: left;
}

.continue-form .info-box h3 {
    margin: 0 0 12px 0;
    color: #2e7d32;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* CONFLICT: .info-row global (step2) tiene padding:10px 0 con border-bottom; step3 usa padding:8px 0 */
.continue-form .info-row {
    padding: 8px 0;
    border-bottom: none;
}

.continue-form .info-label {
    font-weight: 600;
    color: #555;
}

.continue-form .info-value {
    color: var(--color-texto-principal);
}

.username-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ai-button {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--color-primario-claro), var(--color-primario));
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(238, 111, 146, 0.3);
}

/* CONFLICT: .btn-submit global tiene gradient rosa/vino; step3 registro usa verde (#4CAF50).
   Scoped bajo .continue-form para no afectar el .btn-submit del login. */
.continue-form .btn-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.continue-form .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

/* CONFLICT: .alert en registros (step2) tiene border-left; step3 no.
   Se define aquí sin border. El .register-card .alert (step2) queda scoped. */
.alert {
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
}

.alert-error {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
}

.custom-select {
    position: relative;
    width: 110px;
}

.select-display {
    padding: 14px 12px;
    border: 1px solid var(--color-primario-claro);
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--fuente-base);
    background-color: var(--color-fondo-pagina);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.select-display:hover {
    border-color: var(--color-primario-claro);
}

.selected-option {
    display: flex;
    align-items: center;
}

.selected-option img {
    width: 20px;
    height: auto;
    margin-right: 8px;
}

.dropdown-arrow {
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.select-display.open .dropdown-arrow {
    transform: rotate(180deg);
}

.select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background: white;
    border: 1px solid var(--color-primario-claro);
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.option {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--color-fondo-pagina);
}

.option:hover {
    background-color: var(--color-fondo-pagina);
}

.option img {
    width: 20px;
    height: auto;
    margin-right: 8px;
}

/* ==========================================
   auth: verification/document/step3.php
   ========================================== */

.countdown-container {
    background: linear-gradient(135deg, #e91e63, #ff4081);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.3);
}

.countdown-title {
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.time-unit {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    min-width: 100px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.time-unit:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.time-value {
    font-size: 42px;
    font-weight: 700;
    color: white;
    display: block;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-family: var(--fuente-mono);
}

.time-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
    display: block;
    font-weight: 500;
}

/* @keyframes pulse ya definido en step1 — se reutiliza */

.countdown-timer.warning .time-unit {
    animation: pulse 2s infinite;
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
}

.countdown-timer.danger .time-unit {
    animation: pulse 1s infinite;
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.5);
}

/* CONFLICT: .alert-info en step2 verificación usa #d1ecf1; step3 usa #e7f3ff (azul más claro).
   Se define aquí bajo .login-container para verificación. step3 queda con la versión de step2. */

.approval-status {
    background: var(--color-fondo-pagina);
    border: 2px solid var(--color-borde-sutil);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

/* CONFLICT: .status-icon global (step1) tiene font-size:16px para iconos de plataforma.
   step3 usa .status-icon con font-size:48px para el emoji de estado de aprobación.
   Scoped bajo .approval-status para evitar el conflicto. */
.approval-status .status-icon {
    font-size: 48px;
    margin-bottom: 10px;
    animation: none;
    font-weight: var(--peso-normal);
    display: block;
    filter: none;
}

.status-text {
    font-size: 18px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}

.status-subtext {
    font-size: 14px;
    color: var(--color-texto-muted);
}

.btn-refresh {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin: 10px 5px;
}

.btn-refresh:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(136, 42, 87, 0.4);
}

/* CONFLICT: .btn-secondary en step1 es gradient rosa; en step3/step2 verificación es gris.
   Scoped bajo .login-container para las páginas de verificación del documento. */
.login-container .btn-secondary {
    background: var(--color-texto-muted);
    color: white;
}

.login-container .btn-secondary:hover {
    background: #5a6268;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.expired-message {
    background: var(--color-advertencia-fondo);
    border: 2px solid var(--color-advertencia);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin: 20px 0;
}

.expired-message .icon {
    font-size: 64px;
    margin-bottom: 15px;
}

.expired-message h3 {
    color: var(--color-advertencia-texto);
    margin-bottom: 10px;
}

.expired-message p {
    color: var(--color-advertencia-texto);
}

@media (max-width: 600px) {
    .countdown-timer {
        gap: 10px;
    }

    .time-unit {
        min-width: 80px;
        padding: 15px 10px;
    }

    .time-value {
        font-size: 32px;
    }

    .time-label {
        font-size: 10px;
    }
}

/* ==========================================
   auth: verification/document/step2.php
   ========================================== */

/* CONFLICT: .form-group label global tiene color:#882A57 font-weight:500.
   Verificación usa color:#495057 font-weight:600. Scoped bajo .login-container. */
.login-container .form-group label {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--color-borde-sutil);
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primario-claro);
    box-shadow: 0 0 0 3px rgba(238, 111, 146, 0.1);
}

/* CONFLICT: small es elemento HTML genérico; scoped bajo .login-container */
.login-container small {
    display: block;
    color: var(--color-texto-muted);
    font-size: 12px;
    margin-top: 5px;
}

/* CONFLICT: .btn global tiene width:100%; verificación agrega max-width:100% y margin:20px auto.
   Scoped bajo .login-container para las páginas de verificación. */
.login-container .btn {
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    width: 100%;
    max-width: 100%;
    margin: 20px auto 0;
    text-align: center;
}

/* CONFLICT: .btn-primary global tiene gradient(#ee6f92,#8b5a83).
   Verificación usa gradient(#882A57,#d63384). Scoped bajo .login-container. */
.login-container .btn-primary {
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-claro) 100%);
    color: white;
}

.login-container .btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primario-oscuro) 0%, var(--color-primario-claro) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(136, 42, 87, 0.4);
}

/* CONFLICT: .alert en step2 registro tiene border-left:4px; verificación usa border:1px solid transparent */
.login-container .alert {
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    border: 1px solid transparent;
}

.login-container .alert-success {
    background-color: var(--color-exito-fondo);
    border-color: var(--color-exito-borde);
    color: var(--color-exito-texto);
}

.login-container .alert-danger {
    background-color: var(--color-error-fondo);
    border-color: var(--color-error-borde);
    color: var(--color-primario-oscuro);
}

.login-container .alert-info {
    background-color: var(--color-info-fondo);
    border-color: var(--color-info-borde);
    color: var(--color-info-texto);
}

#submitBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed !important;
}

#submitBtn:disabled:hover {
    transform: none !important;
    box-shadow: 0 4px 10px rgba(136, 42, 87, 0.2) !important;
}

/* @keyframes spin ya definido en step1 — se reutiliza */

/* ==========================================
   auth: verification/document/step1.php
   ========================================== */

#idPreviewFront {
    max-height: 200px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    border: 2px solid var(--color-borde-sutil);
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.d-none {
    display: none !important;
}

/* .form-control, .login-container .btn-primary, .login-container .alert-info ya definidos en step2 */

.login-container .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primario-oscuro) 0%, var(--color-primario-claro) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(136, 42, 87, 0.4);
}

.login-container .btn-primary:disabled {
    background: var(--color-texto-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 25px;
}

.spinner-border {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
    margin-right: 8px;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* ==========================================
   auth: verification/document/step2.php
   ========================================== */

/* .alert, .alert-success, .alert-danger, .login-container .btn, .btn-primary
   ya definidos en step2 verificación — se omiten */

/* CONFLICT: .alert-warning no definida aún bajo .login-container */
.login-container .alert-warning {
    background-color: var(--color-advertencia-fondo);
    border-color: #ffeaa7;
    color: var(--color-advertencia-texto);
}

/* .btn-secondary gris bajo .login-container ya definido en step3 — se omite */

/* details, summary, pre — elementos HTML genéricos; scoped bajo .login-container */
.login-container details {
    margin-top: 15px;
    border: 1px solid var(--color-borde-sutil);
    border-radius: 8px;
    padding: 10px;
}

.login-container summary {
    cursor: pointer;
    color: var(--color-primario);
    font-weight: 600;
    padding: 5px;
}

.login-container pre {
    background: var(--color-fondo-pagina);
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 10px;
}

/* ============================================
   Auth Space - Estados loading para botones submit
   Usado por: views/auth/password/request.php, views/auth/password/reset.php
   Pattern: dual span buttonText/buttonLoader + .is-loading + .btn-pulse + .btn-spinner
   Nombres prefijados para no colisionar con .spinner/.loading-spinner/@keyframes pulse
   preexistentes en este archivo (consumidos por register/step3.php y countdown SMS).
   ============================================ */

.btn-loading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: btnSpin 1s linear infinite;
}

@keyframes btnSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-submit.is-loading {
    background: linear-gradient(-45deg, #882A57, #9d3461, #882A57, #9d3461);
    background-size: 400% 400%;
    animation: btnGradientShift 2s ease infinite;
}

@keyframes btnGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-submit.btn-pulse {
    animation: btnPulse 0.6s;
}

@keyframes btnPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================
   Auth Space - Patrón progressive button
   Botón inteligente con etapas reales del backend, barra calibrada
   y cierre emocional. Reemplaza el patrón is-loading + btn-pulse simple.
   Usado por: views/auth/password/request.php, views/auth/password/reset.php
   ============================================ */

.btn-progressive {
    width: 100%;
    padding: 18px 16px;
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-claro) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--fuente-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(136, 42, 87, 0.3);
    position: relative;
    overflow: hidden;
    min-height: 56px;
}

.btn-progressive:hover:not(.is-progressing):not(.is-success):not(:disabled) {
    background: linear-gradient(135deg, var(--color-primario-oscuro) 0%, var(--color-primario-claro) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(136, 42, 87, 0.4);
}

.btn-progressive:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Estado idle: solo muestra btn-progressive__idle, oculta __progress y __success */
.btn-progressive__idle,
.btn-progressive__progress,
.btn-progressive__success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s ease;
}

.btn-progressive__progress,
.btn-progressive__success {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.btn-progressive.is-progressing .btn-progressive__idle { display: none; }
.btn-progressive.is-progressing .btn-progressive__progress { display: flex; }
.btn-progressive.is-progressing { cursor: wait; }

.btn-progressive.is-success .btn-progressive__idle,
.btn-progressive.is-success .btn-progressive__progress { display: none; }
.btn-progressive.is-success .btn-progressive__success { display: flex; }
.btn-progressive.is-success {
    background: linear-gradient(135deg, #2d8659 0%, #4ba373 100%);
    cursor: default;
}

.btn-progressive__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
}

.btn-progressive__stage-icon {
    font-size: 18px;
    display: inline-block;
    animation: progressiveStageIconPulse 1.2s ease-in-out infinite;
}

@keyframes progressiveStageIconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}

.btn-progressive__bar-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
}

.btn-progressive__bar-fill {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

.btn-progressive.is-progressing.is-stalled .btn-progressive__bar-fill {
    animation: progressiveStalledPulse 1.5s ease-in-out infinite;
}

@keyframes progressiveStalledPulse {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 0.6; }
}

.btn-progressive__success-icon {
    font-size: 22px;
}

.btn-progressive__success-msg {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.95;
    line-height: 1.3;
    text-align: center;
}

/* ==========================================
   F5.9.B / F5.13.B / S39 Fase G — Chips de credenciales faltantes
   Compartido cross-plataforma (Stripchat .vs-* + Chaturbate .vc-*).
   Migrado desde inline de ventasStripchat.php L327-451 (decisión D-G.3
   Opción 1: doble selector). Cierra parcialmente TODO migración CSS inline
   de Chaturbate (commit cf8a25f).
   ========================================== */

.vs-cred-badge--match,
.vc-cred-badge--match {
    background-color: #198754;
    color: var(--color-fondo-tarjeta);
}

.vs-cred-badge--missing,
.vc-cred-badge--missing {
    background-color: var(--color-error);
    color: var(--color-fondo-tarjeta);
}

/* F5.9.B - Chips de credenciales faltantes con boton "Crear" inline */
.vs-cred-chips-container,
.vc-cred-chips-container {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vs-cred-chip,
.vc-cred-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(220, 53, 69, 0.08);
    border-radius: 0.375rem;
}
.vs-cred-chip__btn-crear,
.vc-cred-chip__btn-crear {
    border: none;
    background-color: var(--color-texto-muted);
    color: var(--color-fondo-tarjeta);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
}
.vs-cred-chip__btn-crear:hover,
.vc-cred-chip__btn-crear:hover {
    background-color: #5a6268;
}
.vs-cred-chip__btn-crear:disabled,
.vc-cred-chip__btn-crear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* F5.13.B - Chip amarillo "Transferir desde X" para missing que existen en otra cuenta master */
.vs-cred-badge--transferable,
.vc-cred-badge--transferable {
    background-color: var(--color-advertencia);
    color: #212529;
}
.vs-cred-chip__btn-transferir,
.vc-cred-chip__btn-transferir {
    border: none;
    background-color: var(--color-advertencia);
    color: #212529;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}
.vs-cred-chip__btn-transferir:hover,
.vc-cred-chip__btn-transferir:hover {
    background-color: #e0a800;
}
.vs-cred-chip__btn-transferir:disabled,
.vs-cred-chip__btn-transferir.disabled,
.vc-cred-chip__btn-transferir:disabled,
.vc-cred-chip__btn-transferir.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.vs-cred-badge--transferable-disabled,
.vc-cred-badge--transferable-disabled {
    background-color: var(--color-advertencia);
    color: var(--color-texto-muted);
    opacity: 0.6;
}

/* F5.3.5.A - Detalle del error PARSE_ERROR/etc renderizado con prominencia */
.vs-error-detail,
.vc-error-detail {
    background: var(--color-fondo-tarjeta);
    border-left: 4px solid var(--color-texto-muted);
    padding: 12px 16px;
    margin-top: 12px;
    font-size: 1rem;
    color: #212529;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}

/* F5.9.B B.3 - Dropdown de autocomplete dentro del modal SweetAlert */
.vs-autocomplete-dropdown,
.vc-autocomplete-dropdown {
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-fondo-tarjeta);
    margin-top: -1px;
}
.vs-autocomplete-item,
.vc-autocomplete-item {
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--color-fondo-pagina);
}
.vs-autocomplete-item:last-child,
.vc-autocomplete-item:last-child {
    border-bottom: none;
}
.vs-autocomplete-item:hover,
.vc-autocomplete-item:hover {
    background-color: var(--color-borde-medio);
}
.vs-autocomplete-empty,
.vc-autocomplete-empty {
    padding: 0.5rem;
    color: var(--color-texto-muted);
    font-size: 0.875rem;
    text-align: center;
}

.vs-error-banner,
.vc-error-banner {
    padding: 14px 18px;
    border-radius: 8px;
    background-color: var(--color-error-fondo);
    border: 1px solid var(--color-error-borde);
    color: var(--color-primario-oscuro);
    margin-top: 12px;
}

.vs-error-banner small,
.vc-error-banner small {
    color: #842029;
    opacity: 0.85;
}

/* ==========================================
   S39 Fase H.B — CSS residual Chaturbate migrado desde inline de
   views/ventas/ventasChaturbate.php (L276-342). Cierra parcialmente
   el TODO de migración CSS inline (TODOs.md L168-185, S38 cf8a25f).
   Sin equivalente Stripchat en styles.css (Stripchat también vive
   inline) — reglas autónomas .vc-* sin doble selector.
   ========================================== */

.vc-textarea-paste {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    background: var(--color-fondo-pagina);
    border: 1px solid #ced4da;
    resize: vertical;
}
.vc-textarea-paste:focus {
    background: var(--color-fondo-tarjeta);
    border-color: #FFD74F;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 79, 0.25);
}

.vc-warn-banner  { padding: 12px; border-radius: 6px; background: var(--color-advertencia-fondo); color: var(--color-advertencia-texto); border: 1px solid #ffeaa7; margin-top: 12px; }

.vc-page-logo {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    vertical-align: middle;
}

/* Sub-fase C (Sesion 38) — Boton de cierre quincenal en el strip del calendario.
   3 estados: rojo (incompleto, disabled), amarillo (listo para cerrar), verde (cerrado).
   S40 Sprint 8 — paritarias .vs-/.vc- consolidadas en doble selector (TODO #19). */
.vs-cal-cierre-btn,
.vc-cal-cierre-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    margin-left: 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    transition: filter 0.15s;
    vertical-align: middle;
}
.vs-cal-cierre-btn--rojo,
.vc-cal-cierre-btn--rojo {
    background: #dc3545;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.65;
}
.vs-cal-cierre-btn--amarillo,
.vc-cal-cierre-btn--amarillo {
    background: #ffc107;
    color: #1a1a1a;
    cursor: pointer;
}
.vs-cal-cierre-btn--amarillo:hover,
.vc-cal-cierre-btn--amarillo:hover { filter: brightness(0.92); }
.vs-cal-cierre-btn--verde,
.vc-cal-cierre-btn--verde {
    background: #28a745;
    color: #ffffff;
    cursor: pointer;
}
.vs-cal-cierre-btn--verde:hover,
.vc-cal-cierre-btn--verde:hover { filter: brightness(0.92); }

/* ==========================================
   VENTAS CHATURBATE + STRIPCHAT
   Migrado de inline S40 Sprint 8 (cierre TODO #19)
   ==========================================
   Origen Chaturbate: views/ventas/ventasChaturbate.php L180-L305 (eliminado).
   Origen Stripchat:  views/ventas/ventasStripchat.php  L244-L547 (eliminado).
   Reglas paritarias agrupadas con doble selector .vs-X, .vc-X.
   Variables :root ya definidas arriba en este archivo.
   ========================================== */

/* ---- Cards base ---- */
.vs-card,
.vc-card {
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde-medio);
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* card__title DIFIERE: Stripchat usa primario oscuro, Chaturbate usa amarillo #FFD74F. */
.vs-card__title {
    font-size: 1.05rem;
    font-weight: var(--peso-bold);
    color: var(--color-texto-principal);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primario-oscuro);
}
.vc-card__title {
    font-size: 1.05rem;
    font-weight: var(--peso-bold);
    color: var(--color-texto-principal);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #FFD74F;
}

/* ---- KPI cards Chaturbate (4 horizontales con dot de salud) ---- */
.vc-kpi-card {
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde-medio);
    border-radius: 10px;
    padding: 14px 16px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: relative;
}
.vc-kpi-card__titulo {
    font-size: 0.7rem;
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primario-oscuro);
    margin-bottom: 6px;
}
.vc-kpi-card__valor {
    font-size: 1.4rem;
    font-weight: var(--peso-bold);
    color: #212529;
    line-height: 1.1;
}
.vc-kpi-card__hint {
    font-size: 0.78rem;
    color: var(--color-texto-muted);
    margin-top: 4px;
}
.vc-kpi-card__dot {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-fondo-tarjeta);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.vc-kpi-card__dot--verde    { background: var(--color-exito); }
.vc-kpi-card__dot--amarillo { background: var(--color-advertencia); }
.vc-kpi-card__dot--rojo     { background: var(--color-error); }

/* ---- Ctx cards Stripchat (Zona 2 cards de salud heredan estos estilos base) ---- */
.vs-ctx-card {
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde-medio);
    border-radius: 10px;
    padding: 16px 18px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.vs-ctx-titulo {
    font-size: 0.72rem;
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primario-oscuro);
    margin-bottom: 8px;
}

/* ---- Form / paste Stripchat ---- */
.vs-form-group {
    margin-bottom: 1rem;
}
.vs-textarea-paste {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    background: var(--color-fondo-pagina);
    border: 1px solid #ced4da;
    resize: vertical;
}
.vs-textarea-paste:focus {
    background: var(--color-fondo-tarjeta);
    border-color: var(--color-primario-oscuro);
    box-shadow: 0 0 0 0.2rem rgba(106, 27, 27, 0.15);
}
.vs-preview-table {
    font-size: 0.9rem;
}
.vs-preview-table thead th {
    background: linear-gradient(135deg, var(--color-primario-oscuro) 0%, var(--color-primario) 100%);
    color: var(--color-fondo-tarjeta);
    font-weight: 600;
    border: none;
}
.vs-preview-table tfoot td {
    background: linear-gradient(135deg, var(--color-primario-oscuro) 0%, var(--color-primario) 100%);
    color: var(--color-fondo-tarjeta);
    font-weight: var(--peso-bold);
    border: none;
}
.vs-detectadas-section {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--color-advertencia-fondo);
    border: 1px solid var(--color-advertencia-pastel);
    border-radius: 8px;
    color: #664d03;
}

/* ---- Progress bar Stripchat ---- */
.btn-progressive__bar {
    display: inline-block;
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin-left: 8px;
    overflow: hidden;
    vertical-align: middle;
}
.btn-progressive__bar-fill {
    display: block;
    width: 30%;
    height: 100%;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    animation: vs-progress 1.4s ease-in-out infinite;
}
@keyframes vs-progress {
    0%   { width: 0%;   margin-left: 0%; }
    50%  { width: 60%;  margin-left: 20%; }
    100% { width: 0%;   margin-left: 100%; }
}

/* ---- Zona 2 cards de salud Stripchat ---- */
.vs-salud-card { position: relative; }
.vs-salud-indicador {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.vs-salud-indicador.verde    { background: var(--color-exito); }
.vs-salud-indicador.amarillo { background: var(--color-advertencia); }
.vs-salud-indicador.rojo     { background: var(--color-error); }
.vs-salud-indicador.gris     { background: var(--color-texto-muted); }
.vs-salud-metrica-grande {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}
.vs-salud-metrica-secundaria {
    font-size: 0.85rem;
    color: var(--color-texto-muted);
}

/* ---- Calendario quincenal — base paritaria .vs-/.vc- ---- */
.vs-cal-card,
.vc-cal-card {
    border-radius: 0.375rem;
    background: var(--color-fondo-pagina);
    padding: 1rem;
    border: 1px solid var(--color-borde-sutil);
}
.vs-cal-titulo,
.vc-cal-titulo {
    font-size: 0.85rem;
    color: var(--color-texto-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}
.vs-cal-subtitulo,
.vc-cal-subtitulo {
    font-size: 0.85rem;
    color: var(--color-texto-muted);
    margin-bottom: 0.75rem;
}
.vs-cal-strip,
.vc-cal-strip {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.vs-cal-dia,
.vc-cal-dia {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: default;
    transition: transform 0.1s;
    position: relative;
}
.vs-cal-dia:hover,
.vc-cal-dia:hover { transform: scale(1.1); }

/* Modifiers paritarios (body idéntico, naming idéntico) */
.vs-cal-dia--pendiente,
.vc-cal-dia--pendiente { background: var(--color-error); color: var(--color-fondo-tarjeta); cursor: pointer; }
.vs-cal-dia--hoy_pendiente,
.vc-cal-dia--hoy_pendiente { background: var(--color-borde-medio); color: #212529; border: 2px solid var(--color-primario-oscuro); cursor: pointer; }
.vs-cal-dia--futuro,
.vc-cal-dia--futuro { background: var(--color-fondo-tarjeta); color: var(--color-texto-muted); border: 1px solid var(--color-borde-medio); cursor: not-allowed; }

/* Modifiers solo-Stripchat (naming sin _con_ventas) */
.vs-cal-dia--importado     { background: var(--color-exito); color: var(--color-fondo-tarjeta); }
.vs-cal-dia--hoy_importado { background: var(--color-exito); color: var(--color-fondo-tarjeta); border: 2px solid var(--color-primario-oscuro); }
.vs-cal-dia--importado_sin_ventas     { background: var(--color-cal-revisado); color: #6c5500; }
.vs-cal-dia--hoy_importado_sin_ventas { background: var(--color-cal-revisado); color: #6c5500; border: 2px solid var(--color-primario-oscuro); }

/* Modifiers solo-Chaturbate (naming explícito _con_ventas / _sin_ventas con cursor pointer) */
.vc-cal-dia--importado_con_ventas { background: var(--color-exito); color: var(--color-fondo-tarjeta); cursor: pointer; }
.vc-cal-dia--importado_sin_ventas { background: #ffe69c; color: #6c5500; cursor: pointer; }

/* ---- Keyframes pulse + clase pulse (nombres distintos por plataforma — no mergeables) ---- */
@keyframes vs-cal-dia-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(106, 27, 27, 0); }
    20%  { box-shadow: 0 0 0 6px rgba(106, 27, 27, 0.55); }
    40%  { box-shadow: 0 0 0 0   rgba(106, 27, 27, 0); }
    60%  { box-shadow: 0 0 0 6px rgba(106, 27, 27, 0.55); }
    80%  { box-shadow: 0 0 0 0   rgba(106, 27, 27, 0); }
    100% { box-shadow: 0 0 0 0   rgba(106, 27, 27, 0); }
}
.vs-cal-dia--pulse {
    animation: vs-cal-dia-pulse 1.8s ease-in-out infinite;
    z-index: 1;
}
@keyframes vc-cal-dia-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(106, 27, 27, 0); }
    20%  { box-shadow: 0 0 0 6px rgba(106, 27, 27, 0.55); }
    40%  { box-shadow: 0 0 0 0   rgba(106, 27, 27, 0); }
    60%  { box-shadow: 0 0 0 6px rgba(106, 27, 27, 0.55); }
    80%  { box-shadow: 0 0 0 0   rgba(106, 27, 27, 0); }
    100% { box-shadow: 0 0 0 0   rgba(106, 27, 27, 0); }
}
.vc-cal-dia--pulse {
    animation: vc-cal-dia-pulse 1.8s ease-in-out infinite;
    z-index: 1;
}

/* ---- Calendario icon + leyenda (paritario .vs-/.vc-) ---- */
.vs-cal-icon,
.vc-cal-icon {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.55em;
    opacity: 0.85;
    pointer-events: none;
}
.vs-cal-leyenda,
.vc-cal-leyenda {
    margin-top: 0.75rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--color-texto-muted);
}
.vs-cal-leyenda-item,
.vc-cal-leyenda-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.vs-cal-leyenda-marker,
.vc-cal-leyenda-marker {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    box-sizing: border-box;
}
/* Solo Stripchat: override del color border heredado para marker leyenda "Futuro". */
.vs-cal-leyenda-marker.vs-cal-dia--futuro {
    border-color: #6c757d;
}

/* ---- Página logo Stripchat ---- */
.vs-page-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* ---- Tooltip cobertura Card D (paritario .vs-/.vc-) ---- */
.vs-tooltip-cobertura,
.vc-tooltip-cobertura { text-align: left; max-width: 300px; }
.vs-tooltip-cobertura-header,
.vc-tooltip-cobertura-header {
    font-weight: 600; font-size: 0.85em;
    padding-bottom: 6px; margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.vs-tooltip-cobertura-seccion-titulo,
.vc-tooltip-cobertura-seccion-titulo {
    font-weight: 600; font-size: 0.75em; letter-spacing: 0.05em;
    margin-top: 8px; margin-bottom: 4px; opacity: 0.85;
}
.vs-tooltip-cobertura-item,
.vc-tooltip-cobertura-item { font-size: 0.85em; padding: 2px 0 2px 8px; line-height: 1.4; }
.vs-tooltip-cobertura-mas,
.vc-tooltip-cobertura-mas { font-style: italic; opacity: 0.75; }

/* =================================================================
   RATE-LIMIT BANNER (Voz Sobria — bloqueo por seguridad)
   Consumido por: assets/js/rate-limit-countdown.js
   Contexto: views/auth/password/request.php + reset.php (los 3 gates)
   ================================================================= */
.rate-limit-banner {
    background-color: var(--color-advertencia-fondo);
    border: 1px solid var(--color-advertencia);
    color: var(--color-advertencia-texto);
    padding: var(--espaciado-md) var(--espaciado-lg, 1rem);
    border-radius: 8px;
    margin-bottom: var(--espaciado-md);
    font-size: var(--tamano-md);
    line-height: 1.5;
    text-align: center;
}

.rate-limit-banner strong {
    font-weight: var(--peso-semibold);
    font-variant-numeric: tabular-nums;
}