/* =============================================================
   simuladores/style.css
   Design system unificado. Tokens vem de tokens.css.
   Paleta: M3 corporativo (azul naval / verde / dourado).
   ============================================================= */
@import url('./tokens.css');

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    color: var(--md-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    background: var(--md-background);
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(10, 61, 98, 0.08), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(39, 174, 96, 0.06), transparent 50%);
    position: relative;
}

/* Vinheta sutil */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 61, 98, 0.08) 100%);
    z-index: 1;
}

/* Bokeh flutuante de fundo (institucional) */
.bokeh {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.bokeh__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    animation: float 16s ease-in-out infinite;
    will-change: transform;
}
.bokeh__orb--1 { width: 360px; height: 360px; background: rgba(10, 61, 98, 0.35); top: -80px; left: -80px; }
.bokeh__orb--2 { width: 420px; height: 420px; background: rgba(39, 174, 96, 0.25); top: 30%; right: -120px; animation-delay: -4s; }
.bokeh__orb--3 { width: 320px; height: 320px; background: rgba(201, 166, 107, 0.30); bottom: -100px; left: 30%; animation-delay: -8s; }
.bokeh__orb--4 { width: 260px; height: 260px; background: rgba(216, 228, 245, 0.80); top: 60%; left: 8%; animation-delay: -12s; }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.08); }
}

/* Topbar */
.topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-7) var(--sp-12);
    max-width: 1280px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.topbar__brand { display: flex; align-items: center; gap: var(--sp-4); }
.topbar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    color: var(--md-on-primary-container);
    background: var(--md-primary-container);
    box-shadow: var(--shadow-1);
}
.topbar__title {
    margin: 0;
    font-size: var(--fs-22);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: var(--lh-tight);
    color: var(--md-on-surface);
}
.topbar__subtitle {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-13);
    color: var(--md-on-surface-variant);
}
.topbar__search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-5);
    min-width: 320px;
    height: 48px;
    border-radius: var(--r-pill);
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
    border: 1px solid transparent;
    transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.topbar__search:focus-within {
    border-color: var(--md-primary);
    background: var(--md-surface);
    box-shadow: 0 0 0 4px rgba(10, 61, 98, 0.14);
}
.topbar__search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--md-on-surface);
    font: inherit;
    font-size: var(--fs-14);
    min-width: 0;
}
.topbar__search input::placeholder { color: var(--md-on-surface-variant); }

/* Grid de cards */
.grid {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--sp-2) var(--sp-12) var(--sp-16);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-5);
}

/* Card */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--md-outline-variant);
    box-shadow: var(--shadow-1);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
    overflow: hidden;
    isolation: isolate;
}
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(10, 61, 98, 0.06), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease);
    z-index: -1;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
    border-color: rgba(10, 61, 98, 0.40);
    background: rgba(255, 255, 255, 0.92);
}
.card:hover::after { opacity: 1; }
.card:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--md-primary-container), var(--shadow-3);
    border-color: var(--md-primary);
}
.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    box-shadow: var(--shadow-1);
}
.card__body { flex: 1; min-width: 0; }
.card__title {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: var(--lh-snug);
    color: var(--md-on-surface);
}
.card__desc {
    margin: 0;
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
    color: var(--md-on-surface-variant);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card__path {
    display: inline-block;
    margin-top: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--md-on-primary-container);
    background: var(--md-primary-container);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.card__cta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    color: var(--md-primary);
    margin-top: var(--sp-1);
}
.card__cta svg { transition: transform var(--dur-base) var(--ease); }
.card:hover .card__cta svg { transform: translateX(4px); }
.card.is-hidden { display: none; }
.card__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.card__pill {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.card__pill--off {
    background: var(--md-error-container);
    color: var(--md-on-error-container);
}
.card__meta {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}
.card__price {
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    color: var(--md-primary);
    letter-spacing: -0.01em;
}
.card__duration {
    font-size: var(--fs-12);
    color: var(--md-on-secondary-container);
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--md-secondary-container);
    font-weight: var(--fw-medium);
}
.card[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Empty state */
.empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px var(--sp-5);
    color: var(--md-on-surface-variant);
}
.empty p { margin: var(--sp-1) 0; }
.empty__hint { font-size: var(--fs-13); opacity: 0.7; }
.empty code {
    background: var(--md-surface-container);
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    font-size: var(--fs-12);
    font-family: var(--font-mono);
    color: var(--md-on-surface);
}

