/* =============================================================================
   RutaTurismo360 - Global Tabs Template Styles
   =============================================================================

   Estilos reutilizables para RadzenTabs y sus variantes en toda la aplicación.
   Consolida y reemplaza los bloques de tabs dispersos en global-form-template.css.

   Prefijo: rt360-tabs-* / rt360-tab-*
   Clase universal: rt360-tabs (aplica a cualquier RadzenTabs)
   Última actualización: Marzo 2026
   Versión: 1.0.0

   CHANGELOG:
   - v1.0.0: Versión inicial — consolida reservations-tabs, settings-tabs
             y agrega sistema completo de clases para tabs

   ÍNDICE:
   -------
   1.  Clase universal rt360-tabs (base)
   2.  Contenido del tab (rt360-tab-content)
   3.  Badge sobre tab (notificaciones / contadores)
   4.  Estado vacío dentro de un tab
   5.  Variante: Outline / Card style (rt360-tabs--card)
   6.  Variante: Pills (rt360-tabs--pills)
   7.  Variante: Tamaño pequeño (rt360-tabs--sm)
   8.  Dark Mode — Completo
   9.  Responsive — Solo ícono en móvil (≤576px)
   10. Compatibilidad — Alias para reservations-tabs y settings-tabs
   ============================================================================= */


/* =============================================================================
   1. CLASE UNIVERSAL rt360-tabs (base)
   Aplicar a cualquier <RadzenTabs class="rt360-tabs">
   Normaliza el aspecto visual y garantiza consistencia entre módulos.
   ============================================================================= */

/**
 * Clase base para todos los tabs de la aplicación
 * Uso: <RadzenTabs class="rt360-tabs">
 */
.rt360-tabs {
    width: 100%;
}

/* Barra de navegación de tabs */
.rt360-tabs .rz-tabview-nav {
    border-bottom: 1px solid var(--rz-border-color);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--rz-primary) transparent;
}

.rt360-tabs .rz-tabview-nav::-webkit-scrollbar {
    height: 3px;
}

.rt360-tabs .rz-tabview-nav::-webkit-scrollbar-track {
    background: transparent;
}

.rt360-tabs .rz-tabview-nav::-webkit-scrollbar-thumb {
    background-color: var(--rz-primary);
    border-radius: 3px;
}

