/* Combusticut v29
   Ajustes de escritorio: dock centrado/desplazable y listas Top 10/Cercanas legibles. */

/* -------------------------------------------------------------------------
   Panel derecho un poco más amplio en monitores normales/grandes.
   ------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .cc-app { --right-panel-w: 460px; }
}
@media (min-width: 921px) and (max-width: 1399px) {
  .cc-app { --right-panel-w: 410px; }
}

/* -------------------------------------------------------------------------
   Dock PC: centrado en el área de mapa. Si se abre el panel derecho, se
   vuelve a centrar automáticamente en el espacio que queda disponible.
   ------------------------------------------------------------------------- */
@media (min-width: 921px) {
  #mobileDock.mobile-dock {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    bottom: 18px !important;
    left: calc((100vw + var(--left-panel-w, 320px)) / 2) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(690px, calc(100vw - var(--left-panel-w, 320px) - 52px)) !important;
    max-width: calc(100vw - var(--left-panel-w, 320px) - 52px) !important;
    min-width: 520px !important;
    margin: 0 !important;
    padding: 7px !important;
    gap: 5px !important;
    border-radius: 18px !important;
    z-index: 10000 !important;
    background: rgba(12, 43, 65, .97) !important;
    border: 1px solid rgba(113, 168, 207, .38) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(16px) !important;
    transition: left .26s ease, width .26s ease, max-width .26s ease !important;
  }

  body.right-panel-open #mobileDock.mobile-dock {
    left: calc((100vw + var(--left-panel-w, 320px) - var(--right-panel-w, 420px)) / 2) !important;
    width: min(690px, calc(100vw - var(--left-panel-w, 320px) - var(--right-panel-w, 420px) - 52px)) !important;
    max-width: calc(100vw - var(--left-panel-w, 320px) - var(--right-panel-w, 420px) - 52px) !important;
  }

  #mobileDock .dock-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }
  #mobileDock .dock-icon {
    font-size: 18px !important;
    line-height: 1 !important;
  }
  #mobileDock .dock-label,
  #mobileDock > .dock-btn:not(:has(.dock-label)) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mobileDock .dock-q-full { display: inline !important; }
  #mobileDock .dock-q-short { display: none !important; }
}

/* En pantallas de escritorio muy angostas evitamos que el dock quede más
   grande que la zona útil del mapa. */
@media (min-width: 921px) and (max-width: 1120px) {
  #mobileDock.mobile-dock,
  body.right-panel-open #mobileDock.mobile-dock {
    min-width: 0 !important;
  }
  #mobileDock .dock-btn { font-size: 9.5px !important; padding-inline: 4px !important; }
}

/* -------------------------------------------------------------------------
   Top 10 y Cercanas — escritorio.
   Antes la dirección quedaba atrapada en una columna demasiado angosta.
   Ahora cada fila tiene columnas explícitas: ranking, logo, texto y precio.
   ------------------------------------------------------------------------- */
@media (min-width: 921px) {
  .cc-app .right-list-card {
    min-height: 0 !important;
    height: calc(100vh - 86px) !important;
    max-height: calc(100vh - 86px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }
  .cc-app .right-list-content {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    gap: 10px !important;
  }
  .cc-app .right-list-results {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 1px 5px 8px 1px !important;
    scrollbar-gutter: stable !important;
  }

  .cc-app .right-list-item.station-item {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, rgba(25, 52, 77, .96), rgba(20, 45, 68, .96)) !important;
    border: 1px solid rgba(111, 153, 185, .32) !important;
    box-shadow: none !important;
  }
  .cc-app .right-list-item.station-item:hover {
    transform: none !important;
    border-color: rgba(67, 154, 224, .75) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14) !important;
  }

  .cc-app .cc-station-row {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 10px 11px !important;
  }
  .cc-app .cc-station-row.ranked-row {
    grid-template-columns: 28px 56px minmax(0, 1fr) 92px !important;
  }
  .cc-app .cc-station-row.nearby-row {
    grid-template-columns: 56px minmax(0, 1fr) 92px !important;
  }

  .cc-app .cc-station-rank {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255, 191, 69, .13) !important;
    border: 1px solid rgba(255, 191, 69, .34) !important;
    color: #ffd781 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  .cc-app .cc-station-logo {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    display: grid !important;
    place-items: center !important;
  }
  .cc-app .cc-station-logo .station-logo,
  .cc-app .cc-station-logo .station-logo-fallback {
    width: 56px !important;
    height: 56px !important;
    border-radius: 13px !important;
    padding: 5px !important;
    object-fit: contain !important;
  }

  .cc-app .cc-station-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    align-content: center !important;
  }
  .cc-app .cc-station-copy strong {
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    color: #f4f8fc !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  .cc-app .cc-station-copy small {
    display: block !important;
    min-width: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.28 !important;
    color: #adc1d1 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  .cc-app .cc-station-copy small b { color: #dce9f3 !important; }

  .cc-app .cc-station-price {
    width: 92px !important;
    min-width: 92px !important;
    display: grid !important;
    justify-items: end !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  .cc-app .cc-station-price .best-price {
    font-size: 18px !important;
    line-height: 1 !important;
    color: #68efc5 !important;
  }
  .cc-app .cc-station-price .price-change {
    margin: 0 !important;
    font-size: 9px !important;
    padding: 3px 7px !important;
  }

  .cc-app .right-list-filter {
    margin-bottom: 0 !important;
  }
  .cc-app .right-list-filter select {
    min-height: 38px !important;
    font-size: 12px !important;
  }
}

/* -------------------------------------------------------------------------
   Las mismas filas mantienen un layout claro en móvil con el nuevo HTML.
   ------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .cc-app .cc-station-row,
  .cc-app .cc-station-row.ranked-row,
  .cc-app .cc-station-row.nearby-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px 10px !important;
    align-items: center !important;
    padding: 10px !important;
  }
  .cc-app .cc-station-rank {
    position: absolute !important;
    left: 5px !important;
    top: 5px !important;
    z-index: 2 !important;
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #fff7e6 !important;
    color: #754500 !important;
    border: 1px solid #ffd48a !important;
    font-size: 9px !important;
    font-weight: 900 !important;
  }
  .cc-app .cc-station-row { position: relative !important; }
  .cc-app .cc-station-logo { grid-column: 1; grid-row: 1; width: 48px !important; height: 48px !important; }
  .cc-app .cc-station-logo .station-logo,
  .cc-app .cc-station-logo .station-logo-fallback { width: 48px !important; height: 48px !important; border-radius: 12px !important; padding: 4px !important; }
  .cc-app .cc-station-copy { grid-column: 2; grid-row: 1; min-width: 0 !important; gap: 2px !important; }
  .cc-app .cc-station-copy strong { font-size: 12.5px !important; line-height: 1.22 !important; overflow-wrap: anywhere !important; }
  .cc-app .cc-station-copy small { font-size: 10.5px !important; line-height: 1.25 !important; }
  .cc-app .cc-station-price {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(112,149,178,.22) !important;
  }
  .cc-app .cc-station-price .best-price { font-size: 20px !important; }
  .cc-app .cc-station-price .price-change { margin: 0 !important; }
}