/**
 * Panamericana Cursos - Frontend CSS
 * 
 * Estilos para shortcodes e componentes renderizados via JS
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --pan-primary: #1a73e8;
    --pan-primary-hover: #1557b0;
    --pan-secondary: #5f6368;
    --pan-success: #34a853;
    --pan-warning: #fbbc04;
    --pan-error: #ea4335;
    --pan-bg: #ffffff;
    --pan-bg-light: #f8f9fa;
    --pan-border: #dadce0;
    --pan-text: #202124;
    --pan-text-light: #5f6368;
    --pan-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --pan-shadow-hover: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --pan-radius: 8px;
    --pan-transition: 0.2s ease;
}

/* ========================================
   Base Container
   ======================================== */
.pan-shortcode {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--pan-text);
}

.pan-loading {
    min-height: 100px;
}

.pan-error {
    padding: 16px;
    background: #fce8e6;
    border-radius: var(--pan-radius);
    color: var(--pan-error);
}

.pan-error-msg {
    padding: 12px 16px;
    background: #fce8e6;
    border-left: 4px solid var(--pan-error);
    color: var(--pan-error);
    margin: 8px 0;
}

/* ========================================
   Skeleton Loading
   ======================================== */
.pan-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: pan-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes pan-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pan-skeleton-image {
    width: 100%;
    height: 180px;
    border-radius: var(--pan-radius) var(--pan-radius) 0 0;
}

.pan-skeleton-title {
    height: 24px;
    width: 80%;
    margin: 16px 16px 8px;
}

.pan-skeleton-title-lg {
    height: 32px;
    width: 60%;
    margin-bottom: 16px;
}

.pan-skeleton-text {
    height: 14px;
    width: 100%;
    margin: 8px 16px;
}

.pan-skeleton-text-short {
    width: 60%;
}

.pan-skeleton-badge {
    display: inline-block;
    height: 24px;
    width: 80px;
    margin-right: 8px;
    border-radius: 12px;
}

.pan-skeleton-button {
    height: 44px;
    width: 160px;
    border-radius: var(--pan-radius);
}

.pan-skeleton-select {
    height: 44px;
    width: 100%;
    margin-bottom: 12px;
    border-radius: var(--pan-radius);
}

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

/* ========================================
   Cursos Grid
   ======================================== */
.pan-cursos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 8px 0;
}

.pan-cursos-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.pan-cursos-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.pan-cursos-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .pan-cursos-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Curso Card
   ======================================== */
.pan-curso-card {
    background: var(--pan-bg);
    border-radius: var(--pan-radius);
    box-shadow: var(--pan-shadow);
    overflow: hidden;
    transition: box-shadow var(--pan-transition), transform var(--pan-transition);
}

.pan-curso-card:hover {
    box-shadow: var(--pan-shadow-hover);
    transform: translateY(-2px);
}

.pan-curso-card__image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.pan-curso-card__content {
    padding: 16px;
}

.pan-curso-card__categoria {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pan-primary);
    background: rgba(26, 115, 232, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.pan-curso-card__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
    color: var(--pan-text);
}

.pan-curso-card__title a {
    color: inherit;
    text-decoration: none;
}

.pan-curso-card__title a:hover {
    color: var(--pan-primary);
}

.pan-curso-card__info {
    font-size: 14px;
    color: var(--pan-text-light);
    margin-bottom: 16px;
}

.pan-curso-card__price {
    font-size: 16px;
    font-weight: 600;
    color: var(--pan-success);
}

.pan-curso-card__btn {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    background: var(--pan-primary);
    color: white;
    border: none;
    border-radius: var(--pan-radius);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--pan-transition);
}

.pan-curso-card__btn:hover {
    background: var(--pan-primary-hover);
    color: white;
}

/* ========================================
   Curso Detalhe
   ======================================== */
.pan-curso-detalhe {
    padding: 24px;
}

.pan-curso-detalhe__title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--pan-text);
}

.pan-curso-detalhe__description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--pan-text-light);
    margin-bottom: 24px;
}

.pan-curso-detalhe__info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.pan-info-item {
    padding: 16px;
    background: var(--pan-bg-light);
    border-radius: var(--pan-radius);
}

