:root {
    --color-primary: #0d3b66;
    --color-primary-light: #14507f;
    --color-primary-lighter: #1c6aa3;
    --color-accent: #ee964b;
    --color-bg: #f4f6f8;
    --color-card: #ffffff;
    --color-text: #1c2530;
    --color-muted: #667085;
    --color-border: #e1e5ea;
    --color-ok: #2e9e5b;
    --color-off: #98a2b3;
    --color-danger: #d64545;
    --color-warn: #e0a527;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

a { color: var(--color-primary); }

/* ---------- Auth ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--color-primary), var(--color-primary-light));
    padding: 16px;
}

.auth-card {
    background: var(--color-card);
    padding: 32px;
    border-radius: var(--radius);
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.auth-card h1 { margin: 0 0 4px; color: var(--color-primary); }
.subtitle { color: var(--color-muted); margin-top: 0; margin-bottom: 24px; }
.auth-footer { color: var(--color-muted); font-size: .8rem; margin: 24px 0 0; }
.auth-footer a { color: var(--color-muted); text-decoration: underline; }
.lang-switch { text-align: right; margin: 0 0 8px; font-size: .8rem; }
.lang-switch a { color: var(--color-muted); text-decoration: none; }
.lang-switch a.actiu { color: var(--color-primary); font-weight: 600; }

/* ---------- Peu de pàgina (app) ---------- */
.app-footer {
    text-align: center;
    color: var(--color-muted);
    font-size: .8rem;
    padding: 20px 16px 28px;
}
.app-footer a { color: var(--color-muted); text-decoration: underline; }

.inline-form { display: inline; }

.auth-card-640 { max-width: 640px; }
.auth-card-720 { max-width: 720px; }
.auth-card-760 { max-width: 760px; }
.text-left { text-align: left; }
.input-uppercase { text-transform: uppercase; }
.input-narrow { width: auto !important; max-width: 160px; margin-left: auto; }
.d-none { display: none !important; }
.mt-8 { margin-top: 8px; }
.ml-24 { margin-left: 24px; }
.pre-wrap-small { white-space: pre-wrap; font-size: .75rem; }

.checklist { display: flex; flex-direction: column; gap: 6px; }
.checklist-item { display: flex; align-items: flex-start; gap: 8px; font-weight: normal; }
.checklist-item input[type="checkbox"], .checklist-item input[type="radio"] { margin-top: 3px; width: auto; flex: none; }

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-primary);
    color: #fff;
    padding: 12px 20px;
    flex-wrap: wrap;
}

.topbar-brand { font-weight: 700; font-size: 1.2rem; }

