/* Timeline Kanban - CSS Final (Layout Card Top + Pill + Accordion Split) */
.wpta-kanban-timeline-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    /* Variáveis padrão */
    --wpta-line-color-active: #2271b1;
    --wpta-line-color-future: #e0e0e0;
    --wpta-point-size: 30px;
    --wpta-line-thickness: 4px;
    --wpta-min-height: auto;
    --wpta-content-distance: 20px;
    --wpta-tooltip-max-width: 250px;
    --wpta-tooltip-gap: 8px;
    
    /* Offsets Separados */
    --wpta-offset-odd: 0px;
    --wpta-offset-even: 0px;

    /* Variável interna para cor do tooltip */
    --wpta-tooltip-bg-internal: #333; 
}

/* === STATUS HEADER (WRAPPER GERAL) === */
.wpta-kanban-status-header {
    margin-bottom: 0;
    padding: 0; /* Padding agora é controlado nos elementos internos ou via widget */
    border-radius: 12px;
    background: #ffffff;
    border-left-style: solid; 
    border-left-width: 6px;
    border-left-color: #2271b1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Para conter bordas internas */
}

/* === NOVO: SEÇÃO DO TOPO (Título + Pill) === */
.wpta-card-top-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    /* Estilos controlados pelo painel (padding, bg, border) */
}

.wpta-card-title-area {
    flex: 1;
    min-width: 200px;
}

.wpta-card-title-area h3 {
    margin: 0 0 5px 0;
    font-size: 20px;
    font-weight: 700;
    color: #1d2327;
}

.wpta-card-title-area p {
    margin: 0;
    color: #50575e;
    font-size: 14px;
    line-height: 1.6;
}

/* === NOVO: PILL DE STATUS === */
.wpta-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background-color: #e0e0e0;
    color: #333;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

/* === PROGRESS BAR === */
.wpta-kanban-status-header .status-progress {
    padding: 20px 0px; /* Padding padrão se não sobrescrito */
    border-top: 1px solid #eee;
}

.wpta-kanban-status-header .progress-bar {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.wpta-kanban-status-header .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2271b1 0%, #5ba3d0 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.wpta-kanban-status-header .progress-text {
    font-size: 12px;
    color: #646970;
    font-weight: 600;
}

/* === ACORDEÃO (AJUSTADO) === */
.wpta-accordion-wrapper {
    width: 100%;
    border: none;
    background: transparent;
    margin-bottom: 0; /* Dentro do card */
}

.wpta-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Força separação Esq/Dir */
    padding: 15px 20px;
    cursor: pointer;
    background: #f9f9f9;
    transition: all 0.3s ease;
    user-select: none;
    position: relative;
    z-index: 2;
    border-top: 1px solid #eee;
}

.wpta-accordion-header:hover {
    background: #f1f1f1;
}

/* Lado Esquerdo do Acordeão (Status) */
.wpta-accordion-left {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #333;
}

/* Lado Direito do Acordeão (Toggle) */
.wpta-accordion-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpta-accordion-text-open { display: none; }
.wpta-accordion-wrapper.open .wpta-accordion-text-closed { display: none; }
.wpta-accordion-wrapper.open .wpta-accordion-text-open { display: inline; }

.wpta-accordion-icon {
    font-size: 18px;
    color: #333;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

.wpta-accordion-wrapper.open .wpta-accordion-icon {
    transform: rotate(180deg);
}

.wpta-accordion-content-wrap {
    display: none;
    padding: 20px;
    position: relative;
    z-index: 1;
    background: #fff;
}

.wpta-accordion-wrapper.open .wpta-accordion-content-wrap {
    display: block;
}

/* === FOOTER SEPARATOR FIX === */
.wpta-status-footer-separator {
    background: transparent !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top-style: solid !important;
    height: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: content-box !important;
    opacity: 1 !important;
}

.wpta-separator-align-left .wpta-status-footer-separator { margin-left: 0; margin-right: auto; }
.wpta-separator-align-center .wpta-status-footer-separator { margin-left: auto; margin-right: auto; }
.wpta-separator-align-right .wpta-status-footer-separator { margin-left: auto; margin-right: 0; }

/* === CONTAINER DA TIMELINE === */
.wpta-kanban-timeline {
    display: flex;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px;
    z-index: 2;
}

.wpta-kanban-timeline::-webkit-scrollbar {
    height: 6px;
}
.wpta-kanban-timeline::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.wpta-kanban-timeline::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 4px;
}

