/* ============================================================
   mantentucoche.es — Desktop layout (min-width: 1100px)
   La versión móvil (< 1100px) queda intacta.
   ============================================================ */

@media (min-width: 1100px) {

  /* ---------- App shell ---------- */

  .app {
    max-width: 1180px;
    padding-inline: var(--sp-7);
    padding-bottom: var(--sp-8);
  }

  .topbar {
    order: -2;
    padding: var(--sp-5) 0 var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
  }

  .tab-panel {
    padding: var(--sp-6) 0 var(--sp-8);
  }

  /* ---------- Navigation: pasa arriba ---------- */

  .tabbar {
    order: -1;
    position: static;
    transform: none;
    width: auto;
    height: auto;
    max-width: none;
    padding: 6px;
    margin: 0 0 var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    justify-content: flex-start;
    gap: 4px;
    z-index: 30;
  }

  .tab-btn {
    flex: 0 1 auto;
    flex-direction: row;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 14px;
    color: var(--text-2);
  }

  .tab-btn span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .tab-btn svg {
    width: 20px;
    height: 20px;
  }

  .tab-btn.is-active {
    background: var(--surface-2);
    color: var(--text);
  }

  .tab-btn.is-active::before {
    display: none;
  }

  .tab-btn:not(.is-active):hover {
    color: var(--text);
    background: var(--surface-2);
  }

  .tab-btn--capture {
    margin: 0 0 0 auto;
    height: auto;
    border: none;
    border-radius: 14px;
    padding: 11px 20px;
  }

  .tab-btn--capture span {
    font-size: 12px;
  }

  .tab-btn--capture:hover {
    box-shadow: var(--shadow-cone);
  }

  .dot-reminder {
    right: 6px;
    top: 6px;
  }

  /* ---------- Topbar actions ---------- */

  .topbar__actions {
    gap: var(--sp-3);
  }

  .sync-chip {
    padding: 8px 14px;
    font-size: 12.5px;
  }

  .sync-chip:not([data-state="error"]):hover {
    border-color: var(--text-3);
  }

  /* ---------- Home: dashboard en rejilla ---------- */

  #dashboard {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-6);
    align-items: start;
  }

  #itvHero {
    grid-column: 1;
    grid-row: 1;
  }

  #reminderChips {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .rem-chip {
    justify-content: flex-start;
    width: 100%;
  }

  .stats,
  #panel-home .stats {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  #panel-home .section-title {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #recentList {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  #onboarding {
    max-width: 680px;
    margin: var(--sp-7) auto 0;
  }

  /* ---------- Facturas: rejilla de 2 columnas ---------- */

  #recentList .tl,
  #timeline .tl {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  #recentList .tl::before,
  #timeline .tl::before {
    display: none;
  }

  #recentList .tl-item,
  #timeline .tl-item {
    padding: 0;
  }

  #recentList .tl-item__ring,
  #timeline .tl-item__ring,
  #recentList .tl-item__blob,
  #timeline .tl-item__blob {
    display: none;
  }

  #recentList .tl-item__body,
  #timeline .tl-item__body {
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, transform 0.2s ease;
  }

  #recentList .tl-item__body:hover,
  #timeline .tl-item__body:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ring, var(--cone)) 45%, var(--line));
  }

  /* ---------- Escáner ---------- */

  #scanner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  #scanner .eyebrow,
  #scanner h2 {
    text-align: center;
  }

  #scanner > p {
    text-align: center;
  }

  #scanner > p:last-of-type {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .scan-stage {
    aspect-ratio: 16 / 9;
    max-height: 60vh;
  }

  .viewfinder {
    inset: 34px;
  }

  .sweep {
    left: 34px;
    right: 34px;
    top: 34px;
  }

  .capture-actions {
    justify-content: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  #processing {
    max-width: 520px;
    margin: var(--sp-8) auto 0;
  }

  /* ---------- Revisar factura ---------- */

  #panel-review {
    max-width: 780px;
  }

  #reviewThumbWrap {
    max-width: 420px;
    margin-bottom: var(--sp-4);
  }

  #reviewForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-6);
  }

  #fService,
  .form-actions {
    grid-column: 1 / -1;
  }

  .form-actions {
    justify-content: flex-end;
    padding-top: var(--sp-2);
  }

  /* ---------- Historial ---------- */

  #panel-historial .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  /* ---------- ITV ---------- */

  #itvSettings {
    max-width: 920px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: start;
  }

  #itvSettings > .card {
    margin: 0;
  }

  #itvEmpty {
    max-width: 640px;
    margin: var(--sp-8) auto 0;
  }
}