.topbar-nav { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.topbar-nav a { color: #dfe9f5; text-decoration: none; padding: 4px 2px; }
.topbar-nav a:hover { color: #fff; text-decoration: underline; }

.topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar-user span { opacity: .9; }

.nav-dropdown { position: relative; }
.nav-dropdown summary {
    color: #dfe9f5;
    cursor: pointer;
    padding: 4px 2px;
    list-style: none;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary:hover, .nav-dropdown[open] summary { color: #fff; text-decoration: underline; }
.nav-dropdown summary::after { content: ' \25BE'; }
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--color-card);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    padding: 6px 0;
    min-width: 170px;
    z-index: 20;
}
.nav-dropdown-menu a {
    display: block;
    color: var(--color-text);
    padding: 8px 16px;
    text-decoration: none;
}
.nav-dropdown-menu a:hover { background: var(--color-bg); }

/* ---------- Layout ---------- */
.content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

h1 { color: var(--color-primary); }

/* ---------- Cards / panels ---------- */
.cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }

.card {
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 18px 24px;
    min-width: 160px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card h2 { margin: 0; font-size: 2rem; color: var(--color-primary); }
.card p { margin: 4px 0 0; color: var(--color-muted); }
.card-link { text-decoration: none; cursor: pointer; transition: box-shadow .15s; }
.card-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

.quick-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.quick-action-btn { padding: 14px 22px; font-size: 1rem; }

.panel {
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.panel-header h2 { margin: 0; flex: 1; font-size: 1.1rem; }

/* Fila amb un element alineat a l'esquerra i un altre a la dreta, p.ex. els
   botons "Descarregar"/"Eliminar" d'un registre de vol -- veure pilot/vol_detall.php. */
.fila-separada { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* Element (dt, boto o enllaç) que nomes mostra una icona, amb el text
   accessible via aria-label/title -- en tocar-lo, un petit script substitueix
   momentaniament la icona pel text (veure pilot/vol_detall.php), perque
   funcioni tambe al mobil, on el title no es veu en tocar. */
.icona-etiqueta { cursor: pointer; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { font-weight: 600; font-size: .9rem; }
.form input, .form select, .form textarea {
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
}
/* Un checkbox/radio solt dins un <label> (p.ex. "<label><input type=checkbox> text</label>")
   no ha d'heretar el width:100% de la regla anterior: el navegador centra la
   casella dins d'una capsa tan ampla i el text passa a la línia de sota. */
.form input[type="checkbox"], .form input[type="radio"] {
    width: auto;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; }
.form-inline { flex-direction: row; align-items: center; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
}

.checkpoint-row { padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.checkpoint-row label { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.checkpoint-row input[type=checkbox] { width: 20px; height: 20px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: .95rem;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background: var(--color-muted);
}
.btn-primary { background: var(--color-primary); }
.btn-secondary { background: var(--color-accent); }
.btn-danger { background: var(--color-danger); }
.btn-small { padding: 6px 12px; font-size: .85rem; }
.btn-pilot { background: var(--color-primary-lighter); }
.btn-club { background: var(--color-primary-light); }
.login-spacer-sm { height: 10px; }
.login-nou-row { display: flex; gap: 12px; }
.login-nou-row .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Table ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: .92rem;
}
.table th { color: var(--color-muted); font-weight: 600; }

/* Files desplegables al mòbil: les columnes marcades amb .col-secondary queden
   amagades per defecte en pantalles petites, i es despleguen fila a fila amb el
   botó +/- (afegit a la primera columna). A l'escriptori no hi ha cap canvi. */
.btn-expand-fila {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--color-ok);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
tr.row-expanded .btn-expand-fila { background: var(--color-danger); }
/* Nomes te sentit al mòbil (a l'escriptori ja es veuen totes les columnes) */
.table th.col-expand,
.table td.col-expand {
    display: none;
    width: 32px;
}

@media (max-width: 640px) {
    .table th.col-secondary,
    .table td.col-secondary {
        display: none;
    }
    .table th.col-expand,
    .table td.col-expand {
        display: table-cell;
    }
    .table tr.row-expanded td.col-secondary {
        display: block;
        border-bottom: none;
        padding: 3px 10px;
    }
    .table tr.row-expanded td.col-secondary::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--color-muted);
    }
    .table tr.row-expanded td.col-secondary:last-of-type {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--color-border);
    }
}

/* ---------- Badges / alerts ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-muted);
}
/* Variant sense text: nomes un cercle del color de l'estat (fes servir amb
   .badge-dot junt amb la classe de color habitual, p.ex. "badge badge-dot badge-aterrat") */
.badge-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    vertical-align: middle;
    /* Bootstrap defineix ".badge:empty{display:none}" (amaga qualsevol badge sense
       text) i aquest cercle és precisament un badge buit a propòsit -- cal forçar
       que es mostri igualment. */
    display: inline-block !important;
}
.estat-llegenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: .85rem;
    color: var(--color-muted);
    margin: 0 0 12px;
}
.estat-llegenda span { display: inline-flex; align-items: center; gap: 6px; }
.badge-ok, .badge-aterrat { background: var(--color-ok); }
.badge-off, .badge-cancelat { background: var(--color-off); }
.badge-en_curs, .badge-enlairament, .badge-moderada { background: var(--color-warn); }
.badge-planificat, .badge-documentacio { background: var(--color-primary-light); }
.badge-greu { background: var(--color-danger); }
.badge-lleu { background: var(--color-off); }
/* Fases concretes d'un vol (Vol::estatClasse()) -- un color per fase, no nomes
   per estat intern, perque "documentacio"/"enlairament"/"aterrat" en cobreixen
   diverses (veure Vol::estatDetall() a src/models/Vol.php). */
.badge-documentant { background: var(--color-primary-lighter); }
.badge-documentat { background: var(--color-primary); }
.badge-volant { background: var(--color-warn); }
.badge-dron_en_caixa { background: #1a6b3c; }

.alert { padding: 10px 14px; border-radius: 6px; font-size: .92rem; }
.alert-error { background: #fde8e8; color: #922; }
.alert-success { background: #e6f7ec; color: #1a6b3c; }
.alert-info { background: #e8f1fd; color: #1a4b8c; }
.alert-link { display: block; text-decoration: none; font-weight: 600; margin-bottom: 16px; }

.pagination { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* ---------- Dialegs modals ---------- */
dialog {
    border: none;
    border-radius: var(--radius);
    padding: 24px;
    max-width: 560px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
dialog::backdrop {
    background: rgba(15, 23, 33, .55);
}
dialog h2 {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 1.15rem;
}
dialog .form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.dialeg-centrat {
    text-align: center;
}
.dialeg-centrat .form-actions {
    justify-content: center;
}

/* ---------- Definition list (fitxa de nomes lectura) ---------- */
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.detail-list dt { font-weight: 600; color: var(--color-muted); }
.detail-list dd { margin: 0; }

/* Camps que copien el seu valor al portapapers en clicar (etiqueta o valor) --
   veure el diàleg "Validar notificació" a pilot/vol_detall.php. */
.detail-list-copiable dt[data-copiar], .detail-list-copiable dd[data-copiar] {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background-color .15s ease, color .15s ease;
}
.detail-list-copiable dt[data-copiar]:hover, .detail-list-copiable dd[data-copiar]:hover {
    background: var(--color-bg);
}
.detail-list-copiable dt[data-copiar].copiat, .detail-list-copiable dd[data-copiar].copiat {
    background: var(--color-ok);
    color: #fff;
}

.subseccio { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.subseccio h4 { margin: 0 0 6px; font-size: .95rem; color: var(--color-primary); }

/* ---------- Mapa de vol (Leaflet) ---------- */
.map-container {
    width: 100%;
    height: 320px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    margin: 8px 0;
    position: relative;
}
.map-fullscreen-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2147483647;
}
.map-container.map-small { height: 200px; }
.map-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.map-container:fullscreen,
.map-container:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

/* ---------- Fotos del vol ---------- */
.foto-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.foto-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.foto-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    display: block;
}
.catalog-thumb-small { width: 48px; height: 48px; }
.catalog-thumb-preview { width: 160px; height: 160px; }

.llista-fitxers { list-style: none; padding: 0; margin: 8px 0; }
.llista-fitxers li { padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.llista-fitxers li:last-child { border-bottom: none; }

/* Input de fitxer natiu amagat visualment (pero no display:none, perque un
   <label for="..."> el pugui seguir activant en tots els navegadors) -- es
   mostra en el seu lloc el <label class="btn"> amb icona. */
.input-fitxer-amagat {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.previsualitzacio-fitxers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.previsualitzacio-fitxers:empty { display: none; }
.previsualitzacio-fitxers .foto-thumb { width: 72px; height: 72px; }
.fitxer-seleccionat {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: .85rem;
}

.foto-item-eliminable { position: relative; width: 90px; height: 90px; }
.foto-item-eliminable img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    display: block;
}
.btn-eliminar-foto {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.botons-foto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Nomes per a la pagina de prova amb DataTables (Fase 1) */
.dt-full-width { width: 100%; }

/* ---------- Codis QR de comprovació (Sede Electrónica AESA) ---------- */
.qr-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    width: 88px;
    cursor: pointer;
}
.qr-item:hover { border-color: var(--color-primary); }
.qr-canvas { line-height: 0; }
.qr-etiqueta { font-weight: 600; margin: 6px 0 0; font-size: .88rem; }
.qr-canvas-gran { display: flex; justify-content: center; line-height: 0; margin: 12px 0; cursor: pointer; border-radius: 8px; transition: opacity .15s ease; }
.qr-canvas-gran:hover, .qr-canvas-gran:focus-visible { opacity: .8; }

/* ---------- Planificar vol (pilot/planificar.php i informes desats al detall del vol) ---------- */
.content:has(.pl-app) { max-width: 1400px; }
.pl-app { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 16px; align-items: start; }
.pl-side { min-width: 0; }
.pl-mapa-col { position: sticky; top: 12px; }
#pl-mapa {
    height: 78vh;
    min-height: 420px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    z-index: 0;
}
.pl-fila { display: flex; gap: 10px; }
.pl-fila > * { flex: 1; min-width: 0; }
.pl-mut { color: var(--color-muted); font-size: .8rem; }
.pl-card {
    margin: 8px 0;
    padding: 8px 12px;
    border-left: 4px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
}
.pl-card h3 { margin: 0 0 4px; font-size: .95rem; }
.pl-card p { margin: 4px 0; }
.pl-card ol { margin: 4px 0 8px; padding-left: 20px; }
.pl-card .pl-msg { color: var(--color-muted); font-size: .8rem; white-space: pre-wrap; }
.pl-red { background: #fdecec; border-color: var(--color-danger); }
.pl-amb { background: #fff4e0; border-color: #a15c00; }
.pl-grn { background: #e9f6ea; border-color: var(--color-ok); }
.pl-gry { background: var(--color-bg); border-color: var(--color-border); }
.pl-avisos {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: .78rem;
}
.pl-avisos p { margin: 4px 0; }
.pl-desat { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border); }
/* Mapa de planificacio a pantalla completa (el boto el mou volsiuAttachFullscreen dins del mapa) */
#pl-mapa:fullscreen,
#pl-mapa:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    border-radius: 0;
}
.pl-fs-avis {
    display: none;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    align-items: center;
    gap: 10px;
    max-width: 90%;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    font-size: .9rem;
}
#pl-mapa:fullscreen .pl-fs-avis:not(.d-none),
#pl-mapa:-webkit-full-screen .pl-fs-avis:not(.d-none) { display: flex; }
@media (max-width: 900px) {
    .pl-app { grid-template-columns: minmax(0, 1fr); }
    .pl-mapa-col { position: static; order: -1; }
    #pl-mapa { height: 45vh; min-height: 300px; }
}