.pan-info-item__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pan-text-light);
    margin-bottom: 4px;
}

.pan-info-item__value {
    font-size: 18px;
    font-weight: 600;
    color: var(--pan-text);
}

/* ========================================
   Inscricao Form
   ======================================== */
.pan-inscricao {
    padding: 20px;
    background: var(--pan-bg-light);
    border-radius: var(--pan-radius);
}

.pan-inscricao__select-group {
    margin-bottom: 16px;
}

.pan-inscricao__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pan-text-light);
    margin-bottom: 6px;
}

.pan-inscricao__select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--pan-border);
    border-radius: var(--pan-radius);
    font-size: 14px;
    background: var(--pan-bg);
    color: var(--pan-text);
    cursor: pointer;
    transition: border-color var(--pan-transition);
}

.pan-inscricao__select:focus {
    outline: none;
    border-color: var(--pan-primary);
}

.pan-inscricao__select:disabled {
    background: #f0f0f0;
    cursor: not-allowed;
}

/* ========================================
   Botão de Inscrição
   ======================================== */
.pan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--pan-radius);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--pan-transition);
}

.pan-btn--primary {
    background: var(--pan-primary);
    color: white;
}

.pan-btn--primary:hover {
    background: var(--pan-primary-hover);
    color: white;
}

.pan-btn--secondary {
    background: var(--pan-secondary);
    color: white;
}

.pan-btn--outline {
    background: transparent;
    border: 2px solid var(--pan-primary);
    color: var(--pan-primary);
}

.pan-btn--outline:hover {
    background: var(--pan-primary);
    color: white;
}

.pan-btn--disabled {
    background: var(--pan-border);
    color: var(--pan-text-light);
    cursor: not-allowed;
    pointer-events: none;
}

.pan-btn--full-width {
    width: 100%;
}

.pan-btn--small {
    padding: 10px 20px;
    font-size: 13px;
}

.pan-btn--large {
    padding: 18px 36px;
    font-size: 17px;
}

.pan-btn--loading {
    position: relative;
    color: transparent;
}

.pan-btn--loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: pan-spin 0.8s linear infinite;
}

@keyframes pan-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Lista de Cursos (Layout List)
   ======================================== */
.pan-cursos-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pan-curso-list-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--pan-bg);
    border-radius: var(--pan-radius);
    box-shadow: var(--pan-shadow);
}

.pan-curso-list-item__image {
    width: 200px;
    height: 140px;
    object-fit: cover;
    border-radius: var(--pan-radius);
    flex-shrink: 0;
}

.pan-curso-list-item__content {
    flex: 1;
}

@media (max-width: 600px) {
    .pan-curso-list-item {
        flex-direction: column;
    }

    .pan-curso-list-item__image {
        width: 100%;
    }
}

/* ========================================
   Estados de Status
   ======================================== */
.pan-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.pan-status--open {
    background: rgba(52, 168, 83, 0.1);
    color: var(--pan-success);
}

.pan-status--closed {
    background: rgba(234, 67, 53, 0.1);
    color: var(--pan-error);
}

.pan-status--soon {
    background: rgba(251, 188, 4, 0.1);
    color: var(--pan-warning);
}

/* ========================================
   Utilities
   ======================================== */
.pan-hidden {
    display: none !important;
}

.pan-fade-in {
    animation: pan-fadeIn 0.3s ease-out;
}

@keyframes pan-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pan-text-center {
    text-align: center;
}

.pan-mt-16 {
    margin-top: 16px;
}

.pan-mb-16 {
    margin-bottom: 16px;
}
/* ========================================
   Elementos Inline (Valores, Preços)
   ======================================== */
.pan-inline-data {
    display: inline;
}

.pan-inline-loading {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pan-dot-loading {
    display: inline-flex;
    gap: 3px;
}

.pan-dot-loading::before,
.pan-dot-loading::after,
.pan-dot-loading span {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--pan-text-light);
    border-radius: 50%;
    animation: pan-dotPulse 1.2s infinite ease-in-out;
}

