/* Extraido de themes/huayra/sections/calendario_v2.php */

            .calendarios-huayra-2025{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;}
            .calendario-box{background:#ffffff;border-radius:10px;padding:1rem;position:relative}
            .calendario-titulo{font-size:1.25rem;line-height:1.1}
            .etapa-dia{width:60px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;margin:0.25rem}
            @media(max-width:575.98px){.calendarios-huayra-2025{flex-direction:column}.calendario-box{max-width:100%}}

            #modalCabecalho h4 {
                font-size: 1.0rem !important;
            }

            #modalCabecalho h4 span, #titleTemporada {
                font-weight: 400;
            }

            .midia-box {
                border-radius: 0 !important;
            }
            /* garante mesma altura em qualquer conteúdo */
            .midia-card {
                min-height: 210px;          /* ajuste se quiser mais alto */
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                border-radius: .5rem;
                box-shadow: 0 2px 4px rgba(0,0,0,.05);
                background: rgba(0, 0, 0, 0.2);
                color: #FFFFFF;
                margin-top:12px;
                padding-bottom: 20px !important;
            }
            .midia-card iframe { border-radius: .5rem; }
            .small {
                font-size: 80% !important;
                font-weight: 400 !important;
                color: #FFFFFF !important;
            }
            /* Zebrado: aplica cor de fundo a cada item ímpar */
            .list-group-item:nth-child(odd) {
                background-color: #f9f9f9;
            }

            /* Hover: muda cor de fundo e cursor */
            .list-group-item:hover {
                background-color: rgba(2, 253, 1, 0.5) !important;
                border-left:4px solid var(--kl-primary);
                cursor: pointer;
                color: #000; /* se quiser, para melhor contraste no hover */
            }

            /* Opcional: links dentro da linha no hover */
            .list-group-item:hover a {
                color: #000;
                text-decoration: none;
            }

            .list-group span {
                color: #495057 !important;
                font-size: 12px !important;

            }
            .etapa-arrow {
                font-size: 1.5rem !important;      /* maior e chamativa */
                color: #333;            /* cinza escuro */
                transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
            }

            .list-group-item-action:hover .etapa-arrow {
                transform: translateX(4px);
                color: #020041;         /* azul Huayra no hover */
            }

            /* Estado visual para data totalmente cancelada */
            .etapa-dia.cancelada{
                position: relative;
                background: #5e5e5e !important;
                color: #fdfdfe !important;
                border:1px solid #5e5e5e !important;
            }

            .etapa-dia.cancelada:hover{
                background: #8f8f8f !important;
                border:1px solid #8f8f8f !important;
            }

            /* Risco diagonal preto (sem bloquear clique/hover) */
            .etapa-dia.cancelada::after{
                content:"";
                position:absolute;
                top: 17px; left: -28px;
                width:80px; height:100%;
                pointer-events:none;
                border-top:3px solid red;
                transform:rotate(45deg);
                border-radius:6px;

            }

            .status_cancelada {
                color: red !important;
                font-weight: 600;
            }

            .status_etapa {
                color: #000 !important;
                font-weight: 600;
            }

            /* ===== AGENDA – TIMELINE ESTILO iOS ===== */
            #agendaEvento.agenda-timeline{
                background: #faf7f3;
                border-radius: 12px;
                padding: 14px 16px 10px 16px;
                border: 1px solid rgba(181,74,0,.15);
                box-shadow: 0 6px 16px rgba(0,0,0,.05);
            }

            #agendaEvento h6{
                font-size: 0.95rem;
                color: #2b1a12;
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 12px;
            }

            #agendaEvento h6::after{
                content: "";
                flex: 1;
                height: 1px;
                margin-left: 8px;
                background: linear-gradient(90deg, rgba(0,0,0,.08), transparent);
            }

            /* container da timeline */
            .agenda-line{
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            /* cada item */
            .agenda-item{
                display: grid;
                grid-template-columns: auto auto 1fr;
                column-gap: 10px;
                align-items: flex-start;
                position: relative;
                padding-bottom: 4px;
            }

            /* coluna da hora */
            .agenda-time{
                font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
                font-size: 0.85rem;
                font-weight: 600;
                color: #7a5a49;
                min-width: 48px;
                text-align: right;
                padding-top: 2px;
            }

            /* coluna do ponto + linha */
            .agenda-dot-wrap{
                position: relative;
                width: 18px;
                display: flex;
                justify-content: center;
            }

            /* bolinha */
            .agenda-dot{
                width: 10px;
                height: 10px;
                border-radius: 999px;
                background: #ff6a00;
                border: 2px solid #fff;
                box-shadow: 0 0 0 2px rgba(255,106,0,.35);
                position: relative;
                z-index: 2;
                margin-top: 3px;
            }

            /* trilho vertical */
            .agenda-line-vertical{
                position: absolute;
                top: 14px;          /* logo abaixo da bolinha */
                bottom: -6px;
                width: 2px;
                background: linear-gradient(
                    to bottom,
                    rgba(181,74,0,.35),
                    rgba(181,74,0,.08)
                );
                z-index: 1;
            }

            /* último item: linha não passa muito pra baixo */
            .agenda-item-last .agenda-line-vertical{
                bottom: 4px;
            }

            /* conteúdo (título + faixa de horário) */
            .agenda-content{
                padding-bottom: 4px;
            }

            /* título */
            .agenda-title{
                font-size: 0.9rem;
                font-weight: 600;
                color: #2b1a12;
                display: flex;
                align-items: center;
                gap: 4px;
            }

            /* ícone à esquerda do título */
            .agenda-icon{
                font-size: 1rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            /* subtítulo com o range de horário */
            .agenda-range{
                font-size: 0.78rem;
                color: #7a5a49;
                margin-top: 1px;
            }

            /* responsivo: em telas bem pequenas, diminui um pouco as fontes */
            @media (max-width: 575.98px){
                #agendaEvento.agenda-timeline{
                    padding: 12px 12px 8px 12px;
                }
                .agenda-time{
                    font-size: 0.8rem;
                    min-width: 42px;
                }
                .agenda-title{
                    font-size: 0.85rem;
                }
                .agenda-range{
                    font-size: 0.75rem;
                }
            }

            /* ===== THEME VARS (Kart Lokos - dark + orange) ===== */
            :root{

                --kl-primary: #020041;     /* Azul Huayra */

            }

            .badge-reserva {
                background: var(--kl-primary); /* azul que conversa com o tema */
                color: #fff !important;
                font-weight: 600;
                padding: 4px 8px;
                border-radius: 6px;
                font-size: 0.75rem;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                white-space: nowrap;
                margin-left: 5px;
            }

            .badge-reserva i {
                font-size: 0.85rem;
                color: #fff !important;
            }

            .tooltip-reserva {
                position: relative;
                cursor: help;
            }

            .tooltip-text {
                visibility: hidden;
                opacity: 0;
                width: max-content;
                max-width: 200px;
                background: #495057;
                color: #fff; !important;
                text-align: center;
                border-radius: 6px;
                padding: 6px 8px;
                font-size: 0.75rem;

                position: absolute;
                bottom: 125%; /* aparece acima */
                left: 50%;
                transform: translateX(-50%);
                white-space: normal;
                z-index: 20;
                transition: opacity 0.2s;
            }

            .tooltip-text::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 6px;
                border-style: solid;
                border-color: #495057 transparent transparent transparent;
            }

            .tooltip-reserva:hover .tooltip-text {
                visibility: visible;
                opacity: 1;
            }