/* Fix: desktop search marks non-matching table rows with hidden, but desktop layout explicitly sets rows to display:grid/table-row. Respect hidden in every desktop table mode. */
.tabla-scroll tbody tr[hidden],
#ranking-mobile .tarjeta-playa[hidden] {
  display:none !important;
}

/* Compact, aligned layout for the ranking controls.
   Four-column desktop layout is kept through common desktop zoom levels
   and only collapses when the effective viewport is genuinely narrow. */

@media (min-width: 900px) {
  main { width:100%; }

  .filtros {
    display:grid;
    grid-template-columns:
      minmax(0,1.08fr)
      minmax(0,.72fr)
      minmax(0,.76fr)
      minmax(0,1.34fr);
    grid-template-areas:
      "dia dia dia dia"
      "horario ubicacion postal buscador"
      "distancia vista vista .";
    column-gap:12px;
    row-gap:8px;
    width:min(calc(100% - 24px),1100px);
    margin:0 auto 10px;
    padding:9px 12px 10px;
    box-sizing:border-box;
    align-items:end;
  }

  .filtros > .selector-dia { grid-area:dia; margin-bottom:0; }
  .filtros > .grupo-horario { grid-area:horario; }
  .filtros > .btn-ubicacion { grid-area:ubicacion; margin-bottom:14px; }
  .filtros > .grupo-filtro:has(#codigoPostal) { grid-area:postal; padding-bottom:14px; }
  .filtros > .grupo-buscador-playa { grid-area:buscador; }
  .filtros > .grupo-filtro:has(#distanciaMaxima) { grid-area:distancia; }
  .filtros > .grupo-filtro:has(#btnVista) { grid-area:vista; }
}

@media (min-width:769px) and (max-width:899px) {
  main { width:100%; }

  .filtros {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "dia dia"
      "horario ubicacion"
      "postal buscador"
      "distancia vista";
    gap:10px 14px;
    width:min(calc(100% - 24px),820px);
    margin:0 auto 12px;
    padding:10px 14px 12px;
    box-sizing:border-box;
    align-items:end;
  }

  .filtros > .selector-dia { grid-area:dia; }
  .filtros > .grupo-horario { grid-area:horario; }
  .filtros > .btn-ubicacion { grid-area:ubicacion; }
  .filtros > .grupo-filtro:has(#codigoPostal) { grid-area:postal; }
  .filtros > .grupo-buscador-playa { grid-area:buscador; }
  .filtros > .grupo-filtro:has(#distanciaMaxima) { grid-area:distancia; }
  .filtros > .grupo-filtro:has(#btnVista) { grid-area:vista; }
}

@media (min-width:769px) {
  .filtros .grupo-filtro,
  .filtros .grupo-horario,
  .filtros .grupo-buscador-playa {
    min-width:0;
    width:100%;
    gap:3px;
  }

  .filtros .etiqueta-grupo,
  .filtros .grupo-filtro > label {
    font-size:.84rem;
    line-height:1.12;
  }

  .filtros .selector-horario {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:5px;
    width:100%;
  }

  .filtros .selector-horario label {
    margin:0;
    font-size:.72rem;
    white-space:nowrap;
  }

  .filtros .selector-horario select {
    width:100%;
    min-width:0;
    height:35px;
    padding:5px 6px;
    box-sizing:border-box;
    font-size:.86rem;
  }

  .filtros .grupo-horario small,
  .filtros .grupo-buscador-playa small {
    position:static;
    margin:0;
    white-space:normal;
    font-size:.67rem;
    line-height:1.12;
  }

  .filtros > .btn-ubicacion {
    width:100%;
    min-width:0;
    min-height:35px;
    padding:6px 8px;
    box-sizing:border-box;
    align-self:end;
    font-size:.82rem;
  }

  .filtros .grupo-buscador-playa,
  .filtros .buscador-playa-control,
  .filtros .grupo-filtro > input,
  .filtros .input-con-boton {
    width:100%;
    max-width:none;
    box-sizing:border-box;
  }

  .filtros .buscador-playa-control {
    display:grid;
    grid-template-columns:minmax(0,1fr) 35px;
    gap:5px;
  }

  .filtros .buscador-playa-control input,
  .filtros .grupo-filtro > input,
  .filtros .input-con-boton > input {
    width:100%;
    min-width:0;
    height:35px;
    padding:5px 8px;
    box-sizing:border-box;
    font-size:.86rem;
  }

  .filtros .btn-limpiar-busqueda {
    width:35px;
    height:35px;
    font-size:1.1rem;
  }

  .filtros > .grupo-filtro:has(#distanciaMaxima) .input-con-boton {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:5px;
  }

  .filtros .btn-buscar,
  .filtros .btn-vista {
    min-height:35px;
    padding:5px 9px;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:.8rem;
  }

  .filtros > .grupo-filtro:has(#btnVista) .input-con-boton {
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    width:100%;
  }

  .filtros > .grupo-filtro:has(#btnVista) .btn-vista {
    flex:1 1 0;
    min-width:0;
  }

  .selector-dia { gap:5px; }
  .btn-dia {
    padding:5px 16px;
    font-size:.82rem;
  }

  /* ----- Desktop ranking, normal view ----- */
  .contenedor {
    width:100%;
    max-width:1500px;
  }

  .tabla-scroll {
    overflow-x:hidden;
    padding:0 4px 10px;
  }

  .tabla-scroll table,
  .tabla-scroll thead,
  .tabla-scroll tbody {
    display:block;
    width:100%;
  }

  .tabla-scroll table {
    min-width:0;
    border-collapse:separate;
    border-spacing:0;
  }

  .tabla-scroll thead tr,
  .tabla-scroll tbody tr {
    display:grid;
    grid-template-columns:4% 20% 10% 13% 11% 15% 27%;
    width:100%;
    box-sizing:border-box;
  }

  .tabla-scroll thead tr {
    background:#0b7285;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 5px 14px rgba(15,75,99,.14);
  }

  .tabla-scroll thead th {
    width:auto !important;
    min-width:0 !important;
    padding:12px 8px;
    font-size:.86rem;
    border-radius:0 !important;
    box-sizing:border-box;
  }

  .tabla-scroll tbody {
    padding-top:10px;
  }

  .tabla-scroll tbody tr {
    background:#fff !important;
    border:1px solid rgba(20,86,105,.11);
    border-radius:22px !important;
    overflow:hidden;
    margin-bottom:12px;
    box-shadow:0 5px 16px rgba(18,73,91,.09) !important;
    transition:transform .18s ease, box-shadow .18s ease;
  }

  .tabla-scroll tbody td {
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    padding:13px 9px;
    font-size:.88rem;
    line-height:1.28;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    vertical-align:middle;
    box-sizing:border-box;
  }

  /* Safe centering for normal desktop grid view: do not change td display mode. */
  body:not(:has(#btnDetalles[aria-expanded="true"])) .tabla-scroll tbody td {
    align-self:center;
    text-align:center;
  }

  body:not(:has(#btnDetalles[aria-expanded="true"])) .tabla-scroll tbody td:nth-child(2) {
    text-align:left;
  }

  .tabla-scroll tbody td:nth-child(13) {
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    font-size:.84rem;
    line-height:1.3;
  }

  .tabla-scroll tbody tr:hover {
    transform:translateY(-2px);
    box-shadow:0 9px 22px rgba(18,73,91,.14) !important;
  }

  .tabla-scroll tbody tr:hover td {
    background:transparent !important;
  }

  /* Secondary action: visually subordinate to the beach name. */
  .tabla-scroll .enlace-maps {
    min-height:0;
    margin-top:3px;
    padding:2px 6px;
    border-color:rgba(11,114,133,.22);
    background:rgba(237,247,248,.55);
    box-shadow:none;
    color:#46707c;
    font-size:.56rem;
    font-weight:600;
    line-height:1.15;
    opacity:.82;
  }

  .tabla-scroll .enlace-maps:hover,
  .tabla-scroll .enlace-maps:focus-visible {
    opacity:1;
    color:#0b7285;
    background:#edf7f8;
  }

  /* Desktop card view: keep the same content but make cards much denser and narrower. */
  #ranking-mobile {
    width:min(100%,1180px);
    margin:0 auto;
  }

  #ranking-mobile .tarjeta-playa {
    padding:12px 14px 11px;
    margin-bottom:11px;
    border-radius:16px;
    box-shadow:0 5px 16px rgba(22,64,78,.08);
  }

  #ranking-mobile .tarjeta-cabecera {
    gap:10px;
  }

  #ranking-mobile .tarjeta-identidad {
    gap:8px;
  }

  #ranking-mobile .posicion-ranking {
    flex-basis:26px;
    width:26px;
    height:26px;
    font-size:.78rem;
  }

  #ranking-mobile .tarjeta-playa h2 {
    margin-bottom:2px;
    font-size:1.02rem;
  }

  #ranking-mobile .tarjeta-playa .estado {
    font-size:.79rem;
  }

  #ranking-mobile .tarjeta-playa .puntuacion {
    padding:6px 9px;
    border-radius:10px;
  }

  #ranking-mobile .tarjeta-playa .puntuacion strong {
    margin-top:2px;
    font-size:1.12rem;
  }

  #ranking-mobile .tarjeta-playa .puntuacion span,
  #ranking-mobile .tarjeta-playa .puntuacion small {
    font-size:.6rem;
  }

  #ranking-mobile .resumen-condiciones {
    gap:6px;
    margin:9px 0 7px;
  }

  #ranking-mobile .resumen-condiciones span {
    padding:5px 8px;
    font-size:.75rem;
  }

  #ranking-mobile .tarjeta-contexto {
    gap:8px;
    font-size:.76rem;
  }

  #ranking-mobile .tarjeta-playa .explicacion {
    margin:8px 0 7px;
    padding-top:8px;
    font-size:.8rem;
    line-height:1.34;
  }

  #ranking-mobile .btn-detalles {
    padding:6px 10px;
    border-radius:8px;
    font-size:.79rem;
  }

  #ranking-mobile .detalles-mobile p {
    margin:5px 0;
    font-size:.8rem;
  }

  /* Full-detail mode: restore native table layout and horizontal scrolling. */
  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll {
    overflow-x:auto;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll table {
    display:table;
    width:max-content;
    min-width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
    table-layout:fixed;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll thead {
    display:table-header-group;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll tbody {
    display:table-row-group;
    padding-top:0;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll thead tr,
  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll tbody tr {
    display:table-row;
    background:transparent !important;
    border:0;
    border-radius:0 !important;
    overflow:visible;
    margin:0;
    box-shadow:none !important;
    transform:none;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll th,
  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll td {
    display:table-cell;
    width:auto !important;
    min-width:0;
  }

  /* In expanded mode the cells themselves paint the white row-card.
     !important is necessary because the normal grid view intentionally makes td backgrounds transparent. */
  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll tbody td {
    background:#fff !important;
    border-top:1px solid rgba(20,86,105,.10) !important;
    border-bottom:1px solid rgba(20,86,105,.10) !important;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll thead th {
    background:#0b7285 !important;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll tbody td:first-child {
    border-left:1px solid rgba(20,86,105,.10) !important;
    border-radius:16px 0 0 16px !important;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll tbody td:last-child {
    border-right:1px solid rgba(20,86,105,.10) !important;
    border-radius:0 16px 16px 0 !important;
  }

  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll th:nth-child(13),
  body:has(#btnDetalles[aria-expanded="true"]) .tabla-scroll td:nth-child(13) {
    width:300px !important;
    min-width:300px !important;
  }
}