:root {
  --bg: #08111f;
  --panel: #101d31;
  --panel-soft: #152640;
  --card: #ffffff;
  --text: #102033;
  --muted: #65758b;
  --line: #d9e2ef;
  --blue: #0f4c81;
  --blue-2: #0a84ff;
  --gold: #f5b942;
  --green: #2fb344;
  --red: #d92d20;
  --orange: #f97316;
  --white: #ffffff;
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
  --radius: 20px;
  --font-scale: 1;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at top left, #1d4f82 0%, #08111f 38%, #040914 100%);
  color: var(--text);
  font-size: calc(16px * var(--font-scale));
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 100vh;
}

.sidebar {
  padding: 22px;
  color: var(--white);
  border-right: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 17, 31, 0.82);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(15,76,129,0.95), rgba(10,132,255,0.52));
  box-shadow: var(--shadow);
}
.brand-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: rgba(255,255,255,0.18);
}
.brand-card h1 { margin: 0; font-size: 1.18rem; }
.brand-card p { margin: 4px 0 0; opacity: 0.86; font-size: 0.85rem; }

.nav-list { display: grid; gap: 10px; margin-top: 24px; }
.nav-btn {
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  transition: 0.2s ease;
}
.nav-btn:hover, .nav-btn.active {
  background: rgba(245,185,66,0.18);
  border-color: rgba(245,185,66,0.75);
  transform: translateX(3px);
}
.side-actions { display: grid; gap: 10px; margin-top: 28px; }
.file-btn { text-align: center; }

