/* ========================================
   SELLERVOICE ANIMATIONS & STYLES
   ======================================== */

/* Animación de pulso para el botón de grabación */
@keyframes pulse-ring {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.recording-pulse { animation: pulse-ring 2s infinite; }

/* Animaciones de transición entre páginas */
@keyframes fadeOut { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(0.95); } }
@keyframes fadeIn  { from { opacity:0; transform:scale(1.05); } to { opacity:1; transform:scale(1); } }
.page-exit { animation: fadeOut 0.3s ease-out forwards; }
.page-enter { animation: fadeIn 0.4s ease-out forwards; }

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width:6px; height:6px; }
.custom-scrollbar::-webkit-scrollbar-track { background:rgba(30,41,59,0.5); border-radius:3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:rgba(71,85,105,0.8); border-radius:3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background:rgba(100,116,139,1); }

/* ========================================
   SELLERVOICE AUDIT — CARD-BASED LAYOUT
   ======================================== */

/* Root */
.sva-root { font-family: 'Inter', sans-serif; }

/* Header */
.sva-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sva-title {
    font-size: 22px;
    font-weight: 700;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.sva-subtitle {
    font-size: 12px;
    color: #64748b;
    margin: 4px 0 0;
}
.sva-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(51,65,85,0.5);
    border: 1px solid rgba(71,85,105,0.5);
    color: #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.sva-refresh-btn:hover {
    background: rgba(71,85,105,0.6);
    color: #f1f5f9;
    border-color: rgba(99,102,241,0.4);
}

/* Cards Grid */
.sva-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Single Card */
.sva-card {
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
}
.sva-card:hover {
    border-color: rgba(99,102,241,0.2);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.sva-card-expanded {
    border-color: rgba(99,102,241,0.3);
    box-shadow: 0 8px 40px rgba(99,102,241,0.08);
}

/* Card Header */
.sva-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    transition: background 0.15s;
}
.sva-card-header:hover { background: rgba(255,255,255,0.02); }

.sva-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    letter-spacing: 1px;
}
.sva-card-info { flex: 1; min-width: 0; }
.sva-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sva-card-role {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
    text-transform: capitalize;
}
.sva-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.sva-online-dot.on { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.sva-online-dot.off { background: #475569; }

.sva-card-chevron {
    color: #475569;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.sva-card-chevron.open { transform: rotate(180deg); color: #818cf8; }

/* Card Stats */
.sva-card-stats {
    display: flex;
    padding: 0 20px 16px;
    gap: 4px;
}
.sva-mini-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: rgba(30,41,59,0.5);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
}
.sva-mini-num {
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}
.sva-mini-label {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-weight: 500;
}

/* Audio List (expanded) */
.sva-audio-list {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 600px;
    overflow-y: auto;
}
.sva-audio-list::-webkit-scrollbar { width: 5px; }
.sva-audio-list::-webkit-scrollbar-track { background: transparent; }
.sva-audio-list::-webkit-scrollbar-thumb { background: rgba(71,85,105,0.5); border-radius: 3px; }

/* Audio Item */
.sva-audio-item {
    background: rgba(30,41,59,0.4);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}
.sva-audio-item:hover { border-color: rgba(255,255,255,0.08); }
.sva-audio-open { border-color: rgba(99,102,241,0.3); background: rgba(30,41,59,0.7); }
.sva-audio-edited { border-left: 3px solid rgba(251,191,36,0.5); }

.sva-audio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.12s;
}
.sva-audio-row:hover { background: rgba(255,255,255,0.02); }

.sva-audio-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(99,102,241,0.12);
    color: #818cf8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sva-audio-edited .sva-audio-icon {
    background: rgba(251,191,36,0.12);
    color: #fbbf24;
}

.sva-audio-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.sva-audio-date {
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 500;
}
.sva-audio-dur {
    font-size: 11px;
    color: #64748b;
    font-family: 'SF Mono', 'Fira Code', monospace;
    margin-top: 1px;
}

.sva-audio-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sva-audio-badge.ocr {
    background: rgba(71,85,105,0.3);
    color: #94a3b8;
    border: 1px solid rgba(71,85,105,0.3);
}
.sva-audio-badge.edited {
    background: rgba(251,191,36,0.1);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.2);
}

