/* ═══════════════════════════════════════════════════════════
   PROGRAMAÇÃO — Index.css
   Design premium estilo plataforma de eventos
═══════════════════════════════════════════════════════════ */

/* ── 0. Custom properties ─────────────────────────────────── */
#prog-page {
    --prog-bg:           #f4f6f9;
    --prog-card-bg:      #ffffff;
    --prog-text:         #111827;
    --prog-muted:        #6b7280;
    --prog-border:       #e5e7eb;
    --prog-radius-card:  14px;
    --prog-radius-pill:  999px;
    --prog-ease:         cubic-bezier(.4, 0, .2, 1);
    --prog-dur:          .22s;
    --prog-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --prog-shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    --prog-shadow-hover: 0 14px 36px rgba(0,0,0,.13), 0 4px 10px rgba(0,0,0,.06);

    background: var(--prog-bg);
    min-height: 100vh;
}


/* ── 1. Filter card wrapper ──────────────────────────────── */
.prog-filter-wrap {
    padding: 1.75rem 0 0;
    background: var(--prog-bg);
}

/* Card principal — SEM overflow:hidden para não clipar o datepicker */
.prog-filter-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--prog-shadow-md);
    border: 1px solid var(--prog-border);
}

/* cabeçalho */
.prog-filter-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.5rem;
    border-bottom: 1px solid var(--prog-border);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(to right, #fafbfd, #f5f7fb);
}

.prog-filter-card__title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--prog-text);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.prog-filter-card__title i { color: var(--azul-sesc); }

.prog-filter-card__clear {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .775rem;
    font-weight: 600;
    color: #dc2626;
    text-decoration: none;
    padding: .28rem .875rem;
    border: 1.5px solid #fca5a5;
    border-radius: var(--prog-radius-pill);
    background: #fff5f5;
    transition: background var(--prog-dur), border-color var(--prog-dur), color var(--prog-dur);
}

.prog-filter-card__clear:hover {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
}

/* ── Grid de colunas ── */
.prog-filter-card__body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: .875rem 1rem;
    gap: .625rem;
}

@media (max-width: 991px) {
    .prog-filter-card__body { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .prog-filter-card__body { grid-template-columns: 1fr; padding: .625rem; }
}

/* cada coluna é um campo arredondado */
.prog-filter-col {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .7rem 1rem .65rem;
    border-radius: 10px;
    border: 1.5px solid var(--prog-border);
    background: #fff;
    transition: border-color var(--prog-dur) var(--prog-ease),
                box-shadow    var(--prog-dur) var(--prog-ease);
    position: relative;
}

.prog-filter-col:hover {
    border-color: #c9d0db;
}

.prog-filter-col:focus-within {
    border-color: var(--azul-sesc);
    box-shadow: 0 0 0 3px rgba(0,76,153,.1);
}

/* label */
.prog-filter-label {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--prog-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .25rem;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.prog-filter-label i { font-size: .65rem; }

/* select dentro do card */
.prog-filter-select {
    width: 100%;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: .8rem;
    border: none;
    padding: .1rem 1.25rem .1rem 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--prog-text);
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: color var(--prog-dur);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.prog-filter-select:focus { color: var(--azul-sesc); }

.prog-filter-select.has-value {
    color: var(--azul-sesc);
    font-weight: 600;
}

/* ── Botão / campo de data ── */
.prog-date-group {
    /* garante que o popup do datepicker não seja cortado */
    overflow: visible !important;
    position: static !important;
}

.prog-filter-date-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    padding: .15rem 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--prog-text);
    cursor: pointer;
    text-align: left;
    width: 100%;
    outline: none;
    transition: color var(--prog-dur);
}

.prog-filter-date-btn:focus  { color: var(--azul-sesc); }

.prog-filter-date-btn.has-value {
    color: var(--azul-sesc);
    font-weight: 600;
}

.prog-filter-date-btn .text-muted { color: #9ca3af !important; font-weight: 400; }

.prog-date-clear {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: .7rem;
    color: #9ca3af;
    text-decoration: none;
    border-radius: 50%;
    transition: color var(--prog-dur), background var(--prog-dur);
}

.prog-date-clear:hover {
    color: #dc2626;
    background: #fee2e2;
}

/* ── Badges filtros ativos ── */
.prog-filter-card__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.5rem .875rem;
}

