/* ============================================================
       1. IMPORTACION DE FUENTES — Google Fonts (4 familias)
       ============================================================ */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&family=Poppins:wght@400;500;600&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

    /* ============================================================
       2. TOKENS DEL SISTEMA — :root
       ============================================================ */
    :root {
      /* Paleta cromatica corporativa */
      --color-primary:    #248C99; /* Acento vibrante: botones, links activos, hover */
      --color-secondary:  #25728E; /* Tono medio: subtitulos, soporte */
      --color-tertiary:   #245E84; /* Tono profundo: headers, h1, footer */
      --color-text-main:  #333333; /* Cuerpo de texto general */
      --color-text-light: #FFFFFF; /* Texto sobre fondos coloridos */

      /* Derivaciones funcionales */
      --color-primary-soft:   rgba(36, 140, 153, 0.12);
      --color-primary-hover:  rgba(36, 140, 153, 0.20);
      --color-secondary-soft: rgba(37, 114, 142, 0.10);
      --color-tertiary-soft:  rgba(36, 94, 132, 0.08);
      --color-bg:             #ffffff;
      --color-bg-alt:         #f4f6f8;
      --color-bg-soft:        #fafbfc;
      --color-border:         rgba(36, 94, 132, 0.20);
      --color-border-soft:    rgba(36, 94, 132, 0.10);
      --color-muted:          rgba(51, 51, 51, 0.62);
      --color-muted-soft:     rgba(51, 51, 51, 0.42);

      /* Ecosistema tipografico */
      --font-hero:     'Montserrat', 'Segoe UI', system-ui, sans-serif;
      --font-headings: 'Poppins', 'Segoe UI', system-ui, sans-serif;
      --font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;
      --font-ui:       'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

      /* Escala de radios y sombras */
      --radius-sm:    4px;
      --radius:       6px;
      --radius-md:    10px;
      --radius-lg:    14px;
      --shadow-card:  0 12px 28px rgba(36, 94, 132, 0.10);
      --shadow-hover: 0 18px 36px rgba(36, 94, 132, 0.18);
      --shadow-soft:  0 4px 12px rgba(36, 94, 132, 0.08);

      /* Estados de recurso (chips de status) */
      --status-disponible: #2f9e6c;
      --status-servicio:   var(--color-primary);
      --status-alquilado:  #c98a3a;
      --status-reparacion: #c45a3a;
      --status-baja:       rgba(51, 51, 51, 0.45);
    }
    /* ============================================================
       3. RESET MINIMO + BASE TIPOGRAFICA (BODY)
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-text-main);
      background-color: #122d4a;
      background-image:
        linear-gradient(180deg,
          #ffffff 0px,
          #ffffff 240px,
          rgba(255, 255, 255, 0.92) 340px,
          rgba(36, 94, 132, 0.45) 480px,
          var(--color-tertiary) 720px,
          #1a3f5c 100%);
      background-repeat: no-repeat;
      background-attachment: fixed;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: clamp(1.5rem, 4vw, 2.75rem);
    }

    /* ============================================================
       4. HEADER PRINCIPAL — Logo, hero title (H1) y metricas
       ============================================================ */
    header.page-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.35rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--color-border-soft);
      margin-bottom: 2.25rem;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .brand-logo {
      display: block;
      height: clamp(72px, 13vw, 120px);
      width: auto;
      max-width: min(460px, 92vw);
      object-fit: contain;
    }
    .brand-fallback {
      font-family: var(--font-hero);
      font-weight: 800;
      font-size: 1.5rem;
      text-transform: uppercase;
      letter-spacing: -0.5px;
      color: var(--color-tertiary);
    }

    /* Encabezados principales (H1, .hero-title) — Montserrat 800 uppercase */
    h1, .hero-title, .page-title {
      margin: 0;
      font-family: var(--font-hero);
      font-weight: 800;
      font-size: clamp(1.7rem, 4.3vw, 2.45rem);
      line-height: 1.1;
      letter-spacing: -1px;
      text-transform: uppercase;
      color: var(--color-tertiary);
    }
    .page-title {
      padding-bottom: 1rem;
      position: relative;
    }
    .page-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 84px;
      height: 3px;
      background: var(--color-primary);
      border-radius: 2px;
    }
    .page-title b, .page-title strong {
      font-weight: 900;
      color: var(--color-primary);
    }

    /* Subtitulos y secciones (h2, h3, blockquote) — Poppins 500/600 */
    h2, h3 {
      margin: 0;
      font-family: var(--font-headings);
      font-weight: 600;
      line-height: 1.3;
      color: var(--color-secondary);
    }
    h2 { font-size: clamp(1.3rem, 2.8vw, 1.6rem); }
    h3 { font-size: clamp(1.05rem, 2.2vw, 1.22rem); }
    blockquote {
      margin: 0;
      padding: 0.85rem 1.15rem;
      font-family: var(--font-headings);
      font-weight: 500;
      font-style: italic;
      line-height: 1.3;
      color: var(--color-secondary);
      background: var(--color-primary-soft);
      border-left: 3px solid var(--color-primary);
      border-radius: 0 var(--radius) var(--radius) 0;
    }

    /* ============================================================
       5. PANELES Y BOTONES (UI — JetBrains Mono)
       ============================================================ */
    .panel {
      background: var(--color-bg);
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-md);
      padding: clamp(1.1rem, 3vw, 1.75rem);
      box-shadow: var(--shadow-card);
    }
    .panel.panel-nav {
      padding: 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    /* Boton CTA principal (UI mono uppercase, fondo primary) */
    .btn, .access-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.05rem 1.4rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.85rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-text-light);
      background: var(--color-primary);
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 8px 20px rgba(36, 140, 153, 0.25);
    }
    .btn:hover, .access-btn:hover {
      background: var(--color-tertiary);
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(36, 94, 132, 0.30);
    }
    .btn:active, .access-btn:active { transform: translateY(0); }
    .btn:focus-visible, .access-btn:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 3px;
    }
    .access-btn .chev {
      font-size: 0.7rem;
      color: var(--color-text-light);
      transition: transform 0.35s ease;
    }
    .access-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
    .access-btn-label {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
      text-align: left;
    }
    .access-btn-label .lbl-title {
      font-size: 0.9rem;
      letter-spacing: 1.2px;
      font-weight: 500;
    }
    .access-btn-label .lbl-sub {
      font-size: 0.7rem;
      letter-spacing: 1.5px;
      opacity: 0.80;
      font-weight: 400;
    }
    /* ============================================================
       6. FLEET SECTION — Tabs, busqueda, chips de subcategorias
       ============================================================ */
    .fleet-section {
      margin-top: 1.75rem;
      animation: enter 0.45s ease-out both;
    }
    @keyframes enter {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tabs {
      display: flex;
      gap: 0;
      margin-bottom: 1.5rem;
      border-bottom: 1px solid var(--color-border-soft);
    }
    .tab {
      position: relative;
      padding: 0.95rem 1.5rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.8rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-muted);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: color 0.2s ease, border-color 0.2s ease;
    }
    .tab:hover { color: var(--color-secondary); }
    .tab[aria-selected="true"] {
      color: var(--color-tertiary);
      border-bottom-color: var(--color-primary);
      font-weight: 500;
    }
    .tab-count {
      margin-left: 0.45rem;
      font-size: 0.72rem;
      color: var(--color-muted-soft);
      font-variant-numeric: tabular-nums;
    }
    .toolbar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.85rem;
      align-items: center;
      margin-bottom: 1rem;
    }
    .search {
      width: 100%;
      padding: 0.85rem 1.05rem;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 0.95rem;
      color: var(--color-text-main);
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .search::placeholder { color: var(--color-muted-soft); }
    .search:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-soft);
    }
    .toolbar-info {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.78rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-muted);
      white-space: nowrap;
    }
    .toolbar-info b {
      color: var(--color-primary);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .subcats {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin: 0.25rem 0 1.4rem;
    }
    .chip-sub {
      padding: 0.5rem 1rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.75rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-secondary);
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 999px;
      cursor: pointer;
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }
    .chip-sub:hover {
      color: var(--color-primary);
      border-color: var(--color-primary);
      background: var(--color-primary-soft);
    }
    .chip-sub[aria-pressed="true"] {
      color: var(--color-text-light);
      background: var(--color-primary);
      border-color: var(--color-primary);
      box-shadow: 0 4px 12px rgba(36, 140, 153, 0.25);
    }
    /* ============================================================
       7. GRID Y TARJETAS DE UNIDAD
       ============================================================ */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
      gap: 1.15rem;
      /* Evita que una tarjeta expandida estire a las vecinas (hueco vacío abajo). */
      align-items: start;
    }
    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--color-bg);
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
      box-shadow: var(--shadow-card);
      outline: none;
    }
    .card:hover {
      border-color: var(--color-primary);
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }
    .card:focus-visible {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-soft), var(--shadow-hover);
    }
    .card[aria-expanded="true"] {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-hover);
      /* Una sola fila a ancho completo: evita la "media pantalla" vacía al lado. */
      grid-column: 1 / -1;
    }
    @media (min-width: 880px) {
      .card[aria-expanded="true"] {
        display: grid;
        grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: stretch;
      }
      .card[aria-expanded="true"] .card-summary {
        grid-column: 1;
        grid-row: 1;
      }
      .card[aria-expanded="true"] .card-foot {
        grid-column: 1;
        grid-row: 2;
      }
      .card[aria-expanded="true"] .card-detail-wrap {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        border-left: 1px solid var(--color-border-soft);
      }
    }
    .card-summary {
      cursor: pointer;
      display: flex;
      flex-direction: column;
    }
    .card-hero {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      min-height: clamp(160px, 28vw, 220px);
      overflow: hidden;
      background:
        radial-gradient(60% 60% at 50% 40%, var(--color-primary-soft), transparent 70%),
        linear-gradient(180deg, var(--color-bg-alt) 0%, #e6ebef 100%);
      border-bottom: 1px solid var(--color-border-soft);
    }
    .card-hero img,
    .card-hero-img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: inherit;
      object-fit: cover;
      object-position: center;
      transition: transform 0.45s ease;
    }
    .card-hero-img--failed {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      opacity: 0;
      pointer-events: none;
    }
    .card-hero--pending .card-hero-placeholder {
      position: absolute;
      inset: 0;
    }
    .card:hover .card-hero img:not(.card-hero-img--failed) { transform: scale(1.04); }
    .card[aria-expanded="true"] .card-summary .card-hero {
      aspect-ratio: 16 / 7;
      min-height: clamp(198px, 22vw, 300px);
    }
    .card-hero-enlarge {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      z-index: 3;
      width: 2rem;
      height: 2rem;
      padding: 0;
      border: 1px solid rgba(36, 94, 132, 0.18);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.42);
      color: var(--color-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.55;
      transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .card-hero-enlarge:hover,
    .card-hero-enlarge:focus-visible {
      opacity: 1;
      background: rgba(255, 255, 255, 0.78);
      border-color: rgba(36, 140, 153, 0.35);
      outline: none;
      box-shadow: 0 0 0 2px var(--color-primary-soft);
    }
    .card-hero-enlarge svg {
      width: 0.95rem;
      height: 0.95rem;
      display: block;
    }
    .fleet-photo-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
    }
    .fleet-photo-modal[hidden] { display: none !important; }
    .fleet-photo-modal__backdrop {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 0;
      border: none;
      background: rgba(18, 45, 74, 0.72);
      cursor: pointer;
    }
    .fleet-photo-modal__panel {
      position: relative;
      z-index: 1;
      max-width: min(96vw, 1200px);
      max-height: min(92vh, 900px);
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }
    .fleet-photo-modal__close {
      position: absolute;
      top: -0.25rem;
      right: -0.25rem;
      z-index: 2;
      width: 2.25rem;
      height: 2.25rem;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      color: var(--color-tertiary);
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
      transition: transform 0.15s ease, background 0.15s ease;
    }
    .fleet-photo-modal__close:hover,
    .fleet-photo-modal__close:focus-visible {
      background: #fff;
      transform: scale(1.06);
      outline: none;
      box-shadow: 0 0 0 3px var(--color-primary-soft), 0 4px 14px rgba(0, 0, 0, 0.2);
    }
    .fleet-photo-modal__img-wrap {
      border-radius: var(--radius-md);
      overflow: hidden;
      background: #0d1f33;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
      max-height: min(88vh, 860px);
    }
    .fleet-photo-modal__img-wrap img {
      display: block;
      width: 100%;
      height: auto;
      max-height: min(88vh, 860px);
      object-fit: contain;
    }
    .fleet-photo-modal__caption {
      margin: 0;
      font-family: var(--font-ui);
      font-size: 0.72rem;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.82);
      text-align: center;
    }
    .card-hero-placeholder {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      color: var(--color-secondary);
      text-align: center;
      padding: 1rem;
      opacity: 0.60;
      pointer-events: none;
    }
    .card-hero-placeholder[hidden] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
    .card-hero:has(.card-hero-img:not(.card-hero-img--failed)) .card-hero-placeholder {
      display: none !important;
    }
    .card-hero-img {
      position: relative;
      z-index: 2;
    }
    .card-hero-placeholder svg {
      width: 60px;
      height: 60px;
    }
    .card-hero-placeholder span {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.72rem;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--color-secondary);
    }
    .card-head {
      padding: 1.1rem 1.2rem 0.9rem;
      border-bottom: 1px solid var(--color-border-soft);
    }
    .card-eyebrow {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.68rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-secondary);
      margin-bottom: 0.6rem;
    }
    .card-eyebrow .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--color-primary);
    }
    .card-eyebrow .count-tag {
      margin-left: auto;
      padding: 0.2rem 0.6rem;
      font-family: var(--font-ui);
      font-size: 0.64rem;
      font-weight: 500;
      letter-spacing: 1px;
      color: var(--color-primary);
      background: var(--color-primary-soft);
      border: 1px solid var(--color-primary-soft);
      border-radius: 999px;
    }
    /* H3 dentro de tarjeta — Poppins 600 */
    .card h3 {
      margin: 0;
      font-family: var(--font-headings);
      font-weight: 600;
      font-size: clamp(1.05rem, 2.4vw, 1.2rem);
      line-height: 1.3;
      color: var(--color-tertiary);
    }
    .card-subtitle {
      margin: 0.5rem 0 0;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 0.86rem;
      line-height: 1.45;
      color: var(--color-muted);
    }
    .card-plates {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 0.85rem;
    }
    .plate-stack {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.4rem 0.5rem;
    }
    .plate {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.3rem 0.65rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.74rem;
      letter-spacing: 0.5px;
      color: var(--color-tertiary);
      background: var(--color-tertiary-soft);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
    }
    .plate-int {
      color: var(--color-muted);
      font-size: 0.66rem;
      letter-spacing: 1.2px;
    }
    /* Status pills — UI mono uppercase */
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.2rem 0.65rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.62rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 1px solid currentColor;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.6);
      white-space: nowrap;
    }
    .status-pill::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 6px currentColor;
      flex-shrink: 0;
    }
    .status-pill.s-disponible { color: var(--status-disponible); }
    .status-pill.s-servicio   { color: var(--status-servicio); }
    .status-pill.s-alquilado  { color: var(--status-alquilado); }
    .status-pill.s-reparacion { color: var(--status-reparacion); }
    .status-pill.s-baja       { color: var(--status-baja); }
    .status-pill.s-otro       { color: var(--color-muted); }
    .status-select {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.62rem;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      padding: 0.28rem 1.6rem 0.28rem 0.65rem;
      border: 1px solid currentColor;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      color: inherit;
      cursor: pointer;
      max-width: 100%;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23245e84' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.45rem center;
    }
    .status-select.s-disponible { color: var(--status-disponible); border-color: var(--status-disponible); }
    .status-select.s-servicio   { color: var(--status-servicio); border-color: var(--status-servicio); }
    .status-select.s-alquilado  { color: var(--status-alquilado); border-color: var(--status-alquilado); }
    .status-select.s-reparacion { color: var(--status-reparacion); border-color: var(--status-reparacion); }
    .status-select.s-baja       { color: var(--status-baja); border-color: var(--status-baja); }
    .status-select.s-otro       { color: var(--color-muted); border-color: var(--color-border); }
    .status-select.is-saving { opacity: 0.55; pointer-events: none; }
    .ficha-obs-readonly {
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--color-border-soft);
    }
    .ficha-obs-label-text {
      display: block;
      font-family: var(--font-ui);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--color-secondary);
      margin-bottom: 0.35rem;
    }
    .ficha-obs-text {
      margin: 0;
      font-family: var(--font-body);
      font-size: 0.88rem;
      line-height: 1.5;
      color: var(--color-text-main);
    }
    .ficha-obs-text--empty {
      color: var(--color-muted);
      font-style: italic;
    }
    .ficha-observaciones {
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-top: 1px dashed var(--color-border);
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .ficha-obs-label {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      font-family: var(--font-ui);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-muted);
    }
    .ficha-obs-input {
      font-family: var(--font-body);
      font-size: 0.88rem;
      line-height: 1.45;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      resize: vertical;
      min-height: 4.5rem;
      color: var(--color-text);
      background: var(--color-bg);
    }
    .ficha-obs-input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px var(--color-primary-soft);
    }
    .ficha-obs-input.is-saving { opacity: 0.6; }
    .ficha-obs-input.is-saved { border-color: var(--status-disponible); }
    .ficha-obs-input.is-save-error { border-color: #c0392b; }
    .ficha-intro-label,
    .equip-edit-label {
      display: block;
      margin-top: 0.75rem;
      font-family: var(--font-ui);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--color-secondary);
    }
    .ficha-intro-input,
    .equip-edit-input {
      display: block;
      width: 100%;
      margin-top: 0.35rem;
      font-family: var(--font-body);
      font-size: 0.88rem;
      line-height: 1.45;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      resize: vertical;
      min-height: 4rem;
      color: var(--color-text);
      background: var(--color-bg);
      box-sizing: border-box;
    }
    .ficha-intro-input:focus,
    .equip-edit-input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px var(--color-primary-soft);
    }
    .ficha-intro-input.is-saving,
    .equip-edit-input.is-saving { opacity: 0.6; }
    .ficha-intro-input.is-saved,
    .equip-edit-input.is-saved { border-color: var(--status-disponible); }
    body.fleet-readonly .status-select,
    body.fleet-readonly .ficha-obs-input,
    body.fleet-readonly .ficha-intro-input,
    body.fleet-readonly .equip-edit-input {
      pointer-events: none;
      opacity: 0.85;
    }
    .card-body {
      padding: 1rem 1.2rem 0.5rem;
    }
    .kv {
      display: grid;
      gap: 0;
      font-size: 0.86rem;
    }
    .kv div {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.75rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--color-border-soft);
    }
    .kv div:last-child { border-bottom: none; }
    .kv span:first-child {
      font-family: var(--font-ui);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-muted);
    }
    .kv span:last-child {
      font-family: var(--font-body);
      color: var(--color-text-main);
      text-align: right;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    .card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.95rem 1.2rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.74rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-primary);
      border-top: 1px dashed var(--color-border-soft);
      background: var(--color-primary-soft);
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .card-foot:hover { background: var(--color-primary-hover); }
    .card-foot .chev {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.65rem;
      height: 1.65rem;
      color: var(--color-text-light);
      background: var(--color-primary);
      font-size: 0.72rem;
      border-radius: 50%;
      transition: transform 0.35s ease;
    }
    .card[aria-expanded="true"] .card-foot .chev { transform: rotate(180deg); }
    .card-detail-wrap {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.45s cubic-bezier(0.2, 0, 0, 1);
    }
    .card[aria-expanded="true"] .card-detail-wrap { grid-template-rows: 1fr; }
    .card-detail-inner {
      overflow: hidden;
      min-height: 0;
    }
    .card-detail {
      padding: 1.6rem 1.4rem 1.8rem;
      background: var(--color-bg-soft);
      color: var(--color-text-main);
      border-top: 2px solid var(--color-primary);
    }
    /* ============================================================
       8. FICHA TECNICA EXPANDIDA + COMPONENTES
       ============================================================ */
    .ficha-title {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 0.95rem;
      margin: 0 0 1.15rem;
      border-bottom: 1px solid var(--color-border);
    }
    .ficha-title h4 {
      margin: 0;
      font-family: var(--font-headings);
      font-weight: 600;
      font-size: 1.18rem;
      line-height: 1.3;
      color: var(--color-tertiary);
    }
    .ficha-title .ficha-ref {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.72rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-secondary);
    }
    .ficha-intro {
      margin: 0 0 1.2rem;
      font-family: var(--font-body);
      font-size: 0.92rem;
      line-height: 1.65;
      color: var(--color-text-main);
    }
    .ficha-intro--muted {
      color: var(--color-muted);
      font-style: italic;
    }
    .ficha-stamp {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      margin-bottom: 1.2rem;
      padding: 0.45rem 0.9rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.7rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-text-light);
      background: var(--color-tertiary);
      border-left: 3px solid var(--color-primary);
      border-radius: var(--radius-sm);
    }

    .components {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }
    .component {
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius);
      padding: 1.1rem 1.15rem 1.2rem;
      background: var(--color-bg);
      box-shadow: var(--shadow-soft);
    }
    .component--anexo {
      padding: 0.9rem 1rem 1rem;
      border-style: dashed;
      box-shadow: none;
    }
    .component-annexes {
      margin-top: 0.65rem;
      padding: 0.75rem 0.65rem 0.85rem 1rem;
      border-left: 3px solid var(--color-primary);
      background: var(--color-bg-soft);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .component-photo {
      width: 100%;
      aspect-ratio: 16 / 9;
      margin: 0 0 0.9rem;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--color-bg-alt);
      border: 1px solid var(--color-border-soft);
    }
    .component-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .component-head {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      margin-bottom: 0.65rem;
    }
    .component-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.7rem;
      height: 1.7rem;
      font-family: var(--font-ui);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--color-text-light);
      background: var(--color-primary);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .component-name {
      margin: 0;
      font-family: var(--font-headings);
      font-weight: 600;
      font-size: 1.05rem;
      line-height: 1.3;
      color: var(--color-tertiary);
    }
    .component-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-bottom: 0.75rem;
    }
    .meta-tag {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.68rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-muted);
      padding: 0.22rem 0.6rem;
      background: var(--color-bg-soft);
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-sm);
    }
    .meta-tag b {
      color: var(--color-tertiary);
      font-weight: 700;
      margin-left: 0.35rem;
    }

    .equip-block {
      margin: 0 0 0.85rem;
    }
    .equip-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      width: 100%;
      padding: 0.55rem 0.85rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.72rem;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: var(--color-tertiary);
      background: var(--color-bg-soft);
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    .equip-btn:hover,
    .equip-btn:focus-visible {
      border-color: var(--color-primary);
      background: var(--color-primary-soft);
      outline: none;
      box-shadow: 0 0 0 2px var(--color-primary-soft);
    }
    .equip-btn-lbl { text-align: left; }
    .equip-btn-chev {
      flex-shrink: 0;
      font-size: 0.62rem;
      color: var(--color-primary);
      transition: transform 0.28s ease;
    }
    .equip-btn[aria-expanded="true"] .equip-btn-chev {
      transform: rotate(180deg);
    }
    .equip-list {
      margin: 0.45rem 0 0;
      padding: 0.55rem 0.95rem 0.65rem 1.45rem;
      list-style: disc;
      font-family: var(--font-body);
      font-size: 0.86rem;
      line-height: 1.55;
      color: var(--color-text-main);
      background: var(--color-bg);
      border: 1px dashed var(--color-border-soft);
      border-radius: var(--radius-sm);
    }
    .equip-list li { margin: 0.2rem 0; padding-left: 0.15rem; }

    .specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 1.6rem;
      margin: 0;
      font-size: 0.86rem;
    }
    .specs div {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.75rem;
      padding: 0.45rem 0;
      border-bottom: 1px dotted var(--color-border-soft);
    }
    .specs span:first-child {
      font-family: var(--font-ui);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-muted);
    }
    .specs span:last-child {
      font-family: var(--font-body);
      color: var(--color-text-main);
      font-weight: 500;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .specs span.mono {
      font-family: var(--font-ui);
      letter-spacing: 0.4px;
      color: var(--color-tertiary);
      font-weight: 500;
    }
    @media (max-width: 540px) {
      .specs { grid-template-columns: 1fr; }
    }

    .component-extra {
      margin: 0.95rem 0 0;
      padding: 0.75rem 0.95rem;
      font-family: var(--font-body);
      font-size: 0.86rem;
      line-height: 1.55;
      color: var(--color-text-main);
      background: var(--color-primary-soft);
      border-left: 3px solid var(--color-primary);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    .component-extra-lbl {
      display: block;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.66rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-secondary);
      margin-bottom: 0.3rem;
    }
    .component-desc {
      margin: 0.95rem 0 0;
      font-family: var(--font-body);
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--color-text-main);
    }

    .empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 2.75rem 1rem;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.82rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-muted-soft);
    }
    /* ============================================================
       9. GALERIA Y FOOTER (full-bleed, mosaico pegado)
       ============================================================ */
    .footer-gallery {
      position: relative;
      margin-top: clamp(1.5rem, 4vw, 2.25rem);
      padding: 0;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      box-sizing: border-box;
      background: #0a1828;
      overflow: hidden;
    }
    .footer-gallery::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.4) 40%, transparent 100%);
      pointer-events: none;
      z-index: 5;
    }
    .footer-gallery__accent {
      display: block;
      height: 4px;
      width: 100%;
      background: linear-gradient(
        90deg,
        var(--color-secondary) 0%,
        var(--color-primary) 40%,
        #5ed4e0 50%,
        var(--color-primary) 60%,
        var(--color-secondary) 100%
      );
      background-size: 220% 100%;
      animation: footerAccentPulse 7s ease-in-out infinite;
    }
    @keyframes footerAccentPulse {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    .footer-slides-frame {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: clamp(280px, 42vw, 500px);
      background: #060f18;
    }
    .footer-slides-vignette {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(6, 15, 24, 0.25) 0%, transparent 18%),
        linear-gradient(0deg, rgba(6, 15, 24, 0.55) 0%, transparent 32%),
        radial-gradient(ellipse 130% 90% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.28) 100%);
    }
    .footer-slide-pair {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      transform: scale(1);
      transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .footer-slide-pair.is-changing {
      opacity: 0;
      transform: scale(1.04);
    }
    .footer-slide-pair.is-single {
      grid-template-columns: 1fr;
    }
    .footer-slide-cell {
      position: relative;
      overflow: hidden;
      min-height: 0;
      height: 100%;
      padding: 0;
      margin: 0;
      background: #060f18;
    }
    .footer-slide-cell + .footer-slide-cell {
      box-shadow: inset 2px 0 0 rgba(0, 0, 0, 0.55);
    }
    .footer-slide-cell[hidden] {
      display: none;
    }
    .footer-slide-cell--empty {
      background: linear-gradient(180deg, var(--color-bg-alt) 0%, #e6ebef 100%);
    }
    .footer-slide-img {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      margin: 0;
      filter: saturate(1.12) contrast(1.06);
      transform: scale(1);
      transform-origin: center center;
      animation: footerKenBurns 16s ease-in-out infinite alternate;
    }
    .footer-slide-cell:nth-child(2) .footer-slide-img {
      animation-delay: -8s;
    }
    @keyframes footerKenBurns {
      from { transform: scale(1); }
      to { transform: scale(1.09); }
    }
    .footer-slide-pair.is-changing .footer-slide-img {
      animation-play-state: paused;
    }

    /* Pequeños bloques de soporte UI (small, nav links, tag, date) */
    small {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.85rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-secondary);
    }
    nav a, .nav-link {
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.85rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-secondary);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    nav a:hover, .nav-link:hover {
      color: var(--color-primary);
    }
    .tag, .date {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-ui);
      font-weight: 500;
      font-size: 0.78rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--color-secondary);
    }

    /* ============================================================
       10. UTILIDADES Y MEDIA QUERIES
       ============================================================ */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    @media print {
      body { background: #fff; color: #000; }
      .panel, .card, .card-detail, .component { background: #fff; box-shadow: none; }
      .card-detail-wrap { grid-template-rows: 1fr !important; }
      .card[aria-expanded="true"] {
        display: flex !important;
        flex-direction: column !important;
        grid-column: auto !important;
      }
      .card[aria-expanded="true"] .card-summary,
      .card[aria-expanded="true"] .card-foot,
      .card[aria-expanded="true"] .card-detail-wrap {
        grid-column: auto !important;
        grid-row: auto !important;
        border-left: none !important;
        align-self: auto !important;
      }
      .access-btn, .tabs, .toolbar, .subcats, .footer-gallery { display: none; }
    }

/* Skeleton carga API */
.fleet-grid.is-loading .card { pointer-events: none; }
.card-skeleton {
  min-height: 320px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-bg-soft) 50%, var(--color-bg-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}