.sva-audio-chevron {
    color: #475569;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.sva-audio-chevron.open { transform: rotate(180deg); color: #818cf8; }

/* Audio Detail (expanded panel inside audio item) */
.sva-audio-detail {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(15,23,42,0.4);
}

.sva-detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sva-dm {
    font-size: 11px;
    color: #64748b;
    background: rgba(30,41,59,0.6);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.04);
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.sva-dm-link {
    color: #818cf8 !important;
    text-decoration: none;
    cursor: pointer;
}
.sva-dm-link:hover { color: #a5b4fc !important; text-decoration: underline; }

/* Text Blocks (OCR, Seller, Diff) */
.sva-text-block {
    border-radius: 12px;
    overflow: hidden;
}
.sva-text-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    background: rgba(30,41,59,0.5);
}
.sva-text-sub {
    font-weight: 400;
    text-transform: none;
    color: #64748b;
    font-size: 10px;
    margin-left: 4px;
}
.sva-text-content {
    padding: 14px;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.sva-empty { color: #475569; }

/* OCR Block */
.sva-block-ocr {
    border: 1px solid rgba(99,102,241,0.15);
    border-left: 4px solid rgba(99,102,241,0.4);
}
.sva-block-ocr .sva-text-label { color: #818cf8; }
.sva-block-ocr .sva-text-content { color: #94a3b8; background: rgba(99,102,241,0.03); }

/* Seller Block */
.sva-block-seller {
    border: 1px solid rgba(16,185,129,0.15);
    border-left: 4px solid rgba(16,185,129,0.4);
}
.sva-block-seller .sva-text-label { color: #34d399; }
.sva-block-seller .sva-text-content { color: #e2e8f0; background: rgba(16,185,129,0.03); }

.sva-badge-edit {
    font-size: 9px;
    background: rgba(16,185,129,0.15);
    color: #34d399;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(16,185,129,0.2);
    margin-left: 6px;
    text-transform: none;
    font-weight: 500;
}

.sva-correction-meta {
    padding: 8px 14px;
    font-size: 11px;
    color: #64748b;
    border-top: 1px solid rgba(255,255,255,0.04);
    background: rgba(30,41,59,0.3);
}

/* Diff Block */
.sva-block-diff {
    border: 1px solid rgba(251,191,36,0.15);
    border-left: 4px solid rgba(251,191,36,0.4);
}
.sva-block-diff .sva-text-label { color: #fbbf24; }
.sva-diff-content {
    padding: 14px;
    font-size: 13px;
    line-height: 1.8;
    background: rgba(251,191,36,0.02);
}
.sva-diff-alert {
    font-size: 10px;
    color: #f59e0b;
    font-weight: 500;
    text-transform: none;
    margin-left: 6px;
}
.sva-diff-same { color: #64748b; }
.sva-diff-removed {
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
    text-decoration: line-through;
    text-decoration-color: rgba(239,68,68,0.5);
    padding: 1px 3px;
    border-radius: 3px;
}
.sva-diff-added {
    background: rgba(34,197,94,0.15);
    color: #86efac;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 500;
}

/* Utterances Details */
.sva-utt-details {
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    overflow: hidden;
}
.sva-utt-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    background: rgba(30,41,59,0.4);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    list-style: none;
    transition: background 0.15s;
}
.sva-utt-summary:hover { background: rgba(30,41,59,0.7); color: #94a3b8; }
.sva-utt-summary::-webkit-details-marker { display: none; }

.sva-utt-list {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}
.sva-utt-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    background: rgba(30,41,59,0.3);
    border: 1px solid rgba(255,255,255,0.02);
}
.sva-utt-idx {
    font-family: 'SF Mono', monospace;
    font-size: 10px;
    color: #818cf8;
    background: rgba(99,102,241,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
}
.sva-utt-time {
    font-family: 'SF Mono', monospace;
    font-size: 10px;
    color: #475569;
    flex-shrink: 0;
}
.sva-utt-lang {
    font-size: 9px;
    color: #475569;
    text-transform: uppercase;
    flex-shrink: 0;
}
.sva-utt-text {
    color: #cbd5e1;
    flex: 1;
    min-width: 0;
}

/* Loading/Msg */
.sva-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    color: #64748b;
    font-size: 14px;
    gap: 12px;
}
.sva-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(99,102,241,0.2);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .sva-card-stats { flex-wrap: wrap; }
    .sva-mini-stat { min-width: calc(50% - 4px); }
    .sva-audio-row { flex-wrap: wrap; }
    .sva-header { flex-direction: column; gap: 12px; align-items: flex-start; }
}