.prog-active-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #e8f0fe;
    color: var(--azul-sesc);
    border-radius: var(--prog-radius-pill);
    padding: .2rem .75rem;
    font-size: .75rem;
    font-weight: 600;
}

/* ── z-index datepicker — nunca cortado ── */
.bootstrap-datetimepicker-widget {
    z-index: 9999 !important;
}


/* ── 3. Main ─────────────────────────────────────────────── */
.prog-main {
    padding: 2rem 0 5rem;
}

.prog-results-count {
    color: var(--prog-muted);
    font-size: .875rem;
    margin-bottom: 1.5rem;
}

.prog-results-count__num { color: var(--prog-text); font-weight: 700; }
.prog-results-count__page { color: var(--prog-muted); }


/* ── 4. Area section ─────────────────────────────────────── */
.prog-section {
    margin-bottom: 3.5rem;
    /* stagger de entrada */
    animation: sectionFadeIn .45s var(--prog-ease) both;
}

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

.prog-section__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--prog-border);
}

.prog-section__accent {
    display: block;
    width: 4px;
    height: 1.625rem;
    border-radius: 99px;
    background: var(--area-color, var(--azul-sesc));
    flex-shrink: 0;
}

.prog-section__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--prog-text);
    margin: 0;
    flex: 1;
}

.prog-section__count {
    font-size: .78rem;
    color: var(--prog-muted);
    background: #f3f4f6;
    border-radius: var(--prog-radius-pill);
    padding: .2rem .7rem;
    font-weight: 500;
}


/* ── 5. Card grid ────────────────────────────────────────── */
.prog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.375rem;
}

@media (min-width: 992px)  { .prog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .prog-grid { grid-template-columns: repeat(4, 1fr); } }


/* ── 6. Card ─────────────────────────────────────────────── */
.prog-card {
    border-radius: var(--prog-radius-card);
    overflow: hidden;
    background: var(--prog-card-bg);
    box-shadow: var(--prog-shadow-sm);

    /* fade-in via IntersectionObserver */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s var(--prog-ease),
                transform .4s var(--prog-ease),
                box-shadow var(--prog-dur) var(--prog-ease);
}

.prog-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.prog-card:hover {
    box-shadow: var(--prog-shadow-hover);
    transform: translateY(-5px);
}

/* link cobre o card inteiro */
.prog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.prog-card__link:hover { text-decoration: none; color: inherit; }

/* imagem */
.prog-card__media {
    position: relative;
    aspect-ratio: 3 / 4;   /* retrato — ideal para capas de eventos */
    overflow: hidden;
    background: #111827;
    flex-shrink: 0;
}

.prog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* exibe a imagem completa sem corte */
    display: block;
    transition: opacity .3s var(--prog-ease);
}

.prog-card:hover .prog-card__media img {
    opacity: .9;
}

/* gradiente sutil no fundo para suavizar a transição imagem → corpo */
.prog-card__media::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.35));
    pointer-events: none;
    z-index: 1;
}

/* esgotado */
.prog-card__media.is-esgotado::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.38);
    z-index: 1;
    pointer-events: none;
}

.prog-card__media.is-esgotado img {
    filter: grayscale(35%) brightness(.82);
}

/* badges */
.prog-card__badge {
    position: absolute;
    z-index: 3;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .28rem .65rem;
    border-radius: var(--prog-radius-pill);
}

.prog-card__badge--type {
    top: .7rem;
    left: .7rem;
    backdrop-filter: blur(6px);
}

.prog-card__badge--type.is-gratis {
    background: rgba(22, 163, 74, .9);
    color: #fff;
}

.prog-card__badge--type.is-pago {
    background: rgba(37, 99, 235, .88);
    color: #fff;
}

.prog-card__badge--esgotado {
    top: .7rem;
    right: .7rem;
    background: rgba(220, 38, 38, .9);
    color: #fff;
    backdrop-filter: blur(6px);
}