/* Cada ítem de tab */
.rt360-tabs .rz-tabview-nav li a,
.rt360-tabs .rz-tabview-nav li button {
    gap: 0.375rem;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* Tab activo — acento del color primary */
.rt360-tabs .rz-tabview-nav li.rz-tabview-selected a,
.rt360-tabs .rz-tabview-nav li.rz-tabview-selected button {
    color: var(--rz-primary);
}

/* Ink-bar (subrayado del tab activo) */
.rt360-tabs .rz-tabview-ink-bar {
    background-color: var(--rz-primary);
    height: 2px;
}

/* Contenedor del panel de contenido */
.rt360-tabs .rz-tabview-panels {
    padding: 0;
}


/* =============================================================================
   2. CONTENIDO DEL TAB (rt360-tab-content)
   Envuelve el contenido dentro de cada <RadzenTabsItem>.
   Uso: <RadzenStack class="rt360-tab-content">
   ============================================================================= */

/**
 * Padding estándar para el contenido de un tab
 * Uso: <RadzenStack Gap="1.5rem" class="rt360-tab-content">
 */
.rt360-tab-content {
    padding: 1.5rem 0 0.5rem;
}

/**
 * Variante sin padding (contenido edge-to-edge dentro del tab)
 * Uso: <RadzenStack class="rt360-tab-content rt360-tab-content--flush">
 */
.rt360-tab-content--flush {
    padding: 0;
}

/**
 * Variante con más espacio (tabs con formularios amplios)
 * Uso: <RadzenStack class="rt360-tab-content rt360-tab-content--spacious">
 */
.rt360-tab-content--spacious {
    padding: 2rem 0 1rem;
}


/* =============================================================================
   3. BADGE SOBRE TAB
   Contador de notificaciones / alertas encima del texto del tab.
   ============================================================================= */

/**
 * Wrapper del ítem de tab con badge (posicionamiento relativo)
 * Uso: <div class="rt360-tab-item-wrap"> ... <span class="rt360-tab-badge">3</span>
 */
.rt360-tab-item-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/**
 * Badge de conteo sobre el tab (esquina superior derecha)
 * Uso: <span class="rt360-tab-badge">5</span>
 */
.rt360-tab-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background-color: var(--rz-danger);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/**
 * Variante warning (alertas, advertencias)
 * Uso: <span class="rt360-tab-badge rt360-tab-badge--warning">2</span>
 */
.rt360-tab-badge--warning {
    background-color: var(--rz-warning);
}

/**
 * Variante info
 * Uso: <span class="rt360-tab-badge rt360-tab-badge--info">7</span>
 */
.rt360-tab-badge--info {
    background-color: var(--rz-info);
}

/**
 * Dot (sin número, solo indicador visual)
 * Uso: <span class="rt360-tab-badge rt360-tab-badge--dot"></span>
 */
.rt360-tab-badge--dot {
    min-width: 8px;
    height: 8px;
    padding: 0;
    top: -2px;
    right: -6px;
    border-radius: 50%;
}


/* =============================================================================
   4. ESTADO VACÍO DENTRO DE UN TAB
   Cuando el contenido del tab no tiene datos.
   ============================================================================= */

/**
 * Contenedor del estado vacío dentro de un tab
 * Uso: <RadzenStack class="rt360-tab-empty">
 */
.rt360-tab-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/**
 * Ícono del estado vacío dentro de un tab
 * Uso: <RadzenIcon class="rt360-tab-empty-icon" Icon="..." />
 */
.rt360-tab-empty-icon {
    font-size: 2.5rem !important;
    color: var(--rz-text-disabled-color);
    opacity: 0.55;
}

/**
 * Texto del estado vacío dentro de un tab
 * Uso: <RadzenText class="rt360-tab-empty-text">
 */
.rt360-tab-empty-text {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

.rt360-tab-text {
    color: var(--rz-text-secondary-color);
}


/* =============================================================================
   5. VARIANTE: OUTLINE / CARD STYLE (rt360-tabs--card)
   Tabs con estilo de tarjetas individuales (sin borde inferior de barra).
   Uso: <RadzenTabs class="rt360-tabs rt360-tabs--card">
   ============================================================================= */

.rt360-tabs--card .rz-tabview-nav {
    border-bottom: none;
    gap: 4px;
}

.rt360-tabs--card .rz-tabview-nav li a,
.rt360-tabs--card .rz-tabview-nav li button {
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    margin-bottom: 4px;
}

.rt360-tabs--card .rz-tabview-nav li.rz-tabview-selected a,
.rt360-tabs--card .rz-tabview-nav li.rz-tabview-selected button {
    background-color: var(--rz-primary);
    color: white;
    border-color: var(--rz-primary);
}

.rt360-tabs--card .rz-tabview-ink-bar {
    display: none;
}


/* =============================================================================
   6. VARIANTE: PILLS (rt360-tabs--pills)
   Tabs en forma de pills redondeados.
   Uso: <RadzenTabs class="rt360-tabs rt360-tabs--pills">
   ============================================================================= */

.rt360-tabs--pills .rz-tabview-nav {
    border-bottom: none;
    gap: 4px;
    background-color: var(--rz-base-100);
    border-radius: 8px;
    padding: 4px;
}

.rt360-tabs--pills .rz-tabview-nav li a,
.rt360-tabs--pills .rz-tabview-nav li button {
    border-radius: 6px;
}

.rt360-tabs--pills .rz-tabview-nav li.rz-tabview-selected a,
.rt360-tabs--pills .rz-tabview-nav li.rz-tabview-selected button {
    background-color: var(--rz-primary);
    color: white;
}

.rt360-tabs--pills .rz-tabview-ink-bar {
    display: none;
}


/* =============================================================================
   7. VARIANTE: TAMAÑO PEQUEÑO (rt360-tabs--sm)
   Tabs compactos para usar en secciones reducidas (dentro de cards, modals).
   Uso: <RadzenTabs class="rt360-tabs rt360-tabs--sm">
   ============================================================================= */

.rt360-tabs--sm .rz-tabview-nav li a,
.rt360-tabs--sm .rz-tabview-nav li button {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
}

.rt360-tabs--sm .rz-tabview-icon {
    font-size: 1rem !important;
}


/* =============================================================================
   8. DARK MODE — COMPLETO
   Variables CSS de Radzen para correcta coloración en modo oscuro.
   Se aplica a rt360-tabs y a los alias heredados.
   ============================================================================= */

/**
 * Variables de Radzen para el tema oscuro.
 * Al sobreescribirlas aquí el cascade de Radzen aplica los colores
 * correctos sin necesidad de !important en cada selector.
 */
html[data-theme="dark"] .rt360-tabs {
    --rz-tabs-tab-background-color:         rgba(255, 255, 255, 0.04);
    --rz-tabs-tab-color:                    rgba(255, 255, 255, 0.55);
    --rz-tabs-tab-hover-background-color:   rgba(255, 255, 255, 0.09);
    --rz-tabs-tab-hover-color:              rgba(255, 255, 255, 0.90);
    --rz-tabs-border:                       1px solid rgba(255, 255, 255, 0.08);
    --rz-tabs-tab-selected-color:           var(--rz-primary);
    --rz-tabs-tab-selected-top-border-color: var(--rz-primary);
    --rz-tabs-background-color:             var(--background-dark, #404040);
}

/* Ink-bar activo en dark */
html[data-theme="dark"] .rt360-tabs .rz-tabview-ink-bar {
    background-color: var(--rz-primary) !important;
}

/* Borde de navegación en dark */
html[data-theme="dark"] .rt360-tabs .rz-tabview-nav {
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* Borde de panels en dark */
html[data-theme="dark"] .rt360-tabs .rz-tabview-panels {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Variante --card en dark */
html[data-theme="dark"] .rt360-tabs--card .rz-tabview-nav li a,
html[data-theme="dark"] .rt360-tabs--card .rz-tabview-nav li button {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] .rt360-tabs--card .rz-tabview-nav li.rz-tabview-selected a,
html[data-theme="dark"] .rt360-tabs--card .rz-tabview-nav li.rz-tabview-selected button {
    background-color: var(--rz-primary);
    border-color: var(--rz-primary);
    color: white;
}

/* Variante --pills en dark */
html[data-theme="dark"] .rt360-tabs--pills .rz-tabview-nav {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Estado vacío en dark */
html[data-theme="dark"] .rt360-tab-empty-text {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Texto de tabs en dark */
html[data-theme="dark"] .rt360-tab-text {
    color: rgba(255, 255, 255, 0.45) !important;
}


/* =============================================================================
   9. RESPONSIVE — COMPACTO EN TABLET + SOLO ÍCONO EN MÓVIL
   ≤768px: padding reducido + flex-wrap:wrap → tabs en múltiples filas visibles.
   ≤576px: solo ícono + flex-wrap:wrap → fila de íconos sin scroll.
   Equivalente al patrón: ul[role=tablist] { flex-wrap: wrap }
   Se aplica a rt360-tabs y a los alias.
   ============================================================================= */

/* Tablet (577px–768px): texto visible pero padding reducido, tabs en múltiples filas */
@media (max-width: 768px) {
    .rt360-tabs .rz-tabview-nav li a,
    .rt360-tabs .rz-tabview-nav li button {
        font-size: 0.8125rem;
        padding-inline: 0.625rem;
        gap: 0.25rem;
    }

    .rt360-tabs .rz-tabview-nav li a .rz-tabview-icon,
    .rt360-tabs .rz-tabview-nav li button .rz-tabview-icon {
        font-size: 1rem !important;
    }

    /* flex-wrap:wrap → los tabs que no caben pasan a la siguiente fila */
    .rt360-tabs .rz-tabview-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Móvil (≤576px): font-size:0 en el <a> oculta el texto sin afectar al ícono */
@media (max-width: 576px) {
    .rt360-tabs .rz-tabview-nav li a,
    .rt360-tabs .rz-tabview-nav li a:not([href]):not([class]),
    .rt360-tabs .rz-tabview-nav li button {
        font-size: 0 !important;
        justify-content: center;
        padding-inline: 0.875rem;
    }

    /* Restaurar tamaño del ícono */
    .rt360-tabs .rz-tabview-nav li a .rz-tabview-icon,
    .rt360-tabs .rz-tabview-nav li button .rz-tabview-icon {
        font-size: var(--rz-tabs-icon-font-size, 1.25rem) !important;
        margin-inline: 0 !important;
    }

    /* flex-wrap:wrap → fila de íconos en múltiples filas, sin scroll horizontal */
    .rt360-tabs .rz-tabview-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* =============================================================================
   FIN DEL ARCHIVO
   ============================================================================= */