:root {
    --cpa-navy: #0A1C36;
    --cpa-navy-deep: #050E1C;
    --cpa-blue: #0052CC;
    --cpa-cyan: #00A3FF;
    --cpa-gray-bg: #F2F5F9;
    --cpa-card-border: #E2E8F0;
    --cpa-text: #2D3748;
    --cpa-whatsapp: #25D366;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; }

body {
    background-color: var(--cpa-gray-bg);
    color: var(--cpa-text);
    background-image: radial-gradient(rgba(0, 82, 204, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--cpa-blue); }

/* ---- Mini nav (deliberately simpler than the main site: this is a support portal, not a marketing page) ---- */
.portal-nav {
    background: var(--cpa-navy);
    color: white;
    padding: 14px 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 3px solid var(--cpa-cyan);
}
.portal-nav .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
}
.portal-nav .brand .symbol {
    font-weight: 900;
    font-size: 18px;
    color: var(--cpa-cyan);
    border: 2px solid var(--cpa-cyan);
    padding: 2px 8px;
    border-radius: 6px;
}
.portal-nav .brand .title { font-weight: 800; font-size: 14px; letter-spacing: 0.5px; }
.portal-nav .brand .title span { display: block; font-size: 10px; color: var(--cpa-cyan); font-weight: 700; letter-spacing: 1.5px; }
.portal-nav .links { display: flex; gap: 18px; align-items: center; font-size: 13px; font-weight: 600; }
.portal-nav .links a { color: #CBD5E0; text-decoration: none; }
.portal-nav .links a:hover { color: var(--cpa-cyan); }
.portal-nav .links a.btn-nav {
    background: var(--cpa-cyan);
    color: var(--cpa-navy-deep);
    padding: 8px 16px;
    border-radius: 20px;
}

main { flex: 1; }

.container {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 5% 60px 5%;
}

.page-header { margin-bottom: 28px; }
.page-header .eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cpa-blue);
    text-transform: uppercase;
}
.page-header h1 {
    font-size: 28px;
    font-weight: 900;
    color: var(--cpa-navy);
    margin-top: 6px;
}
.page-header p { color: #718096; margin-top: 8px; font-size: 14px; }

/* ---- Cards / choice tiles on the home page ---- */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 10px;
}
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } }

.choice-card {
    background: white;
    border: 1px solid var(--cpa-card-border);
    border-radius: 14px;
    padding: 26px 22px;
    text-decoration: none;
    color: var(--cpa-text);
    box-shadow: 0 4px 14px rgba(10,28,54,0.05);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.choice-card:hover { transform: translateY(-3px); border-color: var(--cpa-blue); }
.choice-card .icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cpa-blue), var(--cpa-navy));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}
.choice-card h3 { font-size: 16px; font-weight: 800; color: var(--cpa-navy); margin-bottom: 6px; }
.choice-card p { font-size: 13px; color: #718096; line-height: 1.4; }

/* ---- Forms ---- */
.form-card {
    background: white;
    border: 1px solid var(--cpa-card-border);
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 4px 14px rgba(10,28,54,0.05);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--cpa-navy); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--cpa-card-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--cpa-text);
    background: #FBFCFE;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--cpa-blue);
    box-shadow: 0 0 0 3px rgba(0,82,204,0.12);
}
.field textarea { resize: vertical; min-height: 110px; }
.field .hint { font-size: 12px; color: #A0AEC0; margin-top: 4px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cpa-blue);
    color: white;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    padding: 12px 26px;
    border-radius: 26px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.btn:hover { background: var(--cpa-navy); }
.btn-whatsapp { background: var(--cpa-whatsapp); }

.alert {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 20px;
}
.alert-error { background: #FDECEC; color: #B42318; border: 1px solid #F5C2C0; }
.alert-success { background: #E7F8EF; color: #17663F; border: 1px solid #B7EBCD; }

/* ---- Ticket confirmation / status view ---- */
.ticket-code-box {
    background: var(--cpa-navy);
    color: white;
    border-radius: 14px;
    padding: 26px;
    text-align: center;
    margin-bottom: 24px;
}
.ticket-code-box .label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--cpa-cyan); font-weight: 700; }
.ticket-code-box .code { font-size: 30px; font-weight: 900; letter-spacing: 2px; margin-top: 6px; }

.status-pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ticket-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
@media (max-width: 640px) { .ticket-meta { grid-template-columns: 1fr; } }
.ticket-meta .item { background: var(--cpa-gray-bg); border-radius: 10px; padding: 12px 14px; }
.ticket-meta .item .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #718096; font-weight: 700; }
.ticket-meta .item .v { font-size: 14px; font-weight: 700; color: var(--cpa-navy); margin-top: 3px; }

.timeline { margin-top: 24px; }
.timeline-item {
    border-left: 2px solid var(--cpa-card-border);
    padding: 0 0 20px 20px;
    position: relative;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -6px; top: 2px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--cpa-blue);
}
.timeline-item .when { font-size: 11.5px; color: #A0AEC0; font-weight: 600; margin-bottom: 3px; }
.timeline-item .who { font-size: 12.5px; font-weight: 800; color: var(--cpa-navy); }
.timeline-item .note { font-size: 13.5px; color: var(--cpa-text); margin-top: 3px; }

/* ---- Admin ---- */
.admin-table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(10,28,54,0.05); }
.admin-table th, .admin-table td { text-align: left; padding: 12px 14px; font-size: 13.5px; border-bottom: 1px solid var(--cpa-card-border); }
.admin-table th { background: var(--cpa-navy); color: white; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; }
.admin-table tr:hover td { background: #F7FAFD; }
.admin-table a { text-decoration: none; font-weight: 700; }

.filters { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.filters a {
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 18px;
    background: white;
    border: 1px solid var(--cpa-card-border);
    color: var(--cpa-text);
}
.filters a.active { background: var(--cpa-navy); color: white; border-color: var(--cpa-navy); }

footer.portal-footer {
    background: var(--cpa-navy-deep);
    color: #A0AEC0;
    text-align: center;
    padding: 20px 5%;
    font-size: 12.5px;
    border-top: 3px solid var(--cpa-cyan);
}
footer.portal-footer strong { color: white; }