/**
 * UNIFIED TABS - Estilo Dashboard para todo el ecosistema Claudia
 * Version: 1.0
 * Basado en: view-tabs del Dashboard (mobile-views.css)
 */

/* Variables de tabs */
:root {
    --tab-accent: #00D4AA;
    --tab-bg: rgba(255, 255, 255, 0.05);
    --tab-inactive: rgba(255, 255, 255, 0.5);
    --tab-text-active: #0D1F3C;
    --tab-radius: 12px;
    --tab-radius-inner: 8px;
    --tab-transition: 0.2s ease;
}

/* Container de tabs */
.unified-tabs {
    display: flex;
    background: var(--tab-bg);
    border-radius: var(--tab-radius);
    padding: 4px;
    margin: 0 0 20px 0;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ocultar scrollbar */
.unified-tabs::-webkit-scrollbar { display: none; }
.unified-tabs { -ms-overflow-style: none; scrollbar-width: none; }

/* Tab individual */
.unified-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--tab-inactive);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--tab-radius-inner);
    cursor: pointer;
    transition: all var(--tab-transition);
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    white-space: nowrap;
}

.unified-tab:active { transform: scale(0.98); }
.unified-tab:hover { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.05); }

/* Tab activo - VERDE AQUA */
.unified-tab.active {
    background: var(--tab-accent);
    color: var(--tab-text-active);
    font-weight: 600;
}

/* Contenido de tabs */
.unified-tab-content { display: none; opacity: 0; transition: opacity var(--tab-transition); }
.unified-tab-content.active { display: block; opacity: 1; animation: unifiedTabFadeIn 0.2s ease-out; }

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

/* Responsive */
@media (max-width: 768px) {
    .unified-tabs { margin: 0 0 16px 0; padding: 3px; }
    .unified-tab { padding: 8px 12px; font-size: 13px; min-height: 40px; }
}

/* Accesibilidad */
.unified-tab:focus-visible { outline: 2px solid var(--tab-accent); outline-offset: 2px; }