/* Footer */
.foot {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--sp-6);
    font-size: var(--fs-12);
    color: var(--md-on-surface-variant);
}

/* =============================================================
   ACESSO (acesso.php)
   ============================================================= */
.acesso-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-12);
    position: relative;
    z-index: 2;
}
.acesso-hero {
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-5);
    background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-hover) 50%, var(--md-primary-container) 100%);
    color: #fff;
    box-shadow: var(--shadow-2);
}
.acesso-hero h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-20); font-weight: var(--fw-semibold); }
.acesso-hero p  { margin: 0; opacity: .92; font-size: var(--fs-14); }
.acesso-hero .preco {
    display: inline-block;
    margin-top: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .20);
    font-weight: var(--fw-bold);
    font-size: var(--fs-13);
    backdrop-filter: blur(4px);
}
.acesso-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-1);
}
.acesso-card h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.acesso-card .sub { color: var(--md-on-surface-variant); font-size: var(--fs-13); margin: 0 0 var(--sp-4); line-height: var(--lh-normal); }
.acesso-card p  { color: var(--md-on-surface-variant); font-size: var(--fs-13); margin: 0 0 var(--sp-3); line-height: var(--lh-normal); }
.acesso-card p b { color: var(--md-on-surface); }

.field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.field label { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--md-on-surface-variant); }
.field input {
    font: inherit;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--r-sm);
    background: #fff;
    outline: 0;
    color: var(--md-on-surface);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 4px rgba(10, 61, 98, .14); }
.input-token {
    font-family: var(--font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    text-align: center;
}

.btn-cta {
    display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
    background: var(--md-primary);
    color: var(--md-on-primary);
    border: 0;
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-5);
    font: inherit; font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn-cta:hover { background: var(--md-primary-hover); }
.btn-cta:active { transform: translateY(1px); }
.btn-cta:disabled { opacity: .55; cursor: progress; }

.btn-ghost {
    background: transparent;
    color: var(--md-primary);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4);
    font: inherit; font-weight: var(--fw-semibold);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-ghost:hover { background: var(--md-surface-container); border-color: var(--md-primary); }

.btn-secondary {
    display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
    background: var(--md-secondary);
    color: var(--md-on-secondary);
    border: 0;
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-5);
    font: inherit; font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-secondary:hover { background: var(--md-secondary-hover); }

.pix-grid { display: grid; gap: var(--sp-5); grid-template-columns: 220px 1fr; align-items: start; }
@media (max-width: 560px) { .pix-grid { grid-template-columns: 1fr; } }
.pix-grid img { width: 220px; height: 220px; border-radius: var(--r-sm); border: 1px solid var(--md-outline-variant); }
.pix-info ol { margin: 0 0 var(--sp-4) var(--sp-4); padding: 0; color: var(--md-on-surface-variant); line-height: var(--lh-relaxed); font-size: var(--fs-14); }
.pix-info ol b { color: var(--md-on-surface); }
.pix-info .copia {
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    word-break: break-all;
    color: var(--md-on-surface);
    margin: 0 0 var(--sp-3);
}
.pix-info .copia b { color: var(--md-primary); }

.status-pill {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-pill.pendente { background: var(--md-warning-tint); color: var(--md-on-tertiary-container); }
.status-pill.pago     { background: var(--md-success-tint); color: var(--md-on-secondary-container); }
.status-pill.expirado { background: var(--md-error-container); color: var(--md-on-error-container); }

.token-display { display: flex; gap: var(--sp-2); align-items: stretch; margin: var(--sp-3) 0; }
.token-display input {
    flex: 1; font-family: var(--font-mono); font-size: 28px; font-weight: var(--fw-bold);
    letter-spacing: .32em; text-align: center; padding: var(--sp-4) var(--sp-4); text-transform: uppercase;
    background: #fff;
    border: 2px solid var(--md-primary);
    border-radius: var(--r-md);
    color: var(--md-primary);
    cursor: pointer;
}
.token-display button {
    padding: 0 var(--sp-4);
    border-radius: var(--r-sm);
    border: 0;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease);
}
.token-display button:hover { filter: brightness(0.95); }

.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); margin-bottom: var(--sp-4); font-size: var(--fs-14); border: 1px solid; }
.alert.err { background: var(--md-error-container); color: var(--md-on-error-container); border-color: #f1b6b0; }
.alert.ok  { background: var(--md-success-tint); color: var(--md-on-secondary-container); border-color: #a3d9b6; }
.alert b { font-weight: var(--fw-bold); }

.timer { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--md-primary); }

.voltar {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    color: var(--md-on-surface-variant);
    text-decoration: none;
    font-size: var(--fs-13);
    margin-bottom: var(--sp-4);
    transition: color var(--dur-fast) var(--ease);
}
.voltar:hover { color: var(--md-on-surface); }

.row-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* =============================================================
   SIMULADOR (simulador.php)
   ============================================================= */
.sim-bar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline-variant);
    box-shadow: var(--shadow-1);
}
.sim-bar__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); color: var(--md-on-surface); }
.sim-bar__brand-mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, var(--md-primary), var(--md-primary-hover));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-13); font-weight: var(--fw-bold);
}
.sim-bar__chip {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--md-success-tint);
    color: var(--md-on-secondary-container);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}
