:root{
  --tickets-bg:#f4f7fb;
  --tickets-card:#ffffff;
  --tickets-text:#14213d;
  --tickets-muted:#64748b;
  --tickets-border:#e2e8f0;
  --tickets-ok:#15803d;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(37,99,235,.09), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(108,92,231,.08), transparent 25%),
    var(--tickets-bg);
  color:var(--tickets-text);
}

body.no-scroll{overflow:hidden}

.tickets-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--tickets-border);
  box-shadow:0 6px 24px rgba(15,23,42,.05);
}

.tickets-header-inner{
  width:min(1100px, calc(100% - 32px));
  min-height:74px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand-link{display:inline-flex;align-items:center}
.tickets-logo{width:118px;max-height:54px;object-fit:contain}
.tickets-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.tickets-main{padding:34px 0 52px}
.tickets-container{width:min(1100px, calc(100% - 32px));margin:0 auto}

.tickets-hero{
  display:flex;
  align-items:center;
  gap:20px;
  padding:26px 28px;
  margin-bottom:20px;
  border:1px solid rgba(37,99,235,.14);
  border-radius:20px;
  background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(108,92,231,.06)), #fff;
  box-shadow:0 18px 45px rgba(15,23,42,.07);
}

.tickets-hero-icon{
  width:68px;
  height:68px;
  flex:0 0 68px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 25px rgba(37,99,235,.12);
  font-size:34px;
}

.tickets-kicker{
  display:block;
  margin-bottom:5px;
  color:#2563eb;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.tickets-hero h1{margin:0 0 7px;font-size:clamp(25px,4vw,36px);line-height:1.05}
.tickets-hero p{margin:0;max-width:720px;color:var(--tickets-muted);line-height:1.55}

.tickets-block{box-shadow:0 18px 45px rgba(15,23,42,.06)}

.tickets-help{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  align-items:center;
  padding:13px 15px;
  margin-bottom:14px;
  border:1px solid #bbf7d0;
  border-radius:12px;
  background:#f0fdf4;
  color:#166534;
  font-size:14px;
}

.tickets-empty{
  padding:42px 25px;
  text-align:center;
  background:#fff;
  border:1px solid var(--tickets-border);
  border-radius:20px;
  box-shadow:0 18px 45px rgba(15,23,42,.07);
}

.empty-icon{font-size:52px;margin-bottom:8px}
.tickets-empty h2{margin:0 0 10px;font-size:25px}
.tickets-empty p{max-width:620px;margin:0 auto;color:var(--tickets-muted);line-height:1.6}
.empty-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}

.tickets-footer{
  padding:26px 20px 34px;
  text-align:center;
  color:var(--tickets-muted);
  border-top:1px solid var(--tickets-border);
  background:#fff;
}

.tickets-footer img{opacity:.9}
.tickets-footer p{margin:7px 0 0;font-size:12px}

/* Spinner independente, caso main.css não esteja disponível durante carregamento */
.ld-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
}
.ld-modal.is-open{display:flex}
.ld-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.68);backdrop-filter:blur(3px)}
.ld-card{
  position:relative;
  z-index:1;
  width:min(300px, calc(100% - 34px));
  padding:25px;
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow:0 25px 70px rgba(0,0,0,.25);
}
.ld-logo{width:120px;max-height:65px;object-fit:contain;margin-bottom:14px}
.ld-spinner{
  width:38px;height:38px;margin:3px auto 12px;border:4px solid #e2e8f0;
  border-top-color:#2563eb;border-radius:50%;animation:ticketSpin .75s linear infinite;
}
.ld-text{margin:0;color:#475569;font-weight:700}
@keyframes ticketSpin{to{transform:rotate(360deg)}}






/* =========================================================
   BANNER DO USUÁRIO LOGADO
========================================================= */

.user-banner {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 18px 0;
    padding: 16px 18px;

    background: linear-gradient(
        135deg,
        #071126 0%,
        #0d1b38 100%
    );

    border: 1px solid rgba(255,255,255,.10);
    border-left: 4px solid #f6c600;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);
}


/* ÍCONE */

.user-banner-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f6c600;

    border-radius: 50%;
}

.user-banner-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: #071126;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* INFORMAÇÕES */

.user-banner-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    flex: 1;
}

.user-banner-label {
    margin-bottom: 2px;

    color: #94a3b8;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .8px;
}