.pan-dot-loading::before { animation-delay: 0s; }
.pan-dot-loading span { animation-delay: 0.2s; }
.pan-dot-loading::after { animation-delay: 0.4s; }

@keyframes pan-dotPulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.pan-inline-value {
    display: none;
    font-weight: inherit;
    color: inherit;
}

.pan-inline-value.pan-inline-error {
    color: var(--pan-error);
    font-style: italic;
}

/* Variações de estilo inline */
.pan-inline-data--bold .pan-inline-value {
    font-weight: 700;
}

.pan-inline-data--price .pan-inline-value {
    color: var(--pan-success);
    font-weight: 600;
}

.pan-inline-data--large .pan-inline-value {
    font-size: 1.25em;
}

/* ========================================
   Tabela de Preços
   ======================================== */
.pan-tabela-precos-container {
    margin: 16px 0;
}

.pan-tabela-precos-container .pan-loading {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pan-skeleton-row {
    height: 40px;
    border-radius: 4px;
}

.pan-tabela-precos {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--pan-bg);
    border-radius: var(--pan-radius);
    overflow: hidden;
    box-shadow: var(--pan-shadow);
}

.pan-tabela-precos thead {
    background: var(--pan-bg-light);
}

.pan-tabela-precos th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--pan-text-light);
    border-bottom: 2px solid var(--pan-border);
}

.pan-tabela-precos td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pan-border);
}

.pan-tabela-precos tbody tr:last-child td {
    border-bottom: none;
}

.pan-tabela-precos tbody tr:hover {
    background: var(--pan-bg-light);
}

.pan-tabela-precos tfoot {
    background: var(--pan-bg-light);
}

.pan-tabela-precos tfoot td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--pan-text-light);
    border-bottom: none;
    border-top: 2px solid var(--pan-border);
}

/* Tabela estilo compacta */
.pan-tabela-precos--compact th,
.pan-tabela-precos--compact td {
    padding: 10px 12px;
    font-size: 13px;
}

/* Tabela estilo highlight (destaque melhor opção) */
.pan-tabela-precos--highlight tbody tr.pan-destaque {
    background: rgba(26, 115, 232, 0.05);
}

.pan-tabela-precos--highlight tbody tr.pan-destaque td {
    font-weight: 600;
    color: var(--pan-primary);
}

/* Tabela extensão */
.pan-tabela-extensao th:first-child,
.pan-tabela-extensao td:first-child {
    width: 100px;
}

.pan-tabela-vazia {
    padding: 24px;
    text-align: center;
    color: var(--pan-text-light);
    font-style: italic;
}

/* ========================================
   Preço em Destaque
   ======================================== */
.pan-preco-destaque {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pan-preco-destaque__parcela {
    font-size: 24px;
    font-weight: 700;
    color: var(--pan-success);
}

.pan-preco-destaque__total {
    font-size: 14px;
    color: var(--pan-text-light);
}

.pan-preco-destaque__total span {
    text-decoration: line-through;
    margin-left: 8px;
    opacity: 0.7;
}

/* ========================================
   Data/Informações em Badge
   ======================================== */
.pan-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--pan-bg-light);
    border-radius: 20px;
    font-size: 13px;
    color: var(--pan-text);
}

.pan-info-badge__icon {
    width: 16px;
    height: 16px;
    color: var(--pan-primary);
}

.pan-info-badge__label {
    font-weight: 600;
    color: var(--pan-text-light);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 600px) {
    .pan-tabela-precos {
        font-size: 13px;
    }

    .pan-tabela-precos th,
    .pan-tabela-precos td {
        padding: 10px 12px;
    }
}

/* ========================================
   Simulador de Variação - Layout Panamericana
   ======================================== */

/* Wrapper principal - duas colunas */
.pan-simulador-wrapper {
    width: 100%;
    max-width: 700px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 768px) {
    .pan-simulador-wrapper {
        flex-direction: row;
    }
}

