@font-face {
    font-family: "Gadeg";
    src: url("/static/fonts/Gadeg-RegPersonal.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-deep: #0A0F1A;
    --bg-panel: #121A2B;
    --bg-raised: #1A2438;
    --border: #253150;
    --text-primary: #E8ECF6;
    --text-muted: #8A96B3;
    --accent-amber: #F0A93B;
    --accent-amber-dim: #7A5A24;
    --accent-cyan: #57D3D0;
    --accent-green: #4FBE8C;
    --accent-red: #E2584C;
    --font-ui: "IBM Plex Sans", -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --radius: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-deep);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(87, 211, 208, 0.06), transparent 40%),
        radial-gradient(circle at 85% 10%, rgba(240, 169, 59, 0.06), transparent 40%);
    color: var(--text-primary);
    font-family: var(--font-ui);
    min-height: 100vh;
}

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent-amber);
    outline-offset: 2px;
}

/* --- Topbar: the signature element - a tail-plate mark + status strip --- */
.topbar {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 24px;
    height: 60px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-mark {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--bg-deep);
    background: var(--accent-amber);
    border-radius: 4px;
    padding: 4px 8px;
}
.topbar-title { font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.topbar-logo {
    font-family: "Gadeg", var(--font-ui);
    font-size: 26px;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.topbar-nav { display: flex; gap: 4px; flex: 1; }
.topbar-nav a {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius);
}
.topbar-nav a:hover { color: var(--text-primary); text-decoration: none; background: var(--bg-raised); }
.topbar-nav a.active { color: var(--accent-amber); background: rgba(240, 169, 59, 0.1); }

/* --- ADM nav dropdown: groups the admin-only pages under one "ADM" button --- */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
    font-family: var(--font-ui);
    color: var(--text-muted);
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-dropdown-trigger:hover { color: var(--text-primary); background: var(--bg-raised); }
.nav-dropdown-trigger.active { color: var(--accent-amber); background: rgba(240, 169, 59, 0.1); }
.nav-dropdown-caret { font-size: 10px; line-height: 1; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 20;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: var(--radius);
}
.nav-dropdown-menu a:hover { color: var(--text-primary); text-decoration: none; background: var(--bg-raised); }
.nav-dropdown-menu a.active { color: var(--accent-amber); background: rgba(240, 169, 59, 0.1); }
.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.user-name { font-weight: 500; }
.link-muted { color: var(--text-muted); font-size: 13px; }

.badge {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--accent-cyan);
}