.user-banner-info strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-banner-info > span:last-child {
    margin-top: 2px;

    color: #cbd5e1;

    font-size: 13px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* STATUS */

.user-banner-ok {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    background: rgba(16,185,129,.10);

    border: 1px solid rgba(16,185,129,.25);
    border-radius: 30px;

    color: #34d399;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}

.user-banner-dot {
    width: 7px;
    height: 7px;

    background: #10b981;

    border-radius: 50%;

    box-shadow: 0 0 8px rgba(16,185,129,.8);
}


/* MOBILE */

@media (max-width: 600px) {

    .user-banner {
        align-items: flex-start;
        padding: 14px;
    }

    .user-banner-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .user-banner-info strong {
        font-size: 15px;
    }

    .user-banner-ok {
        display: none;
    }
}






.ticket-generate-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: 100%;

    margin-top: 10px;
}


.ticket-emission-info {
    display: flex;
    align-items: flex-start;
    gap: 6px;

    max-width: 420px;

    margin-top: 7px;
    padding: 7px 10px;

    border-radius: 8px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;

    color: #64748b;

    font-size: 11px;
    line-height: 1.45;
}


.ticket-emission-info strong {
    color: #334155;
    font-weight: 800;
}


.ticket-emission-icon {
    color: #6366f1;
    font-size: 13px;
    flex-shrink: 0;
}




@media (max-width: 650px) {

    .ticket-generate-area {
        align-items: stretch;
    }

    .ticket-generate-area .btn {
        width: 100%;
    }

    .ticket-emission-info {
        max-width: none;
    }

}




@media (max-width:680px){
  .tickets-header-inner{width:min(100% - 20px, 1100px);min-height:68px}
  .tickets-logo{width:96px}
  .tickets-header-actions .btn:first-child{display:none}
  .tickets-main{padding-top:18px}
  .tickets-container{width:min(100% - 20px, 1100px)}
  .tickets-hero{align-items:flex-start;padding:20px 17px;border-radius:16px}
  .tickets-hero-icon{width:48px;height:48px;flex-basis:48px;border-radius:13px;font-size:25px}
  .tickets-help{align-items:flex-start;flex-direction:column}
}





.ld-modal {
    position: fixed;
    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 999999;

    padding: 20px;
}


.ld-modal.is-open {
    display: flex;
}


.ld-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(5, 8, 20, 0.82);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


.ld-card {
    position: relative;

    width: 100%;
    max-width: 420px;

    background: #ffffff;

    border-radius: 20px;

    padding: 25px 24px;

    text-align: center;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.35);

    animation:
        loadingCardIn .25s ease-out;
}


@keyframes loadingCardIn {

    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


.ld-logo {
    width: 120px;
    max-width: 45%;

    height: auto;

    margin-bottom: 15px;
}




.ld-status-icon {

    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 8px;
}


.ld-spinner {

    width: 44px;
    height: 44px;

    border-radius: 50%;

    border: 4px solid #e5e7eb;

    border-top-color: #0077ff;

    animation:
        ldSpin .8s linear infinite;

    will-change: transform;
}


@keyframes ldSpin {

    to {
        transform: rotate(360deg);
    }

}




.ld-success {

    display: none;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    place-items: center;

    background: #16a34a;

    color: #ffffff;

    font-size: 27px;
    font-weight: 900;

    animation:
        successPop .3s ease;
}


@keyframes successPop {

    0% {
        transform: scale(.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}




.ld-title {

    margin: 5px 0 6px;

    color: #0f172a;

    font-size: 20px;

    font-weight: 800;
}


.ld-text {

    margin: 0 0 18px;

    color: #475569;

    font-size: 14px;

    line-height: 1.5;

    min-height: 21px;
}




.ld-progress {

    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #e5e7eb;

    margin-bottom: 20px;
}


.ld-progress-bar {

    width: 5%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #0077ff,
            #2563eb
        );

    transition:
        width .4s ease;
}




.ld-steps {

    display: grid;

    gap: 9px;

    text-align: left;

    margin-top: 5px;
}


.ld-step {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 10px;

    border-radius: 9px;

    color: #94a3b8;

    font-size: 13px;

    transition:
        background .2s ease,
        color .2s ease;
}


.ld-step-icon {

    width: 20px;

    flex: 0 0 20px;

    text-align: center;

    font-weight: 900;
}


.ld-step.active {

    color: #2563eb;

    background: #eff6ff;

    font-weight: 700;
}


.ld-step.done {

    color: #16a34a;

    font-weight: 600;
}




.ld-warning {

    margin-top: 18px;

    padding: 10px 12px;

    border-radius: 10px;

    background: #fff8db;

    border: 1px solid #f5d565;

    color: #5f4b00;

    font-size: 12px;

    line-height: 1.45;
}


.no-scroll {
    overflow: hidden;
}




@media (max-width: 480px) {

    .ld-modal {
        padding: 14px;
    }

    .ld-card {

        max-width: 360px;

        padding: 21px 18px;

        border-radius: 17px;
    }

    .ld-logo {
        width: 105px;
    }

    .ld-title {
        font-size: 18px;
    }

    .ld-text {
        font-size: 13px;
    }

    .ld-step {
        font-size: 12.5px;
    }

}