/* Coluna esquerda: Atributos */
.pan-simulador-atributos {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Grupo de atributo */
.pan-attribute-group {
    /* container */
}

.pan-attribute-title {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: #1e293b;
}

.pan-attribute-number {
    background: rgba(198, 45, 91, 0.1);
    color: #c62d5b;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    font-style: normal;
}

.pan-attribute-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Botão de opção */
.pan-simulador-btn {
    flex: 1 1 auto;
    min-width: 100px;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.3;
}

/* Botões com texto longo (campus) - duas linhas */
.pan-simulador-btn[data-atributo="campus"] {
    text-transform: none;
    font-size: 12px;
    letter-spacing: 0;
    min-width: 140px;
}

/* Mobile: botões ocupam largura total */
@media (max-width: 480px) {
    .pan-simulador-btn {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

.pan-simulador-btn:hover {
    border-color: #cbd5e1;
}

.pan-simulador-btn.active {
    border-color: #c62d5b;
    background: #c62d5b;
    color: #fff;
}

.pan-simulador-btn.disabled,
.pan-simulador-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #e2e8f0;
    color: #94a3b8;
    background: #f8fafc;
}

.pan-simulador-btn.disabled:hover,
.pan-simulador-btn:disabled:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
}

/* Coluna direita: Resumo */
.pan-simulador-resumo {
    width: 100%;
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .pan-simulador-resumo {
        width: 240px;
        flex-shrink: 0;
    }
}

.pan-resumo-header {
    /* top section */
}

.pan-resumo-label {
    font-size: 11px;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin: 0 0 8px;
    font-style: italic;
}

.pan-resumo-curso {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 16px;
    line-height: 1.4;
}

.pan-resumo-status {
    color: #c62d5b;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pan-resumo-info {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.pan-resumo-info li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pan-resumo-info svg {
    color: #22c55e;
}

.pan-resumo-footer {
    /* bottom section */
}

.pan-resumo-preco {
    font-size: 1.875rem;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 8px;
    font-style: italic;
    letter-spacing: -0.05em;
}

/* Bloco de preços detalhado (extensão) */
.pan-resumo-precos {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.pan-resumo-precos p {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.pan-resumo-precos p:last-child {
    margin-bottom: 0;
}

.pan-resumo-precos .pan-preco-parcelas {
    font-size: 15px;
}

.pan-resumo-precos .pan-preco-parcelas strong {
    color: #c62d5b;
    font-size: 18px;
}

.pan-resumo-precos .pan-preco-avista {
    font-size: 14px;
    color: #555;
}

.pan-resumo-precos .pan-preco-avista strong {
    font-size: 20px;
    color: #0f172a;
    display: inline;
    margin-right: 4px;
}

.pan-resumo-precos .pan-preco-obs {
    font-size: 11px;
    color: #777;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    margin-top: 8px;
}

/* Botão Matricular */
.pan-btn-matricular {
    width: 100%;
    padding: 16px;
    background: #c62d5b;
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-style: italic;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 10px 15px -3px rgba(198, 45, 91, 0.3);
    transition: all 0.2s ease;
    margin-top: 8px;
}

.pan-btn-matricular:hover:not(:disabled) {
    background: #991b45;
}

.pan-btn-matricular:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pan-btn-matricular.pan-estado-fechada {
    background: #94a3b8;
    box-shadow: none;
}

.pan-btn-matricular.pan-estado-carregando {
    background: #64748b;
}

.pan-aviso-selecao {
    color: #c62d5b;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 12px;
}

.pan-status-msg {
    margin-top: 12px;
    padding: 10px;
    background: #fef2f2;
    border-radius: 6px;
    font-size: 12px;
    color: #991b1b;
    text-align: center;
}

/* Lista de seleções no resumo */
.pan-resumo-selecoes {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 13px;
    color: #475569;
}

.pan-resumo-selecoes li {
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
}

.pan-resumo-selecoes li:last-child {
    border-bottom: none;
}

.pan-resumo-selecoes li strong {
    color: #334155;
    font-weight: 600;
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.pan-selecao-vazia {
    color: #94a3b8;
    font-style: italic;
    font-size: 12px;
    border-bottom: none !important;
}

/* Badge de matrícula online */
.pan-resumo-matricula {
    background: #dcfce7;
    color: #166534;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

/* ========================================
   Antigos estilos (compatibilidade)
   ======================================== */