/* corpo */
.prog-card__body {
    padding: 1rem 1.125rem 1.125rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.prog-card__title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--prog-text);
}

.prog-card__meta {
    font-size: .78rem;
    color: var(--prog-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 auto;
    padding-bottom: .875rem;
}

.prog-card__meta i { color: var(--azul-sesc); flex-shrink: 0; }

.prog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .75rem;
    border-top: 1px solid var(--prog-border);
    font-size: .8rem;
    gap: .5rem;
}

.prog-card__price {
    font-weight: 700;
    color: var(--prog-text);
    display: flex;
    align-items: center;
}

.prog-card__price.is-gratis {
    color: #16a34a;
}

.prog-card__vagas {
    display: flex;
    align-items: center;
    gap: .2rem;
    background: #f3f4f6;
    border-radius: var(--prog-radius-pill);
    padding: .22rem .6rem;
    font-size: .75rem;
    color: var(--prog-muted);
    font-weight: 500;
    white-space: nowrap;
}


/* ── 7. Skeleton loading ─────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.prog-skeleton {
    border-radius: var(--prog-radius-card);
    overflow: hidden;
    background: var(--prog-card-bg);
    box-shadow: var(--prog-shadow-sm);
}

.prog-skeleton__media {
    aspect-ratio: 16/9;
    background: linear-gradient(90deg, #e8eaed 25%, #f4f6f9 50%, #e8eaed 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
}

.prog-skeleton__body { padding: 1rem 1.125rem 1.125rem; background: #fff; }

.prog-skeleton__line {
    height: .8rem;
    border-radius: 99px;
    background: linear-gradient(90deg, #e8eaed 25%, #f4f6f9 50%, #e8eaed 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    margin-bottom: .625rem;
}

.prog-skeleton__line--sm  { width: 40%; }
.prog-skeleton__line--lg  { width: 75%; margin-bottom: .875rem; height: 1rem; }


/* ── 8. Empty state ──────────────────────────────────────── */
.prog-empty {
    text-align: center;
    padding: 5rem 2rem;
    animation: sectionFadeIn .45s var(--prog-ease) both;
}

.prog-empty__icon {
    font-size: 3.5rem;
    color: #d1d5db;
    margin-bottom: 1.25rem;
    display: block;
}

.prog-empty__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--prog-text);
    margin-bottom: .5rem;
}

.prog-empty__text {
    color: var(--prog-muted);
    max-width: 420px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}


/* ── 9. Pagination ───────────────────────────────────────── */
.prog-pagination-wrap { padding: 2rem 0 1rem; }

.prog-pagination .page-link {
    border-radius: .5rem !important;
    border: 1.5px solid var(--prog-border);
    color: var(--prog-text);
    font-weight: 500;
    font-size: .875rem;
    padding: .45rem .875rem;
    transition: all var(--prog-dur) var(--prog-ease);
    background: #fff;
}

.prog-pagination .page-link:hover {
    background: #f3f4f6;
    border-color: var(--azul-sesc);
    color: var(--azul-sesc);
}

.prog-pagination .page-item.active .page-link {
    background: var(--azul-sesc);
    border-color: var(--azul-sesc);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 76, 153, .3);
}

.prog-pagination .page-item.disabled .page-link {
    opacity: .4;
    pointer-events: none;
}


/* ── 10. Transition overlay ao filtrar ───────────────────── */
#prog-main.is-loading {
    pointer-events: none;
}

#prog-main.is-loading .prog-section,
#prog-main.is-loading .prog-results-count {
    opacity: .35;
    transition: opacity .2s ease;
}


/* ── 11. Compat legacy (calendar picker) ─────────────────── */
#filtro-data .table-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }

.date-close-icon         { position: absolute; left: 14px; }
.date-close-icon.slide   { transform: translateX(35px); transition: all .3s; }


/* ── 12. Campo de busca ───────────────────────────────────── */
.prog-filter-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--prog-border);
    background: #fafbfd;
}

.prog-filter-search__icon {
    color: var(--prog-muted);
    font-size: .875rem;
    flex-shrink: 0;
}