.main-content {
  padding: 24px;
  min-width: 0;
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  color: var(--white);
}
.eyebrow {
  margin: 0 0 4px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.topbar h2 { margin: 0; font-size: 2rem; }
.top-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.btn, .icon-btn {
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  transition: 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:hover, .icon-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn.primary { background: var(--blue-2); color: var(--white); }
.btn.warning { background: var(--gold); color: #162033; }
.btn.danger { background: var(--red); color: var(--white); }
.btn.success { background: var(--green); color: var(--white); }
.btn.ghost { background: rgba(255,255,255,0.1); color: var(--white); border: 1px solid rgba(255,255,255,0.18); }
.btn.soft { background: #eaf2ff; color: var(--blue); }
.btn.full { width: 100%; }
.icon-btn {
  width: 46px;
  min-width: 46px;
  height: 46px;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.18);
}

.view { display: none; }
.view.active { display: block; }

.grid { display: grid; gap: 16px; }
.grid.kpis { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.grid.two { grid-template-columns: 1.1fr 0.9fr; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.45);
  min-width: 0;
}
.card.dark {
  background: linear-gradient(135deg, var(--panel), var(--panel-soft));
  color: var(--white);
}
.card h3 { margin: 0 0 14px; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-head h3 { margin: 0; }

.kpi {
  background: linear-gradient(135deg, #ffffff, #eef6ff);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border-left: 8px solid var(--blue-2);
}
.kpi p { margin: 0 0 8px; color: var(--muted); font-weight: 800; }
.kpi strong { font-size: 2rem; display: block; }
.kpi.ok { border-left-color: var(--green); }
.kpi.yellow { border-left-color: var(--gold); }
.kpi.red { border-left-color: var(--red); }

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
  color: #111827;
  background: #e5e7eb;
  white-space: nowrap;
}
.status-chip.OK { background: #d1fae5; color: #065f46; }
.status-chip.AMARILLO { background: #fef3c7; color: #92400e; }
.status-chip.ROJO { background: #fee2e2; color: #991b1b; }
.status-chip.VENCIDO { background: #991b1b; color: #ffffff; }

.table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; background: var(--white); }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #f1f6fd; color: #1f3857; font-size: 0.82rem; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: #f8fbff; }
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.small-btn {
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  background: #eaf2ff;
  color: var(--blue);
}
.small-btn.danger { background: #fee2e2; color: #991b1b; }
.small-btn.warning { background: #fef3c7; color: #92400e; }

.alert-list { display: grid; gap: 12px; }
.alert-card {
  border: 1px solid var(--line);
  border-left: 8px solid var(--gold);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}
.alert-card.ROJO, .alert-card.VENCIDO { border-left-color: var(--red); }
.alert-card.OK { border-left-color: var(--green); }
.alert-card h4 { margin: 0 0 8px; }
.alert-card p { margin: 4px 0; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; }
.form-grid.full { grid-template-columns: 1fr; }
.field label { display: block; font-weight: 800; margin-bottom: 6px; color: #20324a; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid #cdd7e5;
  border-radius: 14px;
  padding: 11px 12px;
  background: #fff;
  color: var(--text);
}
.field textarea { min-height: 88px; resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 9, 20, 0.72);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}
.modal.hidden, .toast.hidden { display: none; }
.modal-card {
  width: min(920px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-head h3 { margin: 0; }
.modal .icon-btn { background: #edf2f7; color: #111827; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #111827;
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  z-index: 70;
  font-weight: 800;
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 26px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .nav-list { grid-template-columns: repeat(2, 1fr); }
  .grid.kpis { grid-template-columns: repeat(2, 1fr); }
  .grid.two { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .main-content { padding: 14px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .nav-list, .grid.kpis, .form-grid { grid-template-columns: 1fr; }
  .sidebar { padding: 14px; }
  .topbar h2 { font-size: 1.45rem; }
}

.status-chip.VIGENTE { background: #d1fae5; color: #065f46; }
.status-chip.POR { background: #fef3c7; color: #92400e; }
.status-chip[class*="POR VENCER"] { background: #fef3c7; color: #92400e; }
.alert-card.VIGENTE { border-left-color: var(--green); }
.alert-card.POR { border-left-color: var(--gold); }

.aircraft-hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 18px;
  align-items: stretch;
  overflow: hidden;
}
.aircraft-photo-wrap {
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background: #dbe7f5;
}
.aircraft-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aircraft-identity h3 {
  margin: 0 0 14px;
  font-size: 2.2rem;
  color: var(--blue);
}
.eyebrow-dark {
  margin: 0 0 6px;
  color: #58708d;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 900;
}
.identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}
.identity-grid div {
  border: 1px solid #dbe4f0;
  background: #f8fbff;
  border-radius: 14px;
  padding: 12px;
}
.identity-grid span {
  display: block;
  color: #58708d;
  font-weight: 900;
  font-size: .78rem;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.identity-grid strong {
  display: block;
  color: #0f2238;
  font-size: 1rem;
}
@media (max-width: 900px) {
  .aircraft-hero { grid-template-columns: 1fr; }
  .aircraft-photo-wrap { min-height: 220px; }
  .identity-grid { grid-template-columns: 1fr; }
}

/* V7 compact layout: photo moved to sidebar */
.sidebar-aircraft-card {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
}
.sidebar-aircraft-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  display: block;
}
.sidebar-aircraft-meta {
  padding: 10px 12px 12px;
  display: grid;
  gap: 2px;
}
.sidebar-aircraft-meta strong {
  color: #fff;
  font-size: 1rem;
}
.sidebar-aircraft-meta span {
  color: rgba(255,255,255,0.76);
  font-size: .78rem;
  line-height: 1.25;
}
.aircraft-id-compact {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
}
.compact-title h3 {
  margin: 0;
  color: var(--blue);
  font-size: 2rem;
}
.identity-grid.compact {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}
.identity-grid.compact div {
  padding: 10px 12px;
}
.identity-grid.compact span {
  font-size: .72rem;
}
.identity-grid.compact strong {
  font-size: .95rem;
}
.compact-kpis .kpi {
  padding: 14px 16px;
  border-left-width: 7px;
}
.compact-kpis .kpi p {
  margin-bottom: 4px;
  font-size: .9rem;
}
.compact-kpis .kpi strong {
  font-size: 1.65rem;
}
@media (max-width: 1100px) {
  .aircraft-id-compact { grid-template-columns: 1fr; }
  .identity-grid.compact { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 680px) {
  .identity-grid.compact { grid-template-columns: 1fr; }
  .sidebar-aircraft-card img { height: 150px; }
}

/* V9: color status applied to aircraft information panel too */
.status-info-panel {
  border-left: 10px solid var(--green);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.status-info-panel.status-ok {
  border-left-color: var(--green);
  box-shadow: 0 18px 55px rgba(47, 179, 68, 0.14);
}
.status-info-panel.status-yellow {
  border-left-color: var(--gold);
  box-shadow: 0 18px 55px rgba(245, 185, 66, 0.18);
  background: linear-gradient(135deg, #ffffff, #fffaf0);
}
.status-info-panel.status-red {
  border-left-color: var(--red);
  box-shadow: 0 18px 55px rgba(217, 45, 32, 0.18);
  background: linear-gradient(135deg, #ffffff, #fff5f5);
}
.status-info-panel.status-ok .identity-grid.compact div {
  border-color: #b7e4c7;
}
.status-info-panel.status-yellow .identity-grid.compact div {
  border-color: #f5c542;
  background: #fff9e8;
}
.status-info-panel.status-red .identity-grid.compact div {
  border-color: #f5a3a3;
  background: #fff5f5;
}
.compact-title {
  display: grid;
  gap: 6px;
  align-content: start;
}

/* V11 central engine life panel */
.engine-life-panel {
  display: grid;
  grid-template-columns: 1.05fr 1.45fr 1.45fr 1fr 1fr;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #d5dce8;
  box-shadow: var(--shadow);
  background: #fff;
}
.engine-life-cell {
  padding: 16px 18px;
  min-height: 112px;
  border-right: 1px solid #d5dce8;
  display: grid;
  align-content: center;
  gap: 8px;
}
.engine-life-cell:last-child { border-right: none; }
.engine-life-cell span {
  font-weight: 900;
  letter-spacing: .03em;
  font-size: .92rem;
}
.engine-life-cell strong {
  display: block;
  font-size: 2.15rem;
  line-height: 1;
  font-weight: 900;
}
.engine-life-cell small { font-weight: 800; opacity: .78; }
.engine-life-cell.flight-date {
  background: #0a0f18;
  color: #fff;
}
.engine-life-cell.flight-date strong { font-size: 2.6rem; }
.engine-life-cell.remaining.good { background: #d1fae5; color: #064e3b; }
.engine-life-cell.remaining.warning { background: #ffb020; color: #3a2500; }
.engine-life-cell.remaining.danger { background: #c40000; color: #fff; }
.engine-life-cell.status.good { background: #cfe6bf; color: #244321; }
.engine-life-cell.status.warning { background: #ffb020; color: #3a2500; }
.engine-life-cell.status.danger { background: #c40000; color: #fff; }
.engine-life-panel.warning { border-color: #ffb020; }
.engine-life-panel.danger { border-color: #c40000; }
@media (max-width: 1100px) {
  .engine-life-panel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .engine-life-panel { grid-template-columns: 1fr; }
  .engine-life-cell { border-right: none; border-bottom: 1px solid #d5dce8; }
}


/* V13 swap sizes: top engine panel compact button-style, lower KPI cards promoted */
.engine-life-panel.compact-button-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 14px;
  border: none;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.engine-life-cell.button-like {
  min-height: 92px;
  border-right: none;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border-left: 7px solid #8bc7a5;
  padding: 14px 16px;
  align-content: start;
  gap: 6px;
}
.engine-life-cell.button-like span {
  font-size: .82rem;
}
.engine-life-cell.button-like strong {
  font-size: 1.55rem;
}
.engine-life-cell.button-like small {
  font-size: .82rem;
  min-height: 18px;
}
.engine-life-cell.flight-date.button-like {
  border-left-color: #1e5fd8;
  background: #0a0f18;
}
.engine-life-cell.remaining.good.button-like,
.engine-life-cell.status.good.button-like {
  border-left-color: #2fb344;
}
.engine-life-cell.remaining.warning.button-like,
.engine-life-cell.status.warning.button-like {
  border-left-color: #ff9f1a;
}
.engine-life-cell.remaining.danger.button-like,
.engine-life-cell.status.danger.button-like {
  border-left-color: #c40000;
}
.engine-life-actions {
  margin-top: auto;
  padding-top: 2px;
}
.mini-action {
  border: 0;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: .8rem;
  font-weight: 900;
  background: rgba(255,255,255,.72);
  color: #17365d;
  cursor: pointer;
}
.mini-action.dark {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
}
.promoted-kpis {
  grid-template-columns: repeat(4, minmax(190px, 1fr));
}
.promoted-kpis .kpi {
  background: #f8fbff;
  border: 1px solid #bfe2cc;
  border-left-width: 7px;
  min-height: 94px;
  padding: 18px 16px;
  box-shadow: none;
  border-radius: 16px;
}
.promoted-kpis .kpi p {
  font-size: .86rem;
  letter-spacing: .03em;
  text-transform: none;
}
.promoted-kpis .kpi strong {
  font-size: 1.35rem;
}
@media (max-width: 1200px) {
  .engine-life-panel.compact-button-row { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
}
@media (max-width: 900px) {
  .engine-life-panel.compact-button-row { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .promoted-kpis { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
}
@media (max-width: 680px) {
  .engine-life-panel.compact-button-row,
  .promoted-kpis { grid-template-columns: 1fr; }
  .engine-life-cell.button-like { min-height: 88px; }
}


/* V14 simplify controls and shrink engine-life cards */
.top-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.actions-dropdown {
  position: relative;
}
.dropdown-toggle {
  min-width: 128px;
}
.actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
  padding: 8px;
  display: grid;
  gap: 6px;
  z-index: 40;
}
.actions-menu.hidden {
  display: none;
}
.dropdown-item {
  border: 0;
  border-radius: 12px;
  background: #f7fafc;
  color: #17365d;
  padding: 11px 12px;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}
.dropdown-item:hover {
  background: #eaf2ff;
}
.engine-life-panel.compact-button-row {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
}
.engine-life-cell.button-like {
  min-height: 78px;
  padding: 12px 14px;
  gap: 4px;
  border-radius: 14px;
}
.engine-life-cell.button-like span {
  font-size: .78rem;
  line-height: 1.15;
}
.engine-life-cell.button-like strong {
  font-size: 1.05rem;
  line-height: 1.05;
}
.engine-life-cell.button-like small {
  font-size: .74rem;
  line-height: 1.2;
  opacity: .86;
}
.engine-life-actions {
  padding-top: 0;
}
.mini-action {
  padding: 6px 10px;
  font-size: .74rem;
  border-radius: 10px;
}
.promoted-kpis .kpi {
  min-height: 108px;
  padding: 20px 18px;
}
.promoted-kpis .kpi strong {
  font-size: 1.55rem;
}
@media (max-width: 1200px) {
  .engine-life-panel.compact-button-row { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}
@media (max-width: 900px) {
  .engine-life-panel.compact-button-row { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
}
@media (max-width: 680px) {
  .dropdown-toggle { min-width: 100%; }
  .actions-menu { left: 0; right: auto; min-width: 100%; }
}


/* V15 fine-tune top engine panel: smaller cards, larger text */
.engine-life-panel.compact-button-row {
  grid-template-columns: repeat(5, minmax(138px, 1fr));
  gap: 12px;
}
.engine-life-cell.button-like {
  min-height: 68px;
  padding: 10px 12px;
  gap: 3px;
  border-radius: 13px;
}
.engine-life-cell.button-like span {
  font-size: .84rem;
  line-height: 1.1;
}
.engine-life-cell.button-like strong {
  font-size: 1.72rem;
  line-height: 1;
}
.engine-life-cell.button-like small {
  font-size: .85rem;
  line-height: 1.15;
}
.engine-life-actions {
  margin-top: 2px;
}
.mini-action {
  padding: 5px 9px;
  font-size: .70rem;
  border-radius: 9px;
}
.engine-life-cell.status.button-like strong {
  font-size: 1.6rem;
}
@media (max-width: 1200px) {
  .engine-life-panel.compact-button-row { grid-template-columns: repeat(3, minmax(138px, 1fr)); }
}
@media (max-width: 900px) {
  .engine-life-panel.compact-button-row { grid-template-columns: repeat(2, minmax(138px, 1fr)); }
}
@media (max-width: 680px) {
  .engine-life-panel.compact-button-row { grid-template-columns: 1fr; }
}


/* V16: lower KPI cards smaller */
.promoted-kpis {
  gap: 12px;
}
.promoted-kpis .kpi {
  min-height: 82px;
  padding: 14px 16px;
  border-radius: 14px;
}
.promoted-kpis .kpi p {
  font-size: .82rem;
  margin-bottom: 4px;
}
.promoted-kpis .kpi strong {
  font-size: 1.15rem;
  line-height: 1.05;
}
@media (max-width: 900px) {
  .promoted-kpis .kpi {
    min-height: 78px;
    padding: 13px 14px;
  }
}


/* V17: lower KPI cards smaller, text larger */
.promoted-kpis {
  gap: 10px;
}
.promoted-kpis .kpi {
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 13px;
}
.promoted-kpis .kpi p {
  font-size: .90rem;
  margin-bottom: 3px;
  font-weight: 800;
}
.promoted-kpis .kpi strong {
  font-size: 1.55rem;
  line-height: 1.02;
  font-weight: 900;
}
@media (max-width: 900px) {
  .promoted-kpis .kpi {
    min-height: 68px;
    padding: 11px 13px;
  }
  .promoted-kpis .kpi strong {
    font-size: 1.45rem;
  }
}


/* V19: lower KPI cards reduced to match Aircraft Identification box size */
.promoted-kpis {
  gap: 10px;
}
.promoted-kpis .kpi {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 12px;
  border-left-width: 6px;
}
.promoted-kpis .kpi p {
  font-size: .90rem;
  margin: 0 0 2px;
  font-weight: 800;
  line-height: 1.08;
}
.promoted-kpis .kpi strong {
  font-size: 1.55rem;
  line-height: 1.02;
  font-weight: 900;
}
@media (max-width: 900px) {
  .promoted-kpis .kpi {
    min-height: 56px;
    padding: 10px 11px;
  }
  .promoted-kpis .kpi strong {
    font-size: 1.45rem;
  }
}


/* V20: lower info cards aligned with identification panel style */
.promoted-kpis {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}
.promoted-kpis .kpi {
  background: #ffffff;
  box-shadow: none;
  border: 1px solid #b7e4c7;
  border-left-width: 6px;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 12px;
}
.promoted-kpis .kpi p {
  font-size: .72rem;
  margin: 0 0 2px;
  color: var(--muted);
  font-weight: 800;
}
.promoted-kpis .kpi strong {
  font-size: .95rem;
  line-height: 1.05;
  font-weight: 900;
}
@media (max-width: 900px) {
  .promoted-kpis { grid-template-columns: repeat(2, minmax(150px,1fr)); }
}
@media (max-width: 680px) {
  .promoted-kpis { grid-template-columns: 1fr; }
}


/* V21: lower info cards slightly larger and cleaner */
.promoted-kpis {
  gap: 12px;
}
.promoted-kpis .kpi {
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 14px;
  border-left-width: 6px;
}
.promoted-kpis .kpi p {
  font-size: .82rem;
  margin: 0 0 4px;
  font-weight: 800;
  line-height: 1.1;
}
.promoted-kpis .kpi strong {
  font-size: 1.32rem;
  line-height: 1.05;
  font-weight: 900;
}
.engine-life-cell.button-like small {
  display: none !important;
}
@media (max-width: 900px) {
  .promoted-kpis .kpi {
    min-height: 68px;
    padding: 13px 14px;
  }
  .promoted-kpis .kpi strong {
    font-size: 1.22rem;
  }
}


/* V24: top cards smaller, status text smaller, 3D visual treatment */
.engine-life-panel.compact-button-row {
  gap: 10px;
}
.engine-life-cell.button-like {
  min-height: 56px;
  padding: 9px 11px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 5px rgba(0,0,0,.06);
  transform: translateZ(0);
}
.engine-life-cell.button-like span {
  font-size: .80rem;
  line-height: 1.05;
}
.engine-life-cell.button-like strong {
  font-size: 1.45rem;
  line-height: 1;
}
.engine-life-cell.status.button-like strong {
  font-size: 1.15rem;
  letter-spacing: .01em;
}
.engine-life-cell.flight-date.button-like {
  box-shadow: 0 10px 18px rgba(3, 18, 41, .32), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -3px 6px rgba(0,0,0,.18);
}
.engine-life-cell.remaining.good.button-like,
.engine-life-cell.status.good.button-like {
  background: linear-gradient(180deg, #d7f1e2 0%, #b9e3c9 100%);
}
.engine-life-cell.remaining.warning.button-like,
.engine-life-cell.status.warning.button-like {
  background: linear-gradient(180deg, #ffe1b0 0%, #ffc56a 100%);
}
.engine-life-cell.remaining.danger.button-like,
.engine-life-cell.status.danger.button-like {
  background: linear-gradient(180deg, #ffc4c4 0%, #ff8f8f 100%);
}
.promoted-kpis .kpi {
  box-shadow: 0 7px 16px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.04);
}
.btn, .icon-btn, .small-btn, .mini-action {
  box-shadow: 0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 4px rgba(0,0,0,.08);
}
@media (max-width: 900px) {
  .engine-life-cell.button-like {
    min-height: 54px;
    padding: 8px 10px;
  }
  .engine-life-cell.button-like strong {
    font-size: 1.34rem;
  }
  .engine-life-cell.status.button-like strong {
    font-size: 1.05rem;
  }
}


/* V25: Century Aviation Services logo in topbar with 3D feel */
.topbar-title-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.topbar-logo-3d {
  height: 74px;
  width: auto;
  object-fit: contain;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 6px 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 6px rgba(0,0,0,.06);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  transform: perspective(900px) translateZ(0);
}
@media (max-width: 900px) {
  .topbar-title-wrap {
    gap: 12px;
  }
  .topbar-logo-3d {
    height: 58px;
    padding: 5px 8px;
  }
}
@media (max-width: 680px) {
  .topbar-logo-3d {
    height: 48px;
  }
}


/* V26: top green cards smaller with stronger visible 3D relief */
.engine-life-panel.compact-button-row {
  gap: 8px;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
}
.engine-life-cell.button-like {
  min-height: 48px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(5, 51, 46, 0.18) !important;
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.22),
    0 4px 0 rgba(0, 0, 0, 0.10),
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -5px 8px rgba(0, 0, 0, 0.08) !important;
}
.engine-life-cell.button-like span {
  font-size: .78rem !important;
  line-height: 1.0 !important;
  letter-spacing: .01em;
}
.engine-life-cell.button-like strong {
  font-size: 1.28rem !important;
  line-height: 1 !important;
}
.engine-life-cell.status.button-like strong {
  font-size: .98rem !important;
  letter-spacing: .02em;
}
.engine-life-cell.flight-date.button-like {
  box-shadow:
    0 14px 24px rgba(2, 16, 38, 0.34),
    0 4px 0 rgba(1, 9, 22, 0.22),
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -6px 10px rgba(0,0,0,.24) !important;
}
.engine-life-cell.remaining.good.button-like,
.engine-life-cell.status.good.button-like {
  background: linear-gradient(180deg, #d9f4e8 0%, #b7e3cb 58%, #a4d7bb 100%) !important;
}
.engine-life-cell.remaining.warning.button-like,
.engine-life-cell.status.warning.button-like {
  background: linear-gradient(180deg, #ffe8bb 0%, #ffc86d 58%, #ffb347 100%) !important;
}
.engine-life-cell.remaining.danger.button-like,
.engine-life-cell.status.danger.button-like {
  background: linear-gradient(180deg, #ffd0d0 0%, #ff9d9d 58%, #ff7a7a 100%) !important;
}
@media (max-width: 1200px) {
  .engine-life-panel.compact-button-row {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }
}
@media (max-width: 680px) {
  .engine-life-panel.compact-button-row {
    grid-template-columns: 1fr;
  }
}


/* V27: smaller top cards, vivid 3D sidebar buttons, animated plane trail */
.topbar {
  position: relative;
  align-items: center;
}
.topbar-title-wrap {
  position: relative;
  z-index: 2;
}
.topbar-flight-lane {
  position: relative;
  flex: 1;
  min-width: 180px;
  height: 88px;
  margin: 0 10px 0 6px;
  overflow: hidden;
}
.flight-contrail {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 12%, rgba(255,255,255,.85) 55%, rgba(255,255,255,0) 100%);
  opacity: .88;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
}
.flight-plane-mini {
  position: absolute;
  left: -42px;
  top: calc(50% - 11px);
  width: 46px;
  height: auto;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.28));
  animation: planeCruise 11s ease-in-out infinite;
  z-index: 1;
}
.top-actions {
  position: relative;
  z-index: 3;
}
@keyframes planeCruise {
  0%, 16% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: translateX(calc(100% - 70px)) translateY(-2px) scale(1);
    opacity: 1;
  }
  78% {
    transform: translateX(calc(100% - 10px)) translateY(-2px) scale(1);
    opacity: .75;
  }
  82%, 100% {
    transform: translateX(calc(100% + 18px)) translateY(-2px) scale(1);
    opacity: 0;
  }
}

.nav-btn {
  border-radius: 17px;
  padding: 13px 16px;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(40,58,84,0.98) 0%, rgba(23,38,63,0.98) 100%);
  border: 1px solid rgba(146, 180, 235, 0.22);
  box-shadow: 0 10px 18px rgba(0,0,0,.26), 0 3px 0 rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -4px 7px rgba(0,0,0,.18);
}
.nav-btn:hover {
  background: linear-gradient(180deg, rgba(48,76,114,0.98) 0%, rgba(28,53,88,0.98) 100%);
  transform: translateY(-1px);
}
.nav-btn.active {
  background: linear-gradient(180deg, #6b5b3b 0%, #3f382b 100%);
  border-color: rgba(243, 186, 53, 0.92);
  box-shadow: 0 12px 20px rgba(0,0,0,.30), 0 4px 0 rgba(120,88,18,.55), inset 0 1px 0 rgba(255,236,182,.35), inset 0 -4px 8px rgba(0,0,0,.18);
  transform: translateY(-1px);
}
.side-actions .btn.ghost.full,
.side-actions .file-btn.btn.ghost.full {
  background: linear-gradient(180deg, #3f4f68 0%, #2d3c53 100%);
  border: 1px solid rgba(179, 203, 235, .28);
  box-shadow: 0 10px 18px rgba(0,0,0,.25), 0 3px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -4px 7px rgba(0,0,0,.16);
}
.side-actions .btn.warning.full,
.side-actions .file-btn.btn.warning.full {
  background: linear-gradient(180deg, #ffc94d 0%, #e3a91c 100%);
  color: #162033;
  box-shadow: 0 10px 18px rgba(0,0,0,.25), 0 3px 0 rgba(151, 108, 5, .45), inset 0 1px 0 rgba(255,245,200,.5), inset 0 -5px 8px rgba(0,0,0,.10);
}
.engine-life-panel.compact-button-row {
  gap: 8px;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
}
.engine-life-cell.button-like {
  min-height: 42px !important;
  padding: 7px 9px !important;
  border-radius: 15px !important;
  box-shadow:
    0 12px 18px rgba(0,0,0,.22),
    0 3px 0 rgba(0,0,0,.10),
    inset 0 2px 0 rgba(255,255,255,.78),
    inset 0 -5px 8px rgba(0,0,0,.08) !important;
}
.engine-life-cell.button-like span {
  font-size: .74rem !important;
  line-height: 1 !important;
}
.engine-life-cell.button-like strong {
  font-size: 1.12rem !important;
  line-height: 1 !important;
}
.engine-life-cell.status.button-like strong {
  font-size: .84rem !important;
  line-height: 1.03 !important;
}
@media (max-width: 1100px) {
  .topbar-flight-lane {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    height: 46px;
    margin: -4px 0 0;
  }
  .topbar {
    flex-wrap: wrap;
  }
}
@media (max-width: 900px) {
  .engine-life-panel.compact-button-row {
    grid-template-columns: repeat(2, minmax(118px, 1fr));
  }
  .engine-life-cell.button-like {
    min-height: 40px !important;
    padding: 7px 8px !important;
  }
}
@media (max-width: 680px) {
  .engine-life-panel.compact-button-row {
    grid-template-columns: 1fr;
  }
  .topbar-logo-3d {
    height: 48px;
  }
  .flight-plane-mini {
    width: 38px;
  }
}


/* V28: top green cards reduced almost to text size */
.engine-life-panel.compact-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px !important;
  grid-template-columns: none !important;
}
.engine-life-cell.button-like {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 144px !important;
  max-width: 172px !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  border-radius: 14px !important;
}
.engine-life-cell.remaining.button-like {
  min-width: 154px !important;
  max-width: 178px !important;
}
.engine-life-cell.status.button-like {
  min-width: 138px !important;
  max-width: 162px !important;
}
.engine-life-cell.button-like span {
  font-size: .70rem !important;
  line-height: .98 !important;
  margin-bottom: 1px;
}
.engine-life-cell.button-like strong {
  font-size: 1.02rem !important;
  line-height: 1 !important;
  margin: 0;
}
.engine-life-cell.status.button-like strong {
  font-size: .82rem !important;
  line-height: 1.02 !important;
}
@media (max-width: 680px) {
  .engine-life-cell.button-like,
  .engine-life-cell.remaining.button-like,
  .engine-life-cell.status.button-like {
    min-width: 132px !important;
    max-width: 160px !important;
  }
}


/* V29: make top cards nearly text-sized and fix plane animation */
.engine-life-panel.compact-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: flex-start;
}
.engine-life-cell.button-like {
  flex: 0 0 auto !important;
  width: fit-content !important;
  min-width: 116px !important;
  max-width: 140px !important;
  min-height: 0 !important;
  padding: 4px 6px !important;
  border-radius: 13px !important;
}
.engine-life-cell.remaining.button-like {
  min-width: 122px !important;
  max-width: 146px !important;
}
.engine-life-cell.status.button-like {
  min-width: 118px !important;
  max-width: 140px !important;
}
.engine-life-cell.button-like span {
  font-size: .62rem !important;
  line-height: .96 !important;
  letter-spacing: .01em;
  margin-bottom: 1px;
}
.engine-life-cell.button-like strong {
  font-size: .92rem !important;
  line-height: 1 !important;
}
.engine-life-cell.status.button-like strong {
  font-size: .76rem !important;
  line-height: 1 !important;
}

.topbar-flight-lane {
  position: relative;
  flex: 1;
  min-width: 190px;
  height: 62px;
  margin: 0 8px 0 6px;
  overflow: hidden;
}
.flight-trail-group {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 26px;
  transform: translateY(-50%);
  animation: planeTraverse 9s linear infinite;
  will-change: transform, opacity;
}
.flight-contrail {
  position: absolute;
  right: calc(100% - 22px);
  top: 50%;
  height: 2px;
  width: 0;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.68) 65%, rgba(255,255,255,.95) 100%);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.24));
  border-radius: 999px;
  animation: contrailGrow 9s linear infinite;
}
.flight-plane-mini {
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: auto;
  transform: translateY(-50%);
  background: transparent !important;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.28));
}
@keyframes planeTraverse {
  0% { transform: translate(-36px,-50%); opacity: 0; }
  6% { opacity: 1; }
  74% { transform: translate(calc(100% - 60px),-50%); opacity: 1; }
  84% { transform: translate(calc(100% - 8px),-50%); opacity: 1; }
  88% { opacity: 0; }
  100% { transform: translate(calc(100% + 18px),-50%); opacity: 0; }
}
@keyframes contrailGrow {
  0%, 6% { width: 0; opacity: 0; }
  12% { width: 16px; opacity: .72; }
  40% { width: 95px; opacity: .85; }
  72% { width: 190px; opacity: .82; }
  84% { width: 225px; opacity: .55; }
  100% { width: 0; opacity: 0; }
}

@media (max-width: 900px) {
  .engine-life-cell.button-like,
  .engine-life-cell.remaining.button-like,
  .engine-life-cell.status.button-like {
    min-width: 112px !important;
    max-width: 136px !important;
  }
  .topbar-flight-lane {
    height: 52px;
  }
}
@media (max-width: 680px) {
  .engine-life-panel.compact-button-row {
    gap: 5px !important;
  }
  .topbar-flight-lane {
    width: 100%;
    min-width: 100%;
  }
  .flight-plane-mini {
    width: 24px;
  }
}


/* V30: lower info cards nearly text-sized, top green cards slightly larger/proportional, white plane + larger trail */
.promoted-kpis {
  gap: 8px !important;
  grid-template-columns: repeat(4, minmax(118px, 1fr)) !important;
}
.promoted-kpis .kpi {
  min-height: 0 !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.58), inset 0 -2px 4px rgba(0,0,0,.03) !important;
}
.promoted-kpis .kpi p {
  font-size: .66rem !important;
  line-height: 1 !important;
  margin: 0 0 1px !important;
  letter-spacing: .01em;
}
.promoted-kpis .kpi strong {
  font-size: .82rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.engine-life-panel.compact-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.engine-life-cell.button-like {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 158px !important;
  max-width: 188px !important;
  min-height: 0 !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
}
.engine-life-cell.remaining.button-like {
  min-width: 162px !important;
  max-width: 192px !important;
}
.engine-life-cell.status.button-like {
  min-width: 154px !important;
  max-width: 182px !important;
}
.engine-life-cell.button-like span {
  font-size: .72rem !important;
  line-height: .98 !important;
  margin-bottom: 2px !important;
}
.engine-life-cell.button-like strong {
  font-size: 1.12rem !important;
  line-height: 1 !important;
}
.engine-life-cell.status.button-like strong {
  font-size: .98rem !important;
  line-height: 1 !important;
}

.topbar-flight-lane {
  height: 68px !important;
  min-width: 220px !important;
}
.flight-trail-group {
  height: 32px !important;
  animation-duration: 8.4s !important;
}
.flight-contrail {
  height: 3px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.78) 52%, rgba(255,255,255,1) 100%) !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.45)) !important;
}
.flight-plane-mini {
  width: 34px !important;
  filter: brightness(0) invert(1) drop-shadow(0 3px 5px rgba(255,255,255,.18)) drop-shadow(0 4px 5px rgba(0,0,0,.32)) !important;
}
@keyframes contrailGrow {
  0%, 6% { width: 0; opacity: 0; }
  12% { width: 24px; opacity: .72; }
  40% { width: 125px; opacity: .88; }
  72% { width: 260px; opacity: .88; }
  84% { width: 320px; opacity: .62; }
  100% { width: 0; opacity: 0; }
}

@media (max-width: 1100px) {
  .promoted-kpis { grid-template-columns: repeat(3, minmax(118px, 1fr)) !important; }
}
@media (max-width: 900px) {
  .promoted-kpis { grid-template-columns: repeat(2, minmax(118px, 1fr)) !important; }
  .engine-life-cell.button-like,
  .engine-life-cell.remaining.button-like,
  .engine-life-cell.status.button-like { min-width: 148px !important; max-width: 178px !important; }
  .topbar-flight-lane { height: 58px !important; }
  .flight-plane-mini { width: 30px !important; }
}
@media (max-width: 680px) {
  .promoted-kpis { grid-template-columns: 1fr !important; }
  .engine-life-cell.button-like,
  .engine-life-cell.remaining.button-like,
  .engine-life-cell.status.button-like { min-width: 138px !important; max-width: 170px !important; }
}


/* V31: lower info cards almost text-sized; upper green cards slightly bigger/proportional; contrail behind plane */
.promoted-kpis {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-template-columns: none !important;
  align-items: flex-start;
}
.promoted-kpis .kpi {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 150px !important;
  max-width: 210px !important;
  min-height: 0 !important;
  padding: 5px 9px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 10px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.60), inset 0 -2px 4px rgba(0,0,0,.03) !important;
}
.promoted-kpis .kpi p {
  font-size: .66rem !important;
  line-height: 1 !important;
  margin: 0 0 1px !important;
  letter-spacing: .01em;
}
.promoted-kpis .kpi strong {
  font-size: .90rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.engine-life-panel.compact-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  grid-template-columns: none !important;
}
.engine-life-cell.button-like {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 172px !important;
  max-width: 210px !important;
  min-height: 0 !important;
  padding: 8px 11px !important;
  border-radius: 14px !important;
}
.engine-life-cell.remaining.button-like {
  min-width: 176px !important;
  max-width: 214px !important;
}
.engine-life-cell.status.button-like {
  min-width: 165px !important;
  max-width: 198px !important;
}
.engine-life-cell.button-like span {
  font-size: .74rem !important;
  line-height: .98 !important;
  margin-bottom: 2px !important;
}
.engine-life-cell.button-like strong {
  font-size: 1.18rem !important;
  line-height: 1 !important;
}
.engine-life-cell.status.button-like strong {
  font-size: 1rem !important;
  line-height: 1 !important;
}

.topbar-flight-lane {
  position: relative;
  flex: 1;
  min-width: 250px !important;
  height: 72px !important;
  margin: 0 8px 0 6px;
  overflow: hidden;
}
.flight-trail-group {
  position: absolute;
  left: 0;
  top: 50%;
  width: 440px !important;
  height: 34px !important;
  transform: translateY(-50%);
  animation: planeTraverseV31 8.8s linear infinite !important;
  will-change: transform, opacity;
}
.flight-plane-mini {
  position: absolute;
  right: 0 !important;
  left: auto !important;
  top: 50%;
  width: 38px !important;
  height: auto;
  transform: translateY(-50%);
  background: transparent !important;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(255,255,255,.24)) drop-shadow(0 4px 6px rgba(0,0,0,.30)) !important;
  z-index: 2;
}
.flight-contrail {
  position: absolute;
  right: 28px !important;
  left: auto !important;
  top: 50%;
  height: 4px !important;
  width: 0;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 18%, rgba(255,255,255,.78) 55%, rgba(255,255,255,1) 100%) !important;
  box-shadow: 0 0 8px rgba(255,255,255,.38), 0 0 16px rgba(255,255,255,.18) !important;
  animation: contrailGrowV31 8.8s linear infinite !important;
  transform-origin: right center;
  z-index: 1;
}
@keyframes planeTraverseV31 {
  0% { transform: translate(-410px,-50%); opacity: 0; }
  8% { opacity: 1; }
  76% { transform: translate(calc(100% - 54px),-50%); opacity: 1; }
  84% { transform: translate(calc(100% - 6px),-50%); opacity: 1; }
  88% { opacity: 0; }
  100% { transform: translate(calc(100% + 42px),-50%); opacity: 0; }
}
@keyframes contrailGrowV31 {
  0%, 8% { width: 0; opacity: 0; }
  16% { width: 42px; opacity: .66; }
  38% { width: 140px; opacity: .88; }
  62% { width: 250px; opacity: .92; }
  76% { width: 330px; opacity: .90; }
  84% { width: 365px; opacity: .68; }
  100% { width: 0; opacity: 0; }
}

@media (max-width: 1100px) {
  .topbar-flight-lane { order: 3; width: 100%; flex-basis: 100%; margin-top: -2px; }
}
@media (max-width: 900px) {
  .promoted-kpis .kpi {
    min-width: 142px !important;
    max-width: 198px !important;
  }
  .engine-life-cell.button-like,
  .engine-life-cell.remaining.button-like,
  .engine-life-cell.status.button-like {
    min-width: 160px !important;
    max-width: 195px !important;
  }
  .flight-trail-group { width: 360px !important; }
  .flight-plane-mini { width: 34px !important; }
}
@media (max-width: 680px) {
  .promoted-kpis .kpi {
    min-width: 138px !important;
    max-width: 188px !important;
  }
  .engine-life-cell.button-like,
  .engine-life-cell.remaining.button-like,
  .engine-life-cell.status.button-like {
    min-width: 150px !important;
    max-width: 186px !important;
  }
  .topbar-flight-lane { min-width: 100% !important; height: 60px !important; }
  .flight-trail-group { width: 320px !important; }
  .flight-plane-mini { width: 30px !important; }
}


/* V32: lower KPI buttons slightly larger, remove estado card, fix contrail alignment */
.promoted-kpis {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  grid-template-columns: none !important;
  align-items: flex-start;
}
.promoted-kpis .kpi {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 168px !important;
  max-width: 232px !important;
  min-height: 0 !important;
  padding: 7px 12px !important;
  border-radius: 11px !important;
}
.promoted-kpis .kpi p {
  font-size: .70rem !important;
  line-height: 1 !important;
  margin: 0 0 1px !important;
}
.promoted-kpis .kpi strong {
  font-size: .97rem !important;
  line-height: 1 !important;
}

.topbar-flight-lane {
  min-width: 265px !important;
  height: 74px !important;
}
.flight-trail-group {
  width: 500px !important;
  height: 36px !important;
  animation-duration: 8.8s !important;
}
.flight-plane-mini {
  right: 0 !important;
  width: 36px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.flight-contrail {
  right: 31px !important;
  left: auto !important;
  top: 64% !important;
  height: 5px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 18%, rgba(255,255,255,.65) 52%, rgba(255,255,255,.97) 100%) !important;
  box-shadow: 0 0 9px rgba(255,255,255,.35), 0 0 18px rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
}
@keyframes contrailGrowV31 {
  0%, 8% { width: 0; opacity: 0; }
  16% { width: 58px; opacity: .56; }
  38% { width: 175px; opacity: .82; }
  62% { width: 300px; opacity: .93; }
  76% { width: 395px; opacity: .94; }
  84% { width: 438px; opacity: .74; }
  100% { width: 0; opacity: 0; }
}
@media (max-width: 900px) {
  .promoted-kpis .kpi {
    min-width: 158px !important;
    max-width: 214px !important;
  }
  .flight-trail-group { width: 420px !important; }
  .flight-contrail { right: 29px !important; }
}
@media (max-width: 680px) {
  .promoted-kpis .kpi {
    min-width: 150px !important;
    max-width: 200px !important;
  }
  .topbar-flight-lane { min-width: 100% !important; }
  .flight-trail-group { width: 360px !important; }
}


/* V33: smoother miniature airplane and constant contrail */
.topbar-flight-lane {
  min-width: 270px !important;
  height: 74px !important;
  overflow: hidden !important;
}
.flight-trail-group {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 470px !important;
  height: 40px !important;
  transform: translateY(-50%) !important;
  animation: planeCruiseSmoothV33 7.2s linear infinite !important;
  will-change: transform;
  opacity: 1 !important;
}
.flight-plane-mini {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 50% !important;
  width: 38px !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  z-index: 2 !important;
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,.22)) drop-shadow(0 3px 5px rgba(0,0,0,.32)) !important;
}
.flight-contrail {
  position: absolute !important;
  left: 0 !important;
  right: 24px !important;
  width: auto !important;
  top: 63% !important;
  height: 5px !important;
  border-radius: 999px !important;
  opacity: .95 !important;
  z-index: 1 !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.20) 12%, rgba(255,255,255,.56) 40%, rgba(255,255,255,.86) 72%, rgba(255,255,255,1) 100%) !important;
  box-shadow: 0 0 10px rgba(255,255,255,.36), 0 0 18px rgba(255,255,255,.16) !important;
}
@keyframes planeCruiseSmoothV33 {
  0% { transform: translate(-430px,-50%); }
  100% { transform: translate(calc(100% + 40px),-50%); }
}
@media (max-width: 900px) {
  .flight-trail-group { width: 390px !important; }
  .flight-plane-mini { width: 34px !important; }
  .flight-contrail { right: 22px !important; }
}
@media (max-width: 680px) {
  .topbar-flight-lane { min-width: 100% !important; height: 62px !important; }
  .flight-trail-group { width: 330px !important; }
  .flight-plane-mini { width: 30px !important; }
}


/* V34: lower KPI buttons a bit larger */
.promoted-kpis {
  gap: 10px !important;
}
.promoted-kpis .kpi {
  min-width: 178px !important;
  max-width: 245px !important;
  padding: 8px 13px !important;
  border-radius: 12px !important;
}
.promoted-kpis .kpi p {
  font-size: .74rem !important;
  margin: 0 0 2px !important;
}
.promoted-kpis .kpi strong {
  font-size: 1.02rem !important;
}
@media (max-width: 900px) {
  .promoted-kpis .kpi {
    min-width: 168px !important;
    max-width: 228px !important;
  }
}
@media (max-width: 680px) {
  .promoted-kpis .kpi {
    min-width: 158px !important;
    max-width: 210px !important;
  }
}


/* V35: fix plane motion so it actually moves continuously */
.topbar-flight-lane {
  overflow: hidden !important;
}
.flight-trail-group {
  position: absolute !important;
  top: 50% !important;
  left: -470px !important;
  width: 470px !important;
  height: 40px !important;
  margin-top: -20px !important;
  transform: none !important;
  animation: planeCruiseSmoothV35 7.2s linear infinite !important;
  animation-play-state: running !important;
  will-change: left !important;
  opacity: 1 !important;
}
.flight-plane-mini {
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.flight-contrail {
  left: 0 !important;
  right: 24px !important;
  width: auto !important;
  top: 63% !important;
}
@keyframes planeCruiseSmoothV35 {
  0% { left: -470px; }
  100% { left: calc(100% + 28px); }
}
@media (max-width: 900px) {
  .flight-trail-group {
    left: -390px !important;
    width: 390px !important;
    margin-top: -18px !important;
    animation-name: planeCruiseSmoothV35m !important;
  }
  @keyframes planeCruiseSmoothV35m {
    0% { left: -390px; }
    100% { left: calc(100% + 24px); }
  }
}
@media (max-width: 680px) {
  .flight-trail-group {
    left: -330px !important;
    width: 330px !important;
    margin-top: -16px !important;
    animation-name: planeCruiseSmoothV35s !important;
  }
  @keyframes planeCruiseSmoothV35s {
    0% { left: -330px; }
    100% { left: calc(100% + 20px); }
  }
}


/* V36: bigger lower info buttons and JS-driven visible plane animation */
.promoted-kpis {
  gap: 11px !important;
}
.promoted-kpis .kpi {
  min-width: 196px !important;
  max-width: 264px !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
}
.promoted-kpis .kpi p {
  font-size: .78rem !important;
}
.promoted-kpis .kpi strong {
  font-size: 1.08rem !important;
}

.topbar-flight-lane {
  position: relative !important;
  min-width: 290px !important;
  height: 76px !important;
  overflow: hidden !important;
}
.flight-trail-group {
  position: absolute !important;
  top: 50% !important;
  left: -470px !important;
  width: 470px !important;
  height: 42px !important;
  margin-top: -21px !important;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
}
.flight-plane-mini {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 50% !important;
  width: 40px !important;
  transform: translateY(-50%) !important;
  animation: none !important;
  opacity: 1 !important;
  z-index: 2 !important;
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,.28)) drop-shadow(0 4px 6px rgba(0,0,0,.34)) !important;
}
.flight-contrail {
  position: absolute !important;
  left: 0 !important;
  right: 30px !important;
  width: auto !important;
  top: 63% !important;
  height: 5px !important;
  border-radius: 999px !important;
  opacity: .96 !important;
  z-index: 1 !important;
  animation: none !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 16%, rgba(255,255,255,.54) 52%, rgba(255,255,255,.92) 82%, rgba(255,255,255,1) 100%) !important;
  box-shadow: 0 0 12px rgba(255,255,255,.38), 0 0 20px rgba(255,255,255,.18) !important;
}
@media (max-width: 900px) {
  .promoted-kpis .kpi {
    min-width: 182px !important;
    max-width: 238px !important;
  }
  .topbar-flight-lane { min-width: 250px !important; }
  .flight-trail-group { width: 390px !important; left: -390px !important; }
  .flight-plane-mini { width: 36px !important; }
}
@media (max-width: 680px) {
  .promoted-kpis .kpi {
    min-width: 168px !important;
    max-width: 220px !important;
  }
  .topbar-flight-lane { min-width: 100% !important; height: 64px !important; }
  .flight-trail-group { width: 330px !important; left: -330px !important; }
  .flight-plane-mini { width: 32px !important; }
}


/* =========================================================
   V37 CAMBIO LIMPIO:
   - CSS nuevo: styles-v37.css para evitar caché.
   - Botones inferiores visiblemente más grandes.
   - Avión animado rehecho desde cero, sin depender de imagen.
   ========================================================= */

/* Botones de información inferiores más grandes de forma clara */
body.v37 .promoted-kpis {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 16px !important;
  grid-template-columns: none !important;
  margin-top: 18px !important;
}

body.v37 .promoted-kpis .kpi {
  flex: 0 0 auto !important;
  min-width: 245px !important;
  max-width: 330px !important;
  width: auto !important;
  min-height: 58px !important;
  padding: 15px 22px !important;
  border-radius: 18px !important;
  border: 1px solid #b7e4c7 !important;
  border-left: 8px solid #2fb344 !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef7f4 100%) !important;
  box-shadow:
    0 14px 24px rgba(0,0,0,.18),
    0 4px 0 rgba(0,0,0,.10),
    inset 0 2px 0 rgba(255,255,255,.78),
    inset 0 -4px 8px rgba(0,0,0,.05) !important;
}

body.v37 .promoted-kpis .kpi p {
  font-size: 1rem !important;
  line-height: 1.05 !important;
  margin: 0 0 5px !important;
  font-weight: 900 !important;
  color: #52657c !important;
  letter-spacing: .02em !important;
}

body.v37 .promoted-kpis .kpi strong {
  display: block !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #071426 !important;
}

/* Avión animado V37: blanco, visible, con estela detrás */
body.v37 .topbar {
  position: relative !important;
  align-items: center !important;
}

body.v37 .topbar-title-wrap {
  position: relative !important;
  z-index: 3 !important;
}

body.v37 .top-actions {
  position: relative !important;
  z-index: 4 !important;
}

body.v37 .v37-flight-lane {
  position: relative !important;
  flex: 1 1 360px !important;
  min-width: 360px !important;
  height: 78px !important;
  margin: 0 12px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.v37 .v37-plane-runner {
  position: absolute !important;
  left: -330px !important;
  top: 50% !important;
  width: 330px !important;
  height: 48px !important;
  transform: translateY(-50%) !important;
  animation: v37FlyAcross 6.5s linear infinite !important;
  will-change: left !important;
}

body.v37 .v37-plane-shape {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important;
  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 1 !important;
  z-index: 2 !important;
  text-shadow:
    0 0 6px rgba(255,255,255,.70),
    0 4px 7px rgba(0,0,0,.45) !important;
}

body.v37 .v37-contrail {
  position: absolute !important;
  left: 0 !important;
  right: 34px !important;
  top: 62% !important;
  height: 6px !important;
  border-radius: 999px !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.22) 16%,
      rgba(255,255,255,.58) 48%,
      rgba(255,255,255,.86) 76%,
      rgba(255,255,255,1) 100%) !important;
  box-shadow:
    0 0 10px rgba(255,255,255,.42),
    0 0 24px rgba(255,255,255,.18) !important;
}

@keyframes v37FlyAcross {
  0%   { left: -330px; }
  100% { left: calc(100% + 46px); }
}

@media (max-width: 1100px) {
  body.v37 .v37-flight-lane {
    order: 3 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 66px !important;
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  body.v37 .promoted-kpis .kpi {
    min-width: 220px !important;
    max-width: 300px !important;
    padding: 14px 20px !important;
  }

  body.v37 .promoted-kpis .kpi p {
    font-size: .94rem !important;
  }

  body.v37 .promoted-kpis .kpi strong {
    font-size: 1.32rem !important;
  }

  body.v37 .v37-plane-runner {
    width: 280px !important;
    left: -280px !important;
  }

  body.v37 .v37-plane-shape {
    font-size: 30px !important;
  }

  @keyframes v37FlyAcross {
    0%   { left: -280px; }
    100% { left: calc(100% + 40px); }
  }
}

@media (max-width: 680px) {
  body.v37 .promoted-kpis .kpi {
    min-width: 190px !important;
    max-width: 260px !important;
  }

  body.v37 .v37-plane-runner {
    width: 240px !important;
    left: -240px !important;
  }

  body.v37 .v37-plane-shape {
    font-size: 26px !important;
  }

  @keyframes v37FlyAcross {
    0%   { left: -240px; }
    100% { left: calc(100% + 34px); }
  }
}


/* =========================================================
   V38:
   Ajuste de las tarjetas de vida de motores.
   Más proporcionadas, con mejor lectura y relieve más marcado.
   ========================================================= */

body.v38 .engine-life-panel.compact-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  grid-template-columns: none !important;
  margin-top: 18px !important;
}

body.v38 .engine-life-cell.button-like {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 210px !important;
  max-width: 245px !important;
  min-height: 72px !important;
  padding: 12px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(3, 71, 55, .28) !important;
  box-shadow:
    0 16px 28px rgba(0,0,0,.22),
    0 4px 0 rgba(0,0,0,.13),
    inset 0 2px 0 rgba(255,255,255,.78),
    inset 0 -5px 10px rgba(0,0,0,.08) !important;
}

body.v38 .engine-life-cell.remaining.good.button-like,
body.v38 .engine-life-cell.status.good.button-like {
  background: linear-gradient(180deg, #d9f6e7 0%, #b9e5cc 62%, #a7d9bd 100%) !important;
}

body.v38 .engine-life-cell.remaining.warning.button-like,
body.v38 .engine-life-cell.status.warning.button-like {
  background: linear-gradient(180deg, #ffe6bb 0%, #ffc66a 62%, #ffae35 100%) !important;
}

body.v38 .engine-life-cell.remaining.danger.button-like,
body.v38 .engine-life-cell.status.danger.button-like {
  background: linear-gradient(180deg, #ffc7c7 0%, #ff9696 62%, #ff7676 100%) !important;
}

body.v38 .engine-life-cell.button-like span {
  font-size: .88rem !important;
  line-height: 1.02 !important;
  letter-spacing: .03em !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
}

body.v38 .engine-life-cell.button-like strong {
  font-size: 1.65rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

body.v38 .engine-life-cell.status.button-like strong {
  font-size: 1.28rem !important;
  line-height: 1.02 !important;
  letter-spacing: .03em !important;
}

body.v38 .engine-life-cell.flight-date.button-like {
  min-width: 230px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #101a2a 0%, #050b14 100%) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 16px 28px rgba(0,0,0,.30),
    0 4px 0 rgba(0,0,0,.22),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -5px 10px rgba(0,0,0,.24) !important;
}

@media (max-width: 900px) {
  body.v38 .engine-life-cell.button-like {
    min-width: 190px !important;
    max-width: 230px !important;
    min-height: 68px !important;
    padding: 11px 16px !important;
  }

  body.v38 .engine-life-cell.button-like strong {
    font-size: 1.46rem !important;
  }

  body.v38 .engine-life-cell.status.button-like strong {
    font-size: 1.16rem !important;
  }
}

@media (max-width: 680px) {
  body.v38 .engine-life-cell.button-like {
    min-width: 175px !important;
    max-width: 220px !important;
  }
}


/* =========================================================
   V39: animación del avión rehecha con clases únicas.
   No usa el emoji ni PNG. Usa SVG blanco con estela detrás.
   ========================================================= */

body.v39 .topbar {
  position: relative !important;
  align-items: center !important;
}

body.v39 .topbar-title-wrap {
  position: relative !important;
  z-index: 3 !important;
}

body.v39 .top-actions {
  position: relative !important;
  z-index: 5 !important;
}

body.v39 .v39-flight-lane {
  position: relative !important;
  flex: 1 1 420px !important;
  min-width: 420px !important;
  height: 82px !important;
  margin: 0 14px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.v39 .v39-plane-runner {
  position: absolute !important;
  left: -420px !important;
  top: 50% !important;
  width: 420px !important;
  height: 50px !important;
  margin-top: -25px !important;
  animation-name: v39PlaneMove !important;
  animation-duration: 6.2s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  will-change: left !important;
  z-index: 1 !important;
}

body.v39 .v39-plane-svg {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  width: 70px !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  color: #ffffff !important;
  z-index: 2 !important;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.45))
    drop-shadow(0 4px 6px rgba(0,0,0,.38)) !important;
}

body.v39 .v39-contrail {
  position: absolute !important;
  left: 0 !important;
  right: 66px !important;
  top: 64% !important;
  height: 6px !important;
  border-radius: 999px !important;
  z-index: 1 !important;
  opacity: .96 !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.18) 15%,
      rgba(255,255,255,.52) 45%,
      rgba(255,255,255,.82) 75%,
      rgba(255,255,255,1) 100%) !important;
  box-shadow:
    0 0 12px rgba(255,255,255,.42),
    0 0 24px rgba(255,255,255,.18) !important;
}

@keyframes v39PlaneMove {
  0% {
    left: -420px;
  }
  100% {
    left: calc(100% + 90px);
  }
}

@media (max-width: 1100px) {
  body.v39 .v39-flight-lane {
    order: 3 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 70px !important;
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  body.v39 .v39-plane-runner {
    width: 340px !important;
    left: -340px !important;
  }

  body.v39 .v39-plane-svg {
    width: 60px !important;
  }

  body.v39 .v39-contrail {
    right: 56px !important;
  }

  @keyframes v39PlaneMove {
    0% { left: -340px; }
    100% { left: calc(100% + 76px); }
  }
}

@media (max-width: 680px) {
  body.v39 .v39-plane-runner {
    width: 280px !important;
    left: -280px !important;
  }

  body.v39 .v39-plane-svg {
    width: 52px !important;
  }

  body.v39 .v39-contrail {
    right: 48px !important;
    height: 5px !important;
  }

  @keyframes v39PlaneMove {
    0% { left: -280px; }
    100% { left: calc(100% + 64px); }
  }
}


/* =========================================================
   V40: Avión animado dibujado en CANVAS.
   Esto evita problemas de CSS/SVG/PNG que no se mueven.
   ========================================================= */

body.v40 .topbar {
  position: relative !important;
  align-items: center !important;
}

body.v40 .topbar-title-wrap {
  position: relative !important;
  z-index: 3 !important;
}

body.v40 .top-actions {
  position: relative !important;
  z-index: 4 !important;
}

body.v40 .v40-flight-canvas-wrap {
  flex: 1 1 420px !important;
  min-width: 420px !important;
  height: 82px !important;
  margin: 0 14px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: relative !important;
}

body.v40 .v40-flight-canvas {
  display: block !important;
  width: 100% !important;
  height: 82px !important;
  background: transparent !important;
}

@media (max-width: 1100px) {
  body.v40 .v40-flight-canvas-wrap {
    order: 3 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 68px !important;
    margin: 0 !important;
  }

  body.v40 .v40-flight-canvas {
    height: 68px !important;
  }
}

@media (max-width: 680px) {
  body.v40 .v40-flight-canvas-wrap {
    height: 58px !important;
  }

  body.v40 .v40-flight-canvas {
    height: 58px !important;
  }
}


/* =========================================================
   V41: Dashboard más profesional y visualmente ordenado
   ========================================================= */

body.v52 .main-content {
  padding: 24px 28px 34px !important;
}

body.v52 .topbar {
  margin-bottom: 22px !important;
  padding: 4px 2px 8px !important;
}

body.v52 .dashboard-layout-pro {
  display: grid !important;
  gap: 18px !important;
}

body.v52 .card,
body.v52 .dashboard-section {
  border-radius: 22px !important;
}

body.v52 .aircraft-id-compact {
  grid-template-columns: 210px 1fr !important;
  gap: 18px !important;
  padding: 20px 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244,248,252,.98) 100%) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

body.v52 .compact-title h3 {
  font-size: 2.15rem !important;
}

body.v52 .identity-grid.compact {
  grid-template-columns: repeat(5, minmax(145px, 1fr)) !important;
  gap: 10px !important;
}

body.v52 .identity-grid.compact div {
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

body.v52 .dashboard-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(238,246,242,.96) 100%) !important;
  border: 1px solid rgba(190, 226, 204, .85) !important;
  padding: 18px 20px 20px !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
}

body.v52 .engine-section-card {
  background:
    linear-gradient(180deg, rgba(246,255,250,.98) 0%, rgba(220,241,228,.98) 100%) !important;
}

body.v52 .section-title-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

body.v52 .section-kicker {
  margin: 0 0 3px !important;
  color: #5e7188 !important;
  font-size: .72rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
}

body.v52 .section-title-row h3 {
  margin: 0 !important;
  color: #0b1d33 !important;
  font-size: 1.25rem !important;
  letter-spacing: .02em !important;
}

body.v52 .section-note {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: #063f35 !important;
  background: rgba(209, 250, 229, .90) !important;
  border: 1px solid rgba(47, 179, 68, .24) !important;
  font-weight: 900 !important;
  font-size: .85rem !important;
}

body.v52 .engine-life-panel.compact-button-row {
  margin-top: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: stretch !important;
}

body.v52 .engine-life-cell.button-like {
  min-height: 76px !important;
  padding: 12px 16px !important;
  border-radius: 17px !important;
}

body.v52 .engine-life-cell.button-like span {
  font-size: .82rem !important;
}

body.v52 .engine-life-cell.button-like strong {
  font-size: 1.55rem !important;
}

body.v52 .engine-life-cell.status.button-like strong {
  font-size: 1.15rem !important;
}

body.v52 .metrics-section-card {
  padding-bottom: 18px !important;
}

body.v52 .promoted-kpis {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(145px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

body.v52 .promoted-kpis .kpi {
  min-width: 0 !important;
  max-width: none !important;
  min-height: 70px !important;
  padding: 12px 14px !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%) !important;
  border: 1px solid rgba(183, 228, 199, .95) !important;
  border-left: 7px solid #2fb344 !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}

body.v52 .promoted-kpis .kpi p {
  font-size: .76rem !important;
  line-height: 1.05 !important;
  margin: 0 0 4px !important;
}

body.v52 .promoted-kpis .kpi strong {
  font-size: 1.18rem !important;
  line-height: 1 !important;
}

body.v52 .dashboard-bottom-grid {
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  gap: 18px !important;
}

body.v52 .alert-panel-clean,
body.v52 .summary-panel-clean {
  min-height: 0 !important;
  padding: 20px !important;
}

body.v52 .alert-panel-clean {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,249,252,.98) 100%) !important;
}

body.v52 .compact-empty {
  min-height: 78px !important;
  padding: 25px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
}

body.v52 .summary-panel-clean {
  background:
    linear-gradient(180deg, #14243d 0%, #0d182a 100%) !important;
  border: 1px solid rgba(151, 174, 205, .36) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body.v52 .summary-panel-clean h3 {
  margin-bottom: 14px !important;
}

body.v52 .summary-list-pro {
  display: grid !important;
  gap: 8px !important;
}

body.v52 .summary-list-pro p {
  margin: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.v52 .summary-list-pro p:last-child {
  border-bottom: 0 !important;
}

body.v52 .summary-list-pro strong {
  color: #ffffff !important;
}

body.v52 .summary-list-pro span {
  color: rgba(255,255,255,.92) !important;
  text-align: right !important;
}

@media (max-width: 1200px) {
  body.v52 .identity-grid.compact {
    grid-template-columns: repeat(3, minmax(145px, 1fr)) !important;
  }

  body.v52 .promoted-kpis {
    grid-template-columns: repeat(3, minmax(145px, 1fr)) !important;
  }

  body.v52 .dashboard-bottom-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body.v52 .aircraft-id-compact {
    grid-template-columns: 1fr !important;
  }

  body.v52 .identity-grid.compact,
  body.v52 .promoted-kpis {
    grid-template-columns: 1fr !important;
  }

  body.v52 .section-title-row {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}


/* V42: avión animado eliminado por solicitud del usuario */
body.v52 .v40-flight-canvas-wrap,
body.v52 .v39-flight-lane,
body.v52 .v37-flight-lane,
body.v52 .topbar-flight-lane {
  display: none !important;
}

body.v52 .topbar {
  justify-content: space-between !important;
}

body.v52 .topbar-title-wrap {
  flex: 1 1 auto !important;
}


/* =========================================================
   V43: Restauración del diseño profesional sin avión animado
   ========================================================= */

body.v52 .dashboard-layout-pro {
  display: grid !important;
  gap: 18px !important;
}

body.v52 .engine-section-card,
body.v52 .metrics-section-card {
  display: block !important;
  color: #102033 !important;
}

body.v52 .engine-section-card {
  background: linear-gradient(180deg, #f6fffa 0%, #dcefe5 100%) !important;
}

body.v52 .metrics-section-card {
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%) !important;
}

body.v52 .section-kicker,
body.v52 .section-title-row h3,
body.v52 .section-note {
  color: #102033 !important;
}

body.v52 .section-kicker {
  color: #5e7188 !important;
}

body.v52 .dashboard-bottom-grid {
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  gap: 18px !important;
  align-items: stretch !important;
}

body.v52 .alert-panel-clean,
body.v52 .summary-panel-clean {
  min-height: 0 !important;
  height: auto !important;
}

body.v52 .summary-list-pro p {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body.v52 .v40-flight-canvas-wrap,
body.v52 .v39-flight-lane,
body.v52 .v37-flight-lane,
body.v52 .topbar-flight-lane {
  display: none !important;
}

@media (max-width: 1200px) {
  body.v52 .dashboard-bottom-grid {
    grid-template-columns: 1fr !important;
  }
}


/* V44: aterrizajes visibles en resumen técnico */
body.v52 .promoted-kpis {
  grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
}

body.v52 .promoted-kpis .kpi {
  min-height: 74px !important;
}

@media (max-width: 1200px) {
  body.v52 .promoted-kpis {
    grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.v52 .promoted-kpis {
    grid-template-columns: 1fr !important;
  }
}


/* V45: eliminados Aterr. Acum. y Aterrizajes último vuelo */
body.v52 .promoted-kpis {
  grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
}


/* V46: importación Excel siempre reemplaza y actualiza */
body.v52 .file-btn input {
  cursor: pointer;
}


/* V47: Horas voladas a la fecha calculadas por suma real de vuelos */


/* =========================================================
   V48: tarjetas de horas de motor con color distinto y estilo digital
   ========================================================= */

body.v52 .promoted-kpis .motor-hours-card {
  background:
    linear-gradient(180deg, #0e1621 0%, #111f2d 48%, #0b1723 100%) !important;
  border: 1px solid rgba(98, 187, 255, .40) !important;
  border-left: 7px solid #25d0ff !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.30),
    0 4px 0 rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -6px 12px rgba(0,0,0,.24) !important;
}

body.v52 .promoted-kpis .motor1-card {
  border-left-color: #00e5a8 !important;
  border-color: rgba(0, 229, 168, .38) !important;
}

body.v52 .promoted-kpis .motor2-card {
  border-left-color: #35b9ff !important;
  border-color: rgba(53, 185, 255, .38) !important;
}

body.v52 .promoted-kpis .motor-hours-card p {
  color: rgba(214, 230, 244, .88) !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body.v52 .promoted-kpis .motor-hours-card strong {
  color: #dffcff !important;
  font-family: "Courier New", "Lucida Console", monospace !important;
  font-size: 1.36rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-shadow:
    0 0 6px rgba(112, 255, 232, .38),
    0 0 12px rgba(53, 185, 255, .25) !important;
}

body.v52 .promoted-kpis .motor1-card strong {
  color: #b6ffe7 !important;
  text-shadow:
    0 0 6px rgba(0, 229, 168, .40),
    0 0 12px rgba(0, 229, 168, .24) !important;
}

body.v52 .promoted-kpis .motor2-card strong {
  color: #c8eeff !important;
  text-shadow:
    0 0 6px rgba(53, 185, 255, .42),
    0 0 12px rgba(53, 185, 255, .26) !important;
}


/* =========================================================
   V49: solo color diferente para Horas motor 1 y Horas motor 2
   Sin estilo digital.
   ========================================================= */

body.v52 .promoted-kpis .motor-hours-card {
  border-left-width: 7px !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

body.v52 .promoted-kpis .motor1-card {
  background: linear-gradient(180deg, #eefcf5 0%, #def5e9 100%) !important;
  border: 1px solid rgba(125, 204, 160, .95) !important;
  border-left-color: #21b36b !important;
}

body.v52 .promoted-kpis .motor2-card {
  background: linear-gradient(180deg, #eef6ff 0%, #dcecff 100%) !important;
  border: 1px solid rgba(140, 188, 243, .95) !important;
  border-left-color: #2d8cff !important;
}

body.v52 .promoted-kpis .motor-hours-card p {
  color: #5b6f86 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 800 !important;
  font-size: .76rem !important;
}

body.v52 .promoted-kpis .motor-hours-card strong {
  color: #071426 !important;
  font-family: inherit !important;
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}

body.v52 .promoted-kpis .motor1-card strong,
body.v52 .promoted-kpis .motor2-card strong {
  color: #071426 !important;
}


/* =========================================================
   V50: Horas motor 1 y Horas motor 2 con el mismo color
   y estilo 3D / relieve
   ========================================================= */

body.v52 .promoted-kpis .motor-hours-card,
body.v52 .promoted-kpis .motor1-card,
body.v52 .promoted-kpis .motor2-card {
  background: linear-gradient(180deg, #eef7ff 0%, #dcecff 55%, #cfe3ff 100%) !important;
  border: 1px solid rgba(123, 170, 230, .95) !important;
  border-left: 8px solid #2d8cff !important;
  border-radius: 15px !important;
  box-shadow:
    0 14px 26px rgba(0,0,0,.16),
    0 4px 0 rgba(76, 123, 180, .18),
    inset 0 2px 0 rgba(255,255,255,.88),
    inset 0 -6px 10px rgba(117, 153, 202, .12) !important;
}

body.v52 .promoted-kpis .motor-hours-card:hover,
body.v52 .promoted-kpis .motor1-card:hover,
body.v52 .promoted-kpis .motor2-card:hover {
  box-shadow:
    0 16px 30px rgba(0,0,0,.18),
    0 5px 0 rgba(76, 123, 180, .20),
    inset 0 2px 0 rgba(255,255,255,.90),
    inset 0 -6px 10px rgba(117, 153, 202, .14) !important;
}

body.v52 .promoted-kpis .motor-hours-card p,
body.v52 .promoted-kpis .motor1-card p,
body.v52 .promoted-kpis .motor2-card p {
  color: #5b6f86 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 800 !important;
  font-size: .76rem !important;
}

body.v52 .promoted-kpis .motor-hours-card strong,
body.v52 .promoted-kpis .motor1-card strong,
body.v52 .promoted-kpis .motor2-card strong {
  color: #071426 !important;
  font-family: inherit !important;
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}


/* V51: base limpia para importar Excel */
body.v52 .empty {
  border-radius: 16px !important;
}


/* V52 Sync Cloud */
body.v52 .cloud-sync-card {
  background: linear-gradient(180deg, rgba(239,248,255,.98), rgba(230,241,255,.98)) !important;
  border: 1px solid rgba(92, 154, 231, .35) !important;
  border-left: 7px solid #2d8cff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
body.v52 .cloud-sync-card.sync-error {
  background: linear-gradient(180deg, #fff7ed, #ffedd5) !important;
  border-left-color: #f97316 !important;
}
body.v52 .sync-ok-text,
body.v52 .sync-error-text {
  margin: 6px 0 0 0;
  color: #334155;
  font-weight: 700;
}
body.v52 .sync-error-text { color: #9a3412; }
body.v52 .cloud-sync-actions { margin-top: 10px; }