/* ==========================================================================
   VISTAS DEL LISTADO — página de ciudad (/ec/escorts/guayaquil/), 2026-09-27.
   La fila «Grande · Lista» (partes/ciudad-vistas.php) y la vista «Compacta». La «Cuadrícula» es la de
   siempre y esta hoja no la toca: todo lo de la compacta cuelga de :root[data-mel-vista="compacta"],
   que pone vistas.js (y el guion en línea de la fila, antes de pintar).
   Regla: aquí SOLO tokens del sistema (--mel-*).
   ========================================================================== */
@layer componentes {

  /* --- La fila «Grande · Lista» -----------------------------------------------
     Pegada a la izquierda, alineada con las fotos de abajo (Sebas, 2026-09-28). «Visualización:»
     en gris (es una etiqueta, no una acción) y los botones con ícono y palabra, con la letra de
     «Filtrar» (mismo tamaño y peso).
     Aire igual arriba y abajo, 20 px (Sebas, 2026-09-28: «armonía»): arriba lo pone la fila; abajo,
     el relleno de la primera tarjeta (20 en la cuadrícula; 15 en la compacta + los 5 que faltan). */
  .vistas { display: flex; align-items: center; justify-content: flex-start; gap: var(--mel-espacio-grupo); padding: var(--mel-espacio-titulo) var(--mel-canal) 0; background: var(--mel-color-fondo); }
  :root[data-mel-vista="compacta"] .vistas { padding-block-end: calc(var(--mel-espacio-titulo) - var(--mel-espacio-grupo)); }
  .vistas[hidden] { display: none; }
  /* La etiqueta nombra el grupo, no es una opción: texto principal. El gris queda solo para la opción sin elegir
     y el morado para la elegida (Sebas, 2026-10-02). */
  .vistas__titulo { font-size: var(--mel-texto-cuerpo); line-height: var(--mel-interlineado-cuerpo); font-weight: var(--mel-peso-semi); color: var(--mel-color-texto); } /* «cuerpo», un escalón sobre las opciones (Sebas, 2026-10-10) */
  /* Ícono y palabra juntos (5 px); el botón entero es el área táctil, de 30 px de alto. */
  .vistas__boton { display: inline-flex; align-items: center; gap: var(--mel-espacio-dentro-min); min-block-size: var(--mel-tactil-min); padding: 0; border: 0; background: none; color: var(--mel-color-texto-secundario); font: inherit; font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); font-weight: var(--mel-peso-normal); cursor: pointer; touch-action: manipulation; transition: color var(--mel-mov-rapido); }
  /* La elegida solo cambia a morado, sin círculo ni fondo (Sebas, 2026-09-28). La palabra ya dice
     qué es cada una; el estado viaja en aria-pressed para los lectores de pantalla. */
  .vistas__boton[aria-pressed="true"] { color: var(--mel-color-marca); }
  @media (hover: hover) {
    .vistas__boton[aria-pressed="false"]:hover { color: var(--mel-color-marca); }
  }

  /* --- La foto de la compacta: en la cuadrícula no existe ---------------------- */
  .ciu-tarjeta__mini { display: none; }
  .ciu-tarjeta__sello { display: none; } /* el «Destacado» junto al nombre es solo de la «Lista» */

  /* --- Vista compacta: una fila por anuncio -------------------------------------
     (2026-10-02, Sebas) Fila de alto fijo (--mel-lista-alto). Foto a la izquierda, a todo el alto; a la derecha:
     nombre y «Destacado» · la descripción como en la «Grande» · edad a la izquierda y precio a la derecha.
     Antes: foto a la izquierda (un tercio del ancho útil, 4:5) y, a la derecha: nombre y edad en el
     primer renglón, el titular en morado (hasta 2 renglones), la zona con su pin y, abajo, el
     precio, que queda alineado con el pie de la foto. «Destacado» y el número de videos van
     sobre la foto, donde ya están en la cuadrícula. Desde el 2026-10-04 (Sebas) también el de fotos.
     Todo con las mismas piezas de la tarjeta: nada se escribe dos veces en el HTML. */
  :root[data-mel-vista="compacta"] .ciu-tarjeta {
    position: relative; /* el enlace del nombre cubre la fila entera (su ::after) */
    display: grid;
    grid-template-columns: calc((100% - var(--mel-espacio-grupo)) * var(--mel-lista-foto)) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--mel-espacio-grupo);
    padding-block: var(--mel-espacio-grupo);
    block-size: var(--mel-lista-alto); /* alto fijo (Sebas, 2026-10-02): la foto ocupa todo el alto */
  }

  /* La foto: el marco del carrusel pasa a ser la miniatura y el carrusel se esconde (quieto y sin
     gastar: fuera de pantalla su guion se detiene solo). Si el texto mide más que la foto, la foto
     se estira con él y no queda un hueco debajo. */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__medios { grid-column: 1; grid-row: 1; align-self: stretch; block-size: 100%; aspect-ratio: auto; background: var(--mel-color-fondo-inactivo); }
  :root[data-mel-vista="compacta"] .ciu-carrusel { display: none; }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__mini { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* El DESTACADO (Sebas, 2026-10-04): en vez de la foto quieta, su carrusel que se mueve solo, el mismo de
     la «Grande» (mismo HTML, mismo guion), con una casilla a la vista que llena el marco y flechas más
     chicas. La foto quieta se esconde y, al ser «carga después», ni se descarga. El carrusel va por encima
     del enlace del nombre (su ::after cubre la fila): así se arrastra, y tocar un video abre su #video-N;
     tocar una foto sigue abriendo el anuncio (el `data-enlace` del carrusel). Los contadores, encima.
     Solo el «auto»: el quieto de los normales lee sus casillas una vez al arrancar y debe seguir en 3. */
  :root[data-mel-vista="compacta"] .ciu-carrusel--auto { --ciu-carrusel-a-la-vista: var(--mel-lista-a-la-vista); display: block; z-index: var(--mel-capa-elevada); }
  :root[data-mel-vista="compacta"] .ciu-carrusel--auto ~ .ciu-tarjeta__mini { display: none; }
  :root[data-mel-vista="compacta"] .ciu-carrusel__flecha { inline-size: var(--mel-lista-flecha); block-size: var(--mel-lista-flecha); }
  /* El dibujo baja a 17 px; lo que responde al dedo sigue en 30 (el ::after de ciudad-v2.css, a la medida nueva). */
  :root[data-mel-vista="compacta"] .ciu-carrusel__flecha::after { inset: calc((var(--mel-lista-flecha) - var(--mel-tactil-min)) / 2); }
  /* Sobre la foto: «Destacado» arriba a la izquierda y los videos abajo a la derecha; en esquinas
     opuestas no se pisan ni en la foto más angosta (≈ 98 px a 360). */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__sobre { inset: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: var(--mel-espacio-dentro-min); } /* los videos, al pie de la foto: sin margen «auto», que con 450 px daba ~400 px */
  :root[data-mel-vista="compacta"] .ciu-insignia { padding-inline: var(--mel-espacio-dentro-min); }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__sobre .ciu-insignia { display: none; } /* pasa a la línea del nombre */
  :root[data-mel-vista="compacta"] .ciu-contadores { align-self: flex-end; margin-left: 0; } /* a la derecha por la alineación, no por el margen «auto» de la cuadrícula (auditor) */
  :root[data-mel-vista="compacta"] .ciu-contadores > [data-cuenta="0"] { display: none; } /* fotos y videos; sin videos, solo las fotos */

  /* El texto: su propia rejilla. El nombre cede (puntos suspensivos) y la edad no: queda a la
     derecha, en columna con la de las demás filas, fácil de comparar al bajar. */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__info {
    position: static; /* sin esto el ::after del nombre cubriría solo el texto */
    grid-column: 2; grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto; /* nombre y sello · descripción · edad y precio · línea · dirección (Sebas, 2026-10-04) */
    align-items: start;
    column-gap: var(--mel-espacio-dentro);
    row-gap: var(--mel-espacio-dentro-min);
    margin-top: 0;
  }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__datos { display: contents; }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__linea { grid-column: 1 / -1; grid-row: 4; margin-block: var(--mel-espacio-optico); } /* 7 por lado con el hueco de la rejilla: así caben el aire bajo la descripción y sus 6 renglones */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__nombre { grid-column: 1 / -1; grid-row: 1; min-inline-size: 0; font-size: var(--mel-texto-etiqueta); line-height: var(--mel-interlineado-etiqueta); }
  /* Los puntos suspensivos van en el enlace y no en el título: así el enlace mide lo que se ve y no
     «se sale» de la pantalla con un nombre largo. Su ::after cuelga de la fila, así que no lo recorta. */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__nombre a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* «Destacado» (Sebas, 2026-10-04): un círculo morado con la llama blanca ANTES del nombre, sin la palabra a la vista
     (la oyen los lectores de pantalla). Va en la misma celda que el nombre, que se corre lo que mide el círculo. */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__sello { display: inline-grid; place-items: center; grid-column: 1; grid-row: 1; justify-self: start; align-self: center; inline-size: var(--mel-lista-sello); block-size: var(--mel-lista-sello); margin: 0; border-radius: var(--mel-radio-pildora); background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__sello .mel-icono { inline-size: var(--mel-lista-sello-icono); block-size: var(--mel-lista-sello-icono); }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__info:has(.ciu-tarjeta__sello) .ciu-tarjeta__nombre { padding-inline-start: calc(var(--mel-lista-sello) + var(--mel-lista-sello-hueco)); }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__edad { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; white-space: nowrap; } /* precio a la izquierda y edad a la derecha, como en la «Grande» (Sebas, 2026-10-11) */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__extracto { grid-column: 1 / -1; grid-row: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--mel-lista-lineas); overflow: hidden; margin-top: 0; margin-bottom: var(--mel-espacio-dentro-min); /* aire ligero hasta la edad y el precio: 10 con el hueco (Sebas, 2026-10-04) */ font-size: var(--mel-lista-descripcion); line-height: var(--mel-lista-descripcion-interlineado); } /* el color de la «Grande»; su tamaño, propio */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__lugar { grid-column: 1 / -1; grid-row: 5; min-inline-size: 0; font-size: var(--mel-lista-direccion); line-height: var(--mel-lista-direccion-interlineado); } /* solo el pin y la zona; vuelve a la «Lista» el 2026-10-04 (Sebas) */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__pin { width: calc(var(--mel-lista-direccion) * 0.84); height: calc(var(--mel-lista-direccion) * 0.84); } /* la misma proporción con su letra que en la «Grande» */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__lugar > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* «Dirección:» sobra junto al pin, pero el lector de pantalla la sigue diciendo (patrón .mel-solo-lectores). */
  :root[data-mel-vista="compacta"] .ciu-tarjeta__lugar b { position: absolute; inline-size: var(--mel-borde-fino); block-size: var(--mel-borde-fino); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__precio { grid-column: 1; grid-row: 3; justify-self: start; align-self: end; white-space: nowrap; }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__precio:empty { display: none; }
  :root[data-mel-vista="compacta"] .ciu-tarjeta__precio span { margin-left: var(--mel-lista-precio-hueco); }

  /* Mientras llega la lista (ciudad.js pone dos tarjetas de esqueleto): con la forma de la fila
     compacta, para que no salte de forma al llegar. */
  :root[data-mel-vista="compacta"] .v2-esqueleto { display: grid; grid-template-columns: calc((100% - var(--mel-espacio-grupo)) * var(--mel-lista-foto)) minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; column-gap: var(--mel-espacio-grupo); row-gap: var(--mel-espacio-dentro); padding-block: var(--mel-espacio-grupo); block-size: var(--mel-lista-alto); }
  :root[data-mel-vista="compacta"] .v2-esqueleto__medio { grid-column: 1; grid-row: 1 / -1; align-self: stretch; aspect-ratio: auto; }
  :root[data-mel-vista="compacta"] .v2-esqueleto__linea { grid-column: 2; }
}