.prog-filter-search__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: .9rem;
    font-weight: 400;
    color: var(--prog-text);
    outline: none;
    padding: .15rem 0;
    min-width: 0;
}

.prog-filter-search__input::placeholder { color: #9ca3af; }

.prog-filter-search__input.has-value {
    font-weight: 600;
    color: var(--azul-sesc);
}

.prog-filter-search__clear {
    background: none;
    border: none;
    padding: .2rem .3rem;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: color var(--prog-dur), background var(--prog-dur);
}

.prog-filter-search__clear:hover {
    color: #dc2626;
    background: #fee2e2;
}


/* ── 13. Atalhos de data ─────────────────────────────────── */
.prog-date-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .4rem;
}

.prog-date-shortcut {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 600;
    color: var(--azul-sesc);
    background: #e8f0fe;
    border: none;
    border-radius: var(--prog-radius-pill);
    padding: .18rem .55rem;
    cursor: pointer;
    transition: background var(--prog-dur), color var(--prog-dur);
    white-space: nowrap;
    line-height: 1.4;
}

.prog-date-shortcut:hover {
    background: var(--azul-sesc);
    color: #fff;
}


/* ── 14. Badge prazo inscrição no card ───────────────────── */
.prog-card__badge--prazo {
    bottom: .7rem;
    left: .7rem;
    backdrop-filter: blur(6px);
}

.prog-card__badge--prazo.is-urgente {
    background: rgba(217, 119, 6, .92);
    color: #fff;
}

.prog-card__badge--prazo.is-embreve {
    background: rgba(37, 99, 235, .88);
    color: #fff;
}

.prog-card__badge--prazo.is-encerrada {
    background: rgba(100, 116, 139, .85);
    color: #fff;
}


/* ── 15. Badge de unidade operacional ────────────────────── */
.prog-card__uop { line-height: 1; }

.prog-card__uop-badge {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .22rem .6rem;
    border-radius: var(--prog-radius-pill);
    border: 1.5px solid currentColor;
    /* cor padrão — sobrescrita pelas classes .uop-id-* */
    color: #64748b;
    background: #f1f5f9;
    border-color: #cbd5e1;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prog-card__uop-badge i { font-size: .65rem; flex-shrink: 0; opacity: .9; }

/* ─── Paleta por ID de unidade (cores SESC) ─── */

/* Azul institucional SESC */
.uop-id-1 { color: #004C99; background: #e6eef8; border-color: #b3cce8; }

/* Laranja */
.uop-id-2 { color: #c4730a; background: #fef3e2; border-color: #f9c975; }

/* Verde */
.uop-id-3 { color: #158c15; background: #e6f4e6; border-color: #8ecc8e; }

/* Vermelho/Cultura */
.uop-id-4 { color: #c0302e; background: #fdecea; border-color: #f5a5a5; }

/* Saúde / Azul-água */
.uop-id-5 { color: #0e7490; background: #e0f7fa; border-color: #7dcfde; }

/* Esporte / Amarelo (texto escuro p/ contraste) */
.uop-id-6 { color: #8a6b00; background: #fffbeb; border-color: #f6d860; }

/* Assistência / Lilás */
.uop-id-7 { color: #7b3ea0; background: #f5edfb; border-color: #d4a8e8; }

/* Educação / Azul médio */
.uop-id-8 { color: #3355bb; background: #eaedfc; border-color: #a3b4ef; }

/* Roxo */
.uop-id-9 { color: #5b21b6; background: #ede9fb; border-color: #c4b5f4; }

/* Rosa */
.uop-id-10 { color: #9d174d; background: #fce7f3; border-color: #f4a8cf; }


/* ── Seção de Eventos com inscrição aberta ──────────────── */
.prog-eventos-destaque {
    padding: 2rem 0 0;
    background: var(--prog-bg);
}

.prog-card--evento-destaque {
    position: relative;
}

.prog-card--evento-destaque::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--prog-radius-card);
    border: 2px solid transparent;
    background: linear-gradient(135deg, #e4a80033, #e4520033) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}