/* === TÍTULO E ALINHAMENTO === */
.wpta-timeline-content h4 {
    margin-top: 0;
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--wpta-tooltip-gap);
    flex-wrap: nowrap;
    position: relative;
}
.wpta-timeline-content p:last-child { margin-bottom: 0; }

/* Classes de alinhamento injetadas pelo Widget */
.wpta-title-align-left .wpta-timeline-content h4 { justify-content: flex-start; text-align: left; }
.wpta-title-align-center .wpta-timeline-content h4 { justify-content: center; text-align: center; }
.wpta-title-align-right .wpta-timeline-content h4 { justify-content: flex-end; text-align: right; }
.wpta-title-align-justify .wpta-timeline-content h4 { justify-content: space-between; text-align: justify; }

.wpta-title-align-alternated .wpta-timeline-vertical.alternated .wpta-timeline-item:nth-child(odd) .wpta-timeline-content h4 { justify-content: flex-end; text-align: right; }
.wpta-title-align-alternated .wpta-timeline-vertical.alternated .wpta-timeline-item:nth-child(even) .wpta-timeline-content h4 { justify-content: flex-start; text-align: left; }
.wpta-title-align-alternated .wpta-timeline-horizontal .wpta-timeline-content h4,
.wpta-title-align-alternated .wpta-timeline-vertical:not(.alternated) .wpta-timeline-content h4 { justify-content: flex-start; text-align: left; }

.wpta-timeline-content h4.wpta-icon-left .wpta-tooltip-trigger { order: -1; }
.wpta-timeline-content h4.wpta-icon-right .wpta-tooltip-trigger { order: 1; }

.wpta-desc-align-left .wpta-timeline-content p { text-align: left; }
.wpta-desc-align-center .wpta-timeline-content p { text-align: center; }
.wpta-desc-align-right .wpta-timeline-content p { text-align: right; }
.wpta-desc-align-justify .wpta-timeline-content p { text-align: justify; }

.wpta-desc-align-alternated .wpta-timeline-vertical.alternated .wpta-timeline-item:nth-child(odd) .wpta-timeline-content p { text-align: right; }
.wpta-desc-align-alternated .wpta-timeline-vertical.alternated .wpta-timeline-item:nth-child(even) .wpta-timeline-content p { text-align: left; }
.wpta-desc-align-alternated .wpta-timeline-horizontal .wpta-timeline-content p,
.wpta-desc-align-alternated .wpta-timeline-vertical:not(.alternated) .wpta-timeline-content p { text-align: left; }

/* === TOOLTIP (PORTAL) === */
.wpta-tooltip-trigger {
    position: relative; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
}
.wpta-timeline-item .wpta-tooltip-box { display: none; }

.wpta-tooltip-portal {
    position: fixed;
    z-index: 999999;
    background-color: var(--wpta-tooltip-bg-internal); 
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    max-width: 250px;
}
.wpta-tooltip-portal::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    width: 0; 
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent;
    border-top-color: var(--wpta-tooltip-bg-internal);
}
.wpta-tooltip-portal.wpta-no-arrow::after { display: none; }
.wpta-tooltip-portal.wpta-tooltip-bottom::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--wpta-tooltip-bg-internal);
}

/* === ITENS DA TIMELINE (Common) === */
.wpta-timeline-item { position: relative; }
.wpta-timeline-item:hover .wpta-timeline-content { z-index: 100; position: relative; }

.wpta-timeline-connector {
    position: absolute;
    background-color: var(--wpta-line-color-future);
    z-index: 1; 
    transition: background-color 0.3s ease;
}
.wpta-timeline-point { position: relative; z-index: 5; }
.wpta-timeline-item:last-child .wpta-timeline-connector { display: none !important; }
.wpta-timeline-item.completed .wpta-timeline-connector { background-color: var(--wpta-line-color-active); }