/* --- Layout --- */
.page { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
.page-auth {
    max-width: 420px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
}

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.subtitle { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; }

/* --- Forms --- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
    width: 100%;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 14px;
}
.field textarea { font-family: var(--font-mono); resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-cyan); outline: none; }

.btn {
    display: inline-block;
    background: var(--accent-amber);
    color: var(--bg-deep);
    border: none;
    border-radius: var(--radius);
    padding: 10px 18px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}
.btn:hover { background: #f5b855; text-decoration: none; }
.btn-secondary { background: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border); width: auto; padding: 6px 12px; font-size: 13px; }
.btn-danger { background: var(--accent-red); color: #fff; width: auto; padding: 6px 12px; font-size: 13px; }
.btn-simbrief {
    display: inline-block;
    background: transparent;
    color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 12px;
    font-family: var(--font-mono);
    text-decoration: none;
    white-space: nowrap;
}
.btn-simbrief:hover { background: rgba(87, 211, 208, 0.12); text-decoration: none; }

.form-footer { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-muted); }

/* --- Flash messages --- */
.flash-stack { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.flash { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; border: 1px solid transparent; }
.flash-success { background: rgba(79, 190, 140, 0.12); border-color: var(--accent-green); color: var(--accent-green); }
.flash-error { background: rgba(226, 88, 76, 0.12); border-color: var(--accent-red); color: var(--accent-red); }

/* --- Status strip (dashboard) --- */
.status-strip { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.status-chip {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    min-width: 140px;
}
.status-chip .value { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--accent-cyan); }
.status-chip .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot.ok { background: var(--accent-green); }
.status-dot.warn { background: var(--accent-amber); }
.status-dot.error { background: var(--accent-red); }

/* --- Tables --- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
th a:hover { color: var(--accent-cyan); }
.flight-number-schedule {
    background: rgba(46, 204, 113, 0.18);
    color: #4ade80;
    border-radius: 4px;
    padding: 2px 7px;
    font-weight: 600;
}
.rating-badge {
    display: inline-block;
    min-width: 52px;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
tr:hover td { background: var(--bg-raised); }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.toolbar select { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius); padding: 8px 10px; font-family: var(--font-mono); }

.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }

/* --- Profile --- */
/* No flex-wrap here on purpose - the passport photo must always stay
   beside the profile info, never drop to its own full-width row (which
   made it render as a huge, badly-proportioned band). It shrinks in
   place instead when space is tight - see .passport-thumb below. */
.profile-header { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 12px; }
.profile-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
/* Rank/patent badge (Comandante, Copiloto, etc.) - capped to roughly the
   same footprint as the "Editar foto" link below the avatar, never bigger
   than the avatar itself, however tall/wide the source image actually is.
   Pulled up over the bottom edge of the avatar photo (negative margin, on
   purpose - the app owner wants it overlapping the photo, not sitting in
   its own row below it) - comes after the avatar in the markup, so it
   paints on top of it where they overlap. */
.patent-badge { max-width: 96px; max-height: 32px; object-fit: contain; margin-top: -22px; position: relative; z-index: 1; }
.profile-edit-photo-form { display: none; flex-direction: column; gap: 6px; align-items: stretch; margin-top: 2px; width: 170px; }
.profile-edit-photo-form input { font-size: 12px; padding: 8px 10px; }
.profile-edit-photo-form button { font-size: 12px; padding: 6px 10px; }
.avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.avatar-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}
.avatar-mini {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    vertical-align: middle;
    margin-right: 8px;
}
.avatar-mini-placeholder {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
    margin-right: 8px;
}
/* Rank-1/2/3 avatar rings for the monthly ranking panels (ranking.html) -
   layered on top of .avatar-mini/.avatar-mini-placeholder, which is why
   these only override border-color/box-shadow rather than redefining the
   whole avatar. */
.rank-avatar-gold { border-color: #D4AF37; box-shadow: 0 0 0 1px #D4AF37; }
.rank-avatar-silver { border-color: #C0C0C0; box-shadow: 0 0 0 1px #C0C0C0; }
.rank-avatar-bronze { border-color: #CD7F32; box-shadow: 0 0 0 1px #CD7F32; }
.stat-row { display: flex; gap: 24px; margin-top: 10px; flex-wrap: wrap; }
/* A plain numeric stat-value and a .rating-badge pill (see profile.html's
   average-rating/landing stats) don't have the same natural line height -
   the pill's own padding makes it shorter, which pushed its stat-label
   up out of alignment with every plain-text stat next to it. Fixing
   .stat-value to a stable height + vertical-centering its content (via
   flex) makes every item - badge or plain text - line up on the exact
   same baseline regardless of what's inside. Centered horizontally too,
   so the label always sits centered under its value instead of drifting
   left/right when the two have different widths. */
.stat-row > div { display: flex; flex-direction: column; align-items: center; }
.stat-row .stat-value { display: flex; align-items: center; justify-content: center; min-height: 26px; font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--accent-cyan); }
.stat-row .stat-label { text-align: center; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* --- Flight cards (Últimos Vuelos) --- */
.flight-card-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.flight-card-carousel {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    flex: 1;
    scrollbar-width: thin;
}
.flight-card-carousel::-webkit-scrollbar { height: 6px; }
.flight-card-carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.flight-card-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flight-card-arrow:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.flight-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    flex: 0 0 300px;
    scroll-snap-align: start;
}
.flight-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.flight-card-pilot { display: flex; gap: 10px; align-items: flex-start; }
.flight-card-pilot-name { font-family: var(--font-ui); font-weight: 600; font-size: 14px; }
.flight-card-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.flight-card-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 0;
    font-family: var(--font-mono);
}
.flight-card-route .airport { text-align: center; }
.flight-card-route .airport .icao { font-size: 18px; font-weight: 700; color: var(--text-primary); display: block; }
.flight-card-route .airport .city { font-size: 11px; color: var(--text-muted); }
.flight-card-route .airport .time { font-size: 10px; color: var(--text-muted); }
.flight-card-route .arrow { color: var(--accent-cyan); font-size: 18px; }
.flight-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.flight-card-stats .stat { text-align: center; }
.flight-card-stats .stat span { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.flight-card-stats .stat strong { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.flight-card-aircraft-img { width: 100%; max-height: 110px; object-fit: contain; margin: 4px 0; }
.flight-card-footer { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: auto; padding-top: 8px; }

/* --- Tours --- */
.tours-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; }
.tours-search {
    flex: 1;
    min-width: 220px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 14px;
}
.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.tour-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s;
}
.tour-card:hover { border-color: var(--accent-cyan); text-decoration: none; }
.tour-card-image { width: 100%; height: 140px; object-fit: cover; background: var(--bg-raised); display: block; }
.tour-card-image-placeholder {
    width: 100%;
    height: 140px;
    background: var(--bg-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 13px;
}
.tour-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tour-card-title { font-weight: 600; font-size: 15px; margin: 0; }
.tour-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tour-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.tour-card-completed { color: var(--accent-green); font-weight: 600; }
.tour-card-expired { color: var(--accent-red); font-weight: 600; }

.tour-progress-track { background: var(--bg-raised); border-radius: 4px; height: 6px; overflow: hidden; margin: 8px 0; }
.tour-progress-fill { background: var(--accent-cyan); height: 100%; }
.tour-progress-fill.done { background: var(--accent-green); }

.tour-detail-header { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.tour-detail-image { width: 220px; height: 140px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-raised); flex-shrink: 0; }
.tour-detail-badge-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.tour-detail-badge-col img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
}
.tour-detail-badge-placeholder {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
.tour-detail-badge-col span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tour-detail-banner {
    background: rgba(79, 190, 140, 0.12);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-weight: 600;
}
.tour-body-markdown { line-height: 1.6; }
.tour-body-markdown p { margin: 0 0 12px; }
.tour-body-markdown a { color: var(--accent-cyan); }
.tour-body-markdown code { background: var(--bg-raised); padding: 2px 5px; border-radius: 3px; font-family: var(--font-mono); font-size: 13px; }
.tour-body-markdown pre { background: var(--bg-raised); padding: 12px; border-radius: var(--radius); overflow-x: auto; }
.tour-body-markdown blockquote { border-left: 3px solid var(--border); margin: 0 0 12px; padding-left: 12px; color: var(--text-muted); }

.tour-leg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tour-leg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: var(--font-mono);
}
.tour-leg-item.done { border-color: var(--accent-green); }
.tour-leg-item .tour-leg-route { flex: 1; font-size: 14px; }
.tour-leg-item .tour-leg-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.tour-leg-item.done .tour-leg-status { color: var(--accent-green); }
.tour-leg-item:not(.done) .tour-leg-status { color: var(--text-muted); }

.tour-manage-leg-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tour-manage-leg-row:last-child { border-bottom: none; }

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    width: 90px;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.badge-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--border); }
.badge-item-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.badge-item span { font-size: 11px; color: var(--text-muted); }

