/* ===== FLUENT TAB ===== */

.ftab {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #FFFFFF;
}

/* Strip de pestanas (barra superior) */
.ftab-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    background: #F8F9FA;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
    scrollbar-width: thin;
}

.ftab-strip::-webkit-scrollbar {
    height: 4px;
}

.ftab-strip::-webkit-scrollbar-track {
    background: transparent;
}

.ftab-strip::-webkit-scrollbar-thumb {
    background: #C8C6C4;
    border-radius: 2px;
}

/* Header de cada pestana */
.ftab-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 10px 16px;
    border-right: 1px solid #E5E7EB;
    cursor: pointer;
    color: #6B7280;
    font-size: 0.875rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    user-select: none;
}

.ftab-header:hover {
    background-color: #F3F4F6;
    color: #1F2937;
}

.ftab-header.is-active {
    background-color: #FFFFFF;
    color: var(--ftab-color, #003E91);
    font-weight: 600;
}

/* Indicador inferior de la pestana activa */
.ftab-header.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--ftab-color, #003E91);
    border-radius: 2px 2px 0 0;
}

/* Colores por tema (modulo del menu) */
.ftab-header.onboarding        { --ftab-color: #36A9E1; }
.ftab-header.movimientosnomina { --ftab-color: #7F569F; }
.ftab-header.seguridadsocial   { --ftab-color: #62C0BC; }
.ftab-header.offboarding       { --ftab-color: #F3902F; }
.ftab-header.nomina            { --ftab-color: #A0C636; }
.ftab-header.autorizacion      { --ftab-color: #3D85A0; }
.ftab-header.dashboards        { --ftab-color: #EE6F63; }
.ftab-header.reportes          { --ftab-color: #F2C610; }
.ftab-header.herramientas      { --ftab-color: #72828C; }

.ftab-title {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botones de iconos (refresh / cerrar) */
.ftab-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #9CA3AF;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ftab-icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1F2937;
}

/* Refresh: hover azul Fluent */
.ftab-refresh:hover {
    color: #003E91;
    background-color: rgba(0, 62, 145, 0.08);
}

/* Cerrar: hover rojo */
.ftab-close:hover {
    color: #D13438;
    background-color: rgba(209, 52, 56, 0.1);
}

/* Acciones custom inyectadas por el host (entre titulo y refresh/close) */
.ftab-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

/* Wake word toggle dentro del tab Sofia */
.ftab-wake-toggle.is-on {
    color: #003E91;
}

.ftab-wake-toggle.is-on:hover {
    color: #003E91;
    background-color: rgba(0, 62, 145, 0.12);
}

/* Toggle del FAB flotante de Sofia */
.ftab-fab-toggle.is-on {
    color: #0078D4;
}

.ftab-fab-toggle.is-on:hover {
    color: #0078D4;
    background-color: rgba(0, 120, 212, 0.12);
}

/* Toggle de sugerencias proactivas */
.ftab-suggestions-toggle.is-on {
    color: #FF8C00;
}

.ftab-suggestions-toggle.is-on:hover {
    color: #FF8C00;
    background-color: rgba(255, 140, 0, 0.12);
}

/* Toggle de voz en sugerencias (foco + bocinita superpuesta) */
.ftab-suggestions-voice-toggle.is-on {
    color: #2A70B0;
}

.ftab-suggestions-voice-toggle.is-on:hover {
    color: #2A70B0;
    background-color: rgba(42, 112, 176, 0.12);
}

.lightbulb-with-speaker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lightbulb-with-speaker .mini {
    position: absolute;
    bottom: -3px;
    right: -5px;
    font-size: 0.55em;
    line-height: 1;
    background: white;
    border-radius: 50%;
    padding: 1px 2px;
    color: #2A70B0;
    box-shadow: 0 0 0 1px rgba(42, 112, 176, 0.35);
}

.ftab-suggestions-voice-toggle:not(.is-on) .lightbulb-with-speaker .mini {
    color: #9CA3AF;
    box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.4);
}

/* Tooltip flotante (posición fixed via JS en wwwroot/js/ftab-tooltip.js).
   Necesario porque .ftab y .ftab-strip tienen overflow:hidden. */
.ftab-tooltip-floating {
    position: fixed;
    z-index: 99999;
    background: rgba(50, 49, 48, 0.96);
    color: #fff;
    padding: 5px 9px;
    border-radius: 5px;
    font-size: 0.74rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s ease, left 0.05s linear, top 0.05s linear;
    opacity: 0;
}

/* Indicador de estado del mic dentro del tab */
.ftab-mic-indicator {
    cursor: default;
}

.ftab-mic-indicator.is-off {
    color: #9CA3AF;
}

.ftab-mic-indicator.is-paused {
    color: #B25500;
}

.ftab-mic-indicator.is-listening {
    color: #2A70B0;
    animation: ftabMicPulse 1.4s ease-out infinite;
}

@keyframes ftabMicPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Container del contenido (apilado, animado) */
.ftab-content {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* Panel de cada pestana - default: oculto a la derecha */
.ftab-panel {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    visibility: hidden;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.1, 0.9, 0.2, 1),
                visibility 0s linear 0.35s;
    overflow: hidden;
}

/* Panel anterior al activo (oculto a la izquierda) */
.ftab-panel.is-prev {
    transform: translateX(-100%);
}

/* Panel activo (visible y centrado) */
.ftab-panel.is-active {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.1, 0.9, 0.2, 1),
                visibility 0s linear 0s;
}