/* Largura Card */
.wpta-timeline-content { box-sizing: border-box; }
.wpta-card-width-full .wpta-timeline-content { width: 100%; }
.wpta-card-width-auto .wpta-timeline-content { width: auto; display: inline-flex; flex-direction: column; }

/* HORIZONTAL */
.wpta-timeline-horizontal { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; }
.wpta-timeline-horizontal .wpta-timeline-item { flex: 1; min-width: 180px; display: flex; flex-direction: column; align-items: center; }
.wpta-timeline-horizontal .wpta-timeline-point { width: var(--wpta-point-size); height: var(--wpta-point-size); border-radius: 50%; background: #fff; border: 4px solid #e0e0e0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: var(--wpta-content-distance); }
.wpta-timeline-horizontal .wpta-timeline-connector { height: var(--wpta-line-thickness); top: calc(var(--wpta-point-size) / 2); left: 50%; width: 100%; transform: translateY(-50%); }
.wpta-timeline-horizontal .wpta-timeline-content { display: flex; flex-direction: column; }

/* HORIZONTAL ALTERNADO */
.wpta-timeline-horizontal.alternated { align-items: center; }
.wpta-timeline-horizontal.alternated .wpta-timeline-item { display: grid; grid-template-rows: 1fr auto 1fr; height: auto; min-height: 200px; justify-items: center; }
.wpta-timeline-horizontal.alternated .wpta-timeline-point { grid-row: 2; margin: 0; }
.wpta-timeline-horizontal.alternated .wpta-timeline-connector { top: 50%; }
.wpta-timeline-horizontal.alternated .wpta-timeline-item:nth-child(odd) .wpta-timeline-content { grid-row: 3; align-self: start; margin-top: var(--wpta-content-distance); }
.wpta-timeline-horizontal.alternated .wpta-timeline-item:nth-child(even) .wpta-timeline-content { grid-row: 1; align-self: end; margin-bottom: var(--wpta-content-distance); }

/* VERTICAL */
.wpta-timeline-vertical { flex-direction: column; overflow-x: visible; }
.wpta-timeline-vertical .wpta-timeline-item { display: flex; flex-direction: row; align-items: flex-start; padding-bottom: 30px; min-height: var(--wpta-min-height); }
.wpta-timeline-vertical .wpta-timeline-item:last-child { padding-bottom: 0; min-height: auto; }
.wpta-timeline-vertical .wpta-timeline-point { width: var(--wpta-point-size); height: var(--wpta-point-size); border-radius: 50%; background: #fff; border: 4px solid #e0e0e0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: var(--wpta-content-distance); }
.wpta-timeline-vertical .wpta-timeline-connector { width: var(--wpta-line-thickness); left: calc(var(--wpta-point-size) / 2); top: calc(var(--wpta-point-size) / 2); height: 100%; transform: translateX(-50%); }
.wpta-timeline-vertical .wpta-timeline-content { flex: 1; margin-top: var(--wpta-offset-odd); }

/* VERTICAL ALTERNADO */
.wpta-timeline-vertical.alternated .wpta-timeline-item { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--wpta-content-distance); align-items: flex-start; width: 100%; min-height: var(--wpta-min-height); padding-bottom: 30px; }
.wpta-timeline-vertical.alternated .wpta-timeline-item:last-child { padding-bottom: 0; min-height: auto; }
.wpta-timeline-vertical.alternated .wpta-timeline-point { grid-column: 2; margin: 0; }
.wpta-timeline-vertical.alternated .wpta-timeline-connector { left: 50%; height: 100%; top: calc(var(--wpta-point-size) / 2); }
.wpta-timeline-vertical.alternated .wpta-timeline-item:nth-child(odd) .wpta-timeline-content { grid-column: 1; margin-top: var(--wpta-offset-odd); justify-self: end; }
.wpta-timeline-vertical.alternated .wpta-timeline-item:nth-child(even) .wpta-timeline-content { grid-column: 3; margin-top: var(--wpta-offset-even); justify-self: start; }

/* ESTADOS */
.wpta-timeline-item.completed .wpta-timeline-point { background: #2271b1; border-color: #2271b1; color: #fff; }
.wpta-timeline-item.current .wpta-timeline-point { background: #fff; border-color: #2271b1; box-shadow: 0 0 0 4px rgba(34, 113, 177, 0.2); color: #2271b1; }
.wpta-timeline-item.future .wpta-timeline-point { background: #fff; border-color: #e0e0e0; color: #646970; }

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
    .wpta-responsive-tablet .wpta-timeline-horizontal, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated { flex-direction: column; align-items: flex-start; flex-wrap: wrap; overflow-x: visible; }
    .wpta-responsive-tablet .wpta-timeline-horizontal .wpta-timeline-item, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-item { display: flex; flex-direction: row; width: 100%; height: auto; padding-bottom: 30px; align-items: flex-start; justify-content: flex-start; grid-template-rows: none; grid-template-columns: none; }
    .wpta-responsive-tablet .wpta-timeline-horizontal .wpta-timeline-point, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-point { margin: 0; margin-right: var(--wpta-content-distance); }
    .wpta-responsive-tablet .wpta-timeline-horizontal .wpta-timeline-connector, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-connector { width: var(--wpta-line-thickness); height: 100%; top: calc(var(--wpta-point-size) / 2); left: calc(var(--wpta-point-size) / 2); transform: translateX(-50%); right: auto; }
    .wpta-responsive-tablet .wpta-timeline-horizontal .wpta-timeline-content, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-item:nth-child(odd) .wpta-timeline-content, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-item:nth-child(even) .wpta-timeline-content { grid-row: auto; grid-column: auto; text-align: left; padding: 0; margin: 0; width: auto; flex: 1; margin-top: var(--wpta-offset-odd); justify-self: start; }
}

@media (max-width: 767px) {
    .wpta-responsive-mobile .wpta-timeline-horizontal, .wpta-responsive-mobile .wpta-timeline-horizontal.alternated, .wpta-responsive-tablet .wpta-timeline-horizontal, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated { flex-direction: column; align-items: flex-start; flex-wrap: wrap; overflow-x: visible; }
    .wpta-responsive-mobile .wpta-timeline-horizontal .wpta-timeline-item, .wpta-responsive-mobile .wpta-timeline-horizontal.alternated .wpta-timeline-item, .wpta-responsive-tablet .wpta-timeline-horizontal .wpta-timeline-item, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-item { display: flex; flex-direction: row; width: 100%; padding-bottom: 30px; align-items: flex-start; justify-content: flex-start; grid-template-rows: none; grid-template-columns: none; }
    .wpta-responsive-mobile .wpta-timeline-horizontal .wpta-timeline-point, .wpta-responsive-mobile .wpta-timeline-horizontal.alternated .wpta-timeline-point, .wpta-responsive-tablet .wpta-timeline-horizontal .wpta-timeline-point, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-point { margin: 0; margin-right: var(--wpta-content-distance); }
    .wpta-responsive-mobile .wpta-timeline-horizontal .wpta-timeline-connector, .wpta-responsive-mobile .wpta-timeline-horizontal.alternated .wpta-timeline-connector, .wpta-responsive-tablet .wpta-timeline-horizontal .wpta-timeline-connector, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-connector { width: var(--wpta-line-thickness); height: 100%; top: calc(var(--wpta-point-size) / 2); left: calc(var(--wpta-point-size) / 2); transform: translateX(-50%); }
    .wpta-responsive-mobile .wpta-timeline-horizontal .wpta-timeline-content, .wpta-responsive-mobile .wpta-timeline-horizontal.alternated .wpta-timeline-item:nth-child(odd) .wpta-timeline-content, .wpta-responsive-mobile .wpta-timeline-horizontal.alternated .wpta-timeline-item:nth-child(even) .wpta-timeline-content, .wpta-responsive-tablet .wpta-timeline-horizontal .wpta-timeline-content, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-item:nth-child(odd) .wpta-timeline-content, .wpta-responsive-tablet .wpta-timeline-horizontal.alternated .wpta-timeline-item:nth-child(even) .wpta-timeline-content { text-align: left; margin: 0; width: auto; flex: 1; margin-top: var(--wpta-offset-odd); justify-self: start; }
}