.passport-thumb {
    width: 500px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    cursor: pointer;
    display: block;
    flex-shrink: 1;
    min-width: 140px;
}
.passport-thumb-placeholder {
    display: flex;
    width: 500px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    align-items: center;
    justify-content: center;
    font-size: 96px;
    cursor: pointer;
    flex-shrink: 1;
    min-width: 140px;
}
.passport-cover {
    width: 140px;
    height: auto;
    aspect-ratio: 35 / 24;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; margin-top: 8px; }
.flag-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.flag-item img { width: 64px; height: auto; border-radius: 3px; background: var(--bg-raised); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.flag-item span { font-size: 11px; color: var(--text-muted); }
.flag-item .flag-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

.form-row { display: flex; gap: 16px; }
.form-row .field { flex: 1; }
.checkbox-field { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.checkbox-field input { width: auto; }
.leg-builder-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.leg-builder-row input { flex: 1; }
.leg-dates-inline { display: none; gap: 6px; }
#leg-rows.dates-enabled .leg-dates-inline { display: inline-flex; }

/* --- Centro de Operaciones: flip-card showcases (Nuestra Flota / Nuestros Pilotos) --- */
.ops-flip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.ops-flip-card {
    perspective: 1200px;
    height: 380px;
    cursor: pointer;
}
.ops-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.ops-flip-card.flipped .ops-flip-card-inner { transform: rotateY(180deg); }
.ops-flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
.ops-flip-back { transform: rotateY(180deg); align-items: stretch; text-align: left; }
.ops-edit-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    z-index: 1;
}
.ops-edit-btn:hover { color: var(--accent-amber); border-color: var(--accent-amber); text-decoration: none; }
.ops-category-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 0 var(--radius) 0 6px;
    background: var(--accent-cyan);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.ops-flip-image { width: 100%; height: 110px; object-fit: contain; margin-bottom: 10px; }
.ops-flip-image-placeholder {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.ops-pilot-avatar { width: 88px; height: 88px; margin-bottom: 10px; }
.ops-flip-title { font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.ops-flip-icao { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.ops-flip-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Most-flown aircraft type, historically - sits in the gap left by
   .ops-stat-row's margin-top: auto (which pushes the stat row to the
   bottom of the fixed-height flip card), so this fills what was empty
   space rather than growing the card. */
.ops-most-flown { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0; max-width: 100%; }
.ops-most-flown img { max-width: 100%; max-height: 130px; object-fit: contain; border-radius: 6px; }
.ops-most-flown span { font-size: 11px; color: var(--text-muted); text-align: center; }
.ops-stat-row { display: flex; gap: 16px; margin-top: auto; }
.ops-stat { text-align: center; }
.ops-stat span { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ops-stat strong { font-family: var(--font-mono); font-size: 14px; color: var(--accent-cyan); }
.ops-flip-hint { font-size: 10px; color: var(--text-muted); margin-top: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.ops-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 12px 0; overflow-y: auto; }
.ops-spec span { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ops-spec strong { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }

/* --- Public home page footer --- */
.site-footer { margin-top: 8px; padding-top: 32px; border-top: 1px solid var(--border); text-align: center; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; }
.footer-logos img { height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.footer-social-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; }
.footer-social-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.footer-social-links a { font-size: 14px; font-weight: 500; }
.footer-copyright { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin: 0 0 8px; }

/* --- Public home page hero (title/text flanked by two floating images,
   with an optional slower-floating cloud layer behind everything) --- */
.home-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 48px 24px 32px;
    margin-bottom: 24px;
}
.home-hero-bg {
    position: absolute;
    inset: -20px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.4;
    z-index: 0;
    animation: home-hero-float 9s ease-in-out infinite;
}
.home-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px 40px;
}
.home-hero-text {
    flex: 1 1 320px;
    min-width: 260px;
    max-width: 640px;
}
.home-hero-img {
    /* Shrinks (rather than the text column) when a custom size set from
       the admin panel doesn't fit the available width - the text column's
       min-width above always wins the fight for space first. */
    flex: 0 1 auto;
    flex-shrink: 1;
    min-width: 80px;
    width: 340px;
    max-width: 34vw;
    height: auto;
    object-fit: contain;
    animation: home-hero-float 6s ease-in-out infinite;
}
.home-hero-img-right { animation-duration: 7.5s; }
@keyframes home-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@media (max-width: 860px) {
    .home-hero-img { display: none; }
}

/* --- Home hero text-style admin controls (color/size/font/bold row) --- */
.home-style-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 16px;
}
.home-style-row .field { flex: 1; min-width: 130px; }
.home-style-bold { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding-bottom: 10px; }

/* --- Flight detail page (Historial > click a flight number) --- */
/* Stacked, not side-by-side: the stat row (dist/time/rating/revenue) sits
   as its own line below the flight info instead of floating off to the
   right with a big empty gap on wide screens. */
.vuelo-detalle-header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.vuelo-detalle-header .stat-row { padding-top: 12px; border-top: 1px solid var(--border); margin-top: 0; }
/* Photo pinned to the left edge, pilot tag pushed over to the right side
   of the row (not hugging the photo) so the row uses the panel's full
   width instead of leaving it empty past the tag. The flight number/date/
   route/aircraft block moved out of this row entirely - it's its own
   full-width line below, see .vuelo-detalle-flight-info. */
.vuelo-detalle-header-main { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
/* Compact pilot card - avatar + name + patent/role, no stats, no flip -
   a trimmed-down version of the 'Nuestros Pilotos' showcase card sized to
   fit next to the aircraft photo instead of taking up its own panel. */
.vuelo-detalle-pilot-tag { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.vuelo-detalle-pilot-tag-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--border); background: var(--bg-raised); flex-shrink: 0;
}
.vuelo-detalle-pilot-tag-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 16px; font-weight: 700;
}
.vuelo-detalle-pilot-tag-name { color: var(--text-primary); font-weight: 600; font-size: 14px; }
.vuelo-detalle-pilot-tag-role { color: var(--text-muted); font-size: 12px; margin-top: 1px; }
/* Flight number/date/route/aircraft - moved down into what used to be
   empty space below the (much taller, since the +200% resize) aircraft
   photo, instead of squeezed into the header-main row next to it. */
.vuelo-detalle-flight-info { padding-top: 12px; border-top: 1px solid var(--border); }
.vuelo-detalle-route { font-family: var(--font-mono); font-size: 22px; color: var(--text-primary); margin: 4px 0; }
.vuelo-detalle-route .arrow { color: var(--text-muted); margin: 0 8px; }
/* Aircraft type/tail photo - flies in from the upper-left on page load
   and settles next to the flight info, instead of just appearing static.
   No border/frame/crop: object-fit: contain + no fixed square so the
   whole aircraft shows instead of being cropped to fit a box. */
.vuelo-detalle-aircraft-photo {
    max-width: 450px; max-height: 270px; width: auto; height: auto;
    object-fit: contain; flex-shrink: 0;
    animation: vuelo-detalle-fly-in 2000ms ease-out;
}
@keyframes vuelo-detalle-fly-in {
    0% { opacity: 0; transform: translate(-56px, -20px) scale(0.85); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.vuelo-detalle-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) {
    .vuelo-detalle-grid { grid-template-columns: 1fr; }
}
.vuelo-detalle-map { width: 100%; height: 420px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-raised); overflow: hidden; }
/* Mapbox's popup is a plain white box - without this, the page's own dark-
   theme text color (light gray/white, set on body) cascades into it and
   makes the landing-stats text unreadable against that white background.
   !important + an unscoped fallback because mapbox-gl.css (loaded from
   the CDN, after this file) is out of our control and popups are
   positioned as a direct child of the map container, not always reachable
   through a single obvious selector. */
.vuelo-detalle-map .mapboxgl-popup-content,
.mapboxgl-popup-content { color: #000 !important; }
.vuelo-detalle-map-empty {
    width: 100%; height: 420px; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--bg-raised); display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px;
}
.vuelo-detalle-landing-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.vuelo-detalle-stat { flex: 1; min-width: 90px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; text-align: center; }
.vuelo-detalle-stat-value { font-family: var(--font-mono); font-size: 20px; color: var(--text-primary); }
.vuelo-detalle-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.vuelo-detalle-report-line { font-size: 12px; color: var(--text-muted); padding: 6px 0; border-top: 1px solid var(--border); }
.vuelo-detalle-report-line:first-child { border-top: none; }