.sim-bar__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--md-secondary); }
.sim-bar__chip.warn { background: var(--md-warning-tint); color: var(--md-on-tertiary-container); }
.sim-bar__chip.warn .dot { background: var(--md-tertiary); }
.sim-bar__chip.crit { background: var(--md-error-container); color: var(--md-on-error-container); }
.sim-bar__chip.crit .dot { background: var(--md-error); }
.sim-bar__spacer { flex: 1; }
.sim-bar__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sim-bar__btn {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--md-surface-container);
    color: var(--md-on-surface);
    border: 1px solid transparent;
    font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}
.sim-bar__btn:hover { background: var(--md-surface-container-high); }
.sim-bar__btn.primary { background: var(--md-primary); color: var(--md-on-primary); }
.sim-bar__btn.primary:hover { background: var(--md-primary-hover); }
.sim-bar__btn.danger { background: var(--md-surface); color: var(--md-error); border-color: var(--md-error-container); }
.sim-bar__btn.danger:hover { background: var(--md-error-container); }
.sim-bar__token { font-family: var(--font-mono); font-size: 11.5px; color: var(--md-on-surface-variant); }
iframe.sim-frame {
    display: block; width: 100%; height: calc(100vh - 56px);
    border: 0; background: var(--md-surface);
}

@media (max-width: 640px) {
    .sim-bar { padding: var(--sp-2) var(--sp-2); gap: var(--sp-2); }
    .sim-bar__token { display: none; }
}

/* =============================================================
   DIAGNOSTICO / INSTALL (self-contained)
   ============================================================= */
.diag-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-12);
    position: relative;
    z-index: 2;
}
.diag-h1 {
    font-size: var(--fs-24);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--sp-2);
    color: var(--md-on-surface);
}
.diag-sub { color: var(--md-on-surface-variant); font-size: var(--fs-14); margin: 0 0 var(--sp-5); }
.diag-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-1);
}
.diag-card h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--md-on-surface); }
.diag-card h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--md-on-surface); }
.diag-card .ok    { color: var(--md-secondary); font-weight: var(--fw-semibold); }
.diag-card .fail  { color: var(--md-error); font-weight: var(--fw-semibold); }
.diag-card .warn  { color: var(--md-tertiary); font-weight: var(--fw-semibold); }
.diag-card pre {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--md-on-surface);
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--r-xs);
    padding: var(--sp-3);
    overflow: auto;
    margin: 0 0 var(--sp-2);
}
.diag-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.diag-table th, .diag-table td {
    text-align: left;
    padding: var(--sp-1) var(--sp-2);
    border-bottom: 1px solid var(--md-outline-variant);
    font-family: var(--font-mono);
}
.diag-table th { color: var(--md-on-surface-variant); font-weight: var(--fw-semibold); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.04em; }
.diag-table td { color: var(--md-on-surface); }

/* =============================================================
   Responsivo geral
   ============================================================= */
@media (max-width: 720px) {
    .topbar { padding: var(--sp-5); }
    .grid   { padding: var(--sp-2) var(--sp-5) var(--sp-12); }
    .topbar__search { width: 100%; min-width: 0; }
    .topbar__title  { font-size: var(--fs-20); }
}

@media (prefers-reduced-motion: reduce) {
    .bokeh__orb { animation: none; }
    .card, .card__cta svg, .btn-cta, .btn-ghost, .topbar__search, .voltar { transition: none; }
}