/* dex/app — capa de escritorio.
 *
 * Se carga SÓLO cuando `appVista()` devuelve 'escritorio' (ver
 * lib/chrome.php), después de app.css. Todo va scopeado bajo
 * `.vista-escritorio` para que no pueda tocar la vista móvil ni por
 * accidente, y para que en el celular ni siquiera se descargue.
 *
 * El HTML del contenido es idéntico en las dos vistas — acá sólo se
 * cambia cómo se acomoda. Lo único que no existe en escritorio es la
 * barra flotante inferior, y eso no se resuelve con display:none: el
 * chrome directamente no la renderiza.
 */

/* --------- anchos --------- */

/* `--inset` es el que hace que las barras (topnav, header) lleguen de
 * borde a borde pero su contenido quede alineado con el de las tarjetas:
 * el padding lateral crece hasta centrar una franja de `--ancho`, y nunca
 * baja de `--gutter` en ventanas angostas. Evita tener que envolver el
 * contenido de cada barra en un div contenedor. */
.vista-escritorio {
  --ancho:  1180px;
  --gutter: 24px;
  --inset:  max(var(--gutter), calc((100% - var(--ancho)) / 2));
}

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

/* En escritorio el shell ocupa todo el ancho del viewport. El marco
 * redondeado con sombra que app.css aplica a partir de 640px es un
 * recurso de la vista móvil — sirve para simular un teléfono flotando
 * sobre el fondo, no para un portal de escritorio, donde el chrome tiene
 * que ir a sangre.
 *
 * `overflow: visible` además habilita el `position: sticky` de la topnav:
 * el `overflow: hidden` de app.css lo rompía. */
body.vista-escritorio { padding: 0; }

.vista-escritorio .app-shell,
.vista-escritorio .app-shell.page-listado,
.vista-escritorio .app-shell.page-detalle {
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-height: 100vh;
  padding-bottom: 40px;
}

/* --------- barra de navegación superior --------- */

.app-topnav {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 66px;
  padding-inline: var(--inset);
  /* La barra de navegación es la que lleva el azul de marca en
   * escritorio; el header de abajo queda gris. En móvil es al revés (no
   * hay topnav y el color vive en el header), así que todo esto es
   * exclusivo de esta capa. */
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 60;
  /* La barra queda fija al scrollear: la sombra la despega del contenido
   * que le pasa por debajo. Sin esto, al scrollear las cards se cortan
   * contra un borde plano y parece que se recortan solas. */
  box-shadow: 0 2px 12px rgba(16, 22, 54, .18),
              0 1px 3px  rgba(16, 22, 54, .10);
}

/* El logo es un PNG blanco (el mismo que usa cloud en su chrome oscuro),
 * así que depende de que la barra siga siendo azul: sobre fondo claro
 * quedaría invisible. */
.app-topnav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.app-topnav-brand img {
  height: 28px;
  width: auto;
  display: block;
}

.app-topnav-items {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.app-topnav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 99px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.app-topnav-item i { font-size: 0.95rem; }
.app-topnav-item:hover { background: rgba(255, 255, 255, .15); color: #fff; }
/* Sobre fondo azul el activo se invierte: pastilla blanca con texto azul.
 * Pintarlo de azul como antes lo haría desaparecer contra la barra. */
.app-topnav-item.active { background: #fff; color: var(--navy); }

/* Ítem de cuenta: alineado a la derecha, separado del bloque de
 * navegación. Con sesión toma la pastilla blanca para que se lea de un
 * vistazo que la persona está identificada. */
.app-topnav-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 99px;
  font-size: .86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  max-width: 200px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.app-topnav-cuenta span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topnav-cuenta:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.app-topnav-cuenta.is-logueado,
.app-topnav-cuenta.active { background: #fff; color: var(--navy); }
.app-topnav-cuenta.is-logueado:hover,
.app-topnav-cuenta.active:hover { background: var(--pink-soft); color: var(--pink); }

/* --------- header --------- */

/* En escritorio el header no existe: la identidad y la navegación ya las
 * lleva la barra de arriba, y la búsqueda pasó a resolverse dentro del
 * panel de filtros. Al desaparecer, `.app-topstack` queda pegado a la
 * barra azul — y con él el ancla del panel y el tirador, que así caen
 * exactamente sobre su borde inferior sin necesidad de reposicionarlos. */
.vista-escritorio .app-header { display: none; }

/* La cabecera auto-ocultable es de móvil. Acá la barra de navegación de
 * arriba ya es sticky y cumple ese rol; que además se moviera el header
 * gris sería ruido. `cabecera.js` chequea `position: fixed` antes de
 * enganchar nada, así que con esto queda inerte y no toca el padding. */
.vista-escritorio .app-topstack {
  position: static;
  max-width: none;
  transition: none;
}

/* Escritorio no usa la grilla de tres columnas del móvil: acá el header
 * es un bloque de texto a la izquierda y las acciones a la derecha. */
.vista-escritorio .app-header-top {
  display: flex;
  justify-content: space-between;
}
.vista-escritorio .app-header-title {
  font-size: 2rem;
  color: var(--text);
}
.vista-escritorio .app-header-title .accent { color: var(--pink); }

/* Los botones circulares usaban un velo blanco translúcido sobre el azul.
 * Sobre gris hace falta el contrario: un velo oscuro. */
.vista-escritorio .app-back,
.vista-escritorio .app-icon-btn {
  background: rgba(16, 22, 54, .07);
  color: var(--text);
}
.vista-escritorio .app-back:hover,
.vista-escritorio .app-icon-btn:hover { background: rgba(16, 22, 54, .13); }
/* El punto de notificaciones se recortaba contra el azul del header. */
.vista-escritorio .app-icon-btn .dot { border-color: var(--bg); }

.vista-escritorio .app-search-card { max-width: 640px; }

/* --------- panel de filtros --------- */

/* Mismo mecanismo que en móvil (ancla + absoluto + grilla 0fr→1fr); acá
 * sólo cambian medidas y colores. Se alinea con el ancho del contenido en
 * vez de quedar a 10px del borde de la pantalla. */
.vista-escritorio .panel-filtros {
  left: var(--inset);
  right: var(--inset);
}
.vista-escritorio .panel-filtros-body { padding: calc(var(--tuck) + 42px) 26px 24px; }

/* El tirador vive sobre el header gris: el círculo blanco de móvil no
 * contrastaría, así que se invierte a navy con el chevron en blanco. */
/* El tirador ahora se monta sobre el borde de la barra azul de navegación,
 * no sobre un header gris: vuelve al círculo blanco con el chevron navy,
 * igual que en móvil. En navy sobre navy sería invisible. */
.vista-escritorio .panel-filtros-toggle {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  /* En móvil alcanza con el z-index 30 del bloque base porque `.app-topstack`
   * es `fixed` y encierra al tirador en su propia capa. Acá la pila es
   * `static` (no crea contexto) y el tirador compite de igual a igual con
   * `.app-topnav`, que va en 60: sin esto su mitad de arriba queda detrás de
   * la barra azul y se ve como medio círculo. */
  z-index: 70;
}

/* A 1180px de ancho, las secciones apiladas dejan un panel larguísimo con
 * una sola columna de chips. `display: contents` en el bloque de categoría
 * hace que sus secciones participen de la grilla del formulario en vez de
 * contarse como un único ítem. */
.vista-escritorio .panel-filtros-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 30px;
  align-items: start;
}
.vista-escritorio .panel-filtros-form > [data-cat] { display: contents; }
.vista-escritorio .panel-filtros-submit {
  grid-column: 1 / -1;
  justify-self: end;
  width: auto;
  min-width: 240px;
}

/* --------- secciones --------- */

.vista-escritorio .app-section { padding: 26px var(--inset) 6px; }
.vista-escritorio .app-section-title { font-size: 1.2rem; margin-bottom: 16px; }
.vista-escritorio .app-section-title .link { font-size: 0.85rem; }

/* Los tiles ya no son una sección suelta: viven dentro del panel de
 * filtros, que en app.css les saca fondo, sombra y padding. La regla que
 * había acá les devolvía el padding (misma especificidad, archivo más
 * tardío) y rompía ese reset. Sólo queda el centrado, que en un panel de
 * 1180px sí hace falta. */
.vista-escritorio .tiles-row { justify-content: center; }

.vista-escritorio .app-chip-row {
  padding: 16px var(--inset) 4px;
  flex-wrap: wrap;
  overflow-x: visible;
}
.vista-escritorio .list-toolbar { padding: 16px var(--inset) 4px; }
.vista-escritorio .cta-panel { margin: 26px var(--inset) 4px; }

/* --------- LA grilla de avisos ---------
 * Es el cambio central de la vista: la misma lista de cards que en móvil
 * se apila en una columna, acá se acomoda en tantas columnas como entren.
 * `auto-fill` + `minmax` hace que se reajuste sola al ancho de la ventana
 * sin necesidad de breakpoints. */
.vista-escritorio .card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 0 var(--inset);
  align-items: stretch;
}
/* Dentro de una .app-section el inset lateral ya lo pone la sección. */
.vista-escritorio .app-section .card-list { padding: 0; }

/* Altura pareja por fila. `stretch` (el default de grid) ya iguala la
 * altura de las cajas blancas, pero por sí solo deja el contenido arriba
 * y un hueco abajo en las cards más cortas. Con la card en columna flex y
 * el body creciendo, la fila de metadatos se ancla al pie: los títulos
 * quedan arriba, los precios donde caigan y los metadatos alineados entre
 * sí a lo ancho de toda la fila.
 *
 * La variación de altura viene de los títulos de 1 vs. 2 líneas y de los
 * metadatos que envuelven a una segunda línea (los "Automatica"). */
.vista-escritorio .aviso-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vista-escritorio .aviso-media { flex-shrink: 0; }
.vista-escritorio .aviso-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.vista-escritorio .aviso-meta {
  margin-top: auto;
  padding-top: 6px;
}

.vista-escritorio .aviso-title { font-size: 0.98rem; }

/* --------- detalle --------- */

/* El detalle sí se mantiene angosto y centrado: una ficha de aviso a 1180px
 * de ancho se vuelve ilegible. El `min()` evita que toque los bordes en
 * ventanas de escritorio chicas. */
.vista-escritorio .detalle-card {
  width: min(940px, calc(100% - 2 * var(--gutter)));
  max-width: none;
  margin: 22px auto 0;
}

/* --------- sesión --------- */

/* Mismo criterio que el detalle: un formulario de login a todo el ancho
 * de la ventana es incómodo de leer y de completar. */
.vista-escritorio .auth-card {
  width: min(460px, calc(100% - 2 * var(--gutter)));
  margin: 30px auto 40px;
  padding: 30px 30px 26px;
}
.vista-escritorio .app-shell.page-auth { padding-bottom: 40px; }
.vista-escritorio .cuenta-grid { grid-template-columns: repeat(2, 1fr); }
.vista-escritorio .spec-grid { grid-template-columns: repeat(4, 1fr); }
.vista-escritorio .detalle-actions {
  grid-template-columns: repeat(2, minmax(0, 220px));
  justify-content: center;
}

/* --------- menú de apps --------- */

/* Mismo modal que en móvil, sólo que acá sobra ancho: la grilla pasa a
 * cuatro columnas y la fila de apps entra completa de una, que es como
 * se lee un escritorio de verdad. */
.vista-escritorio .menu-apps-card {
  max-width: 460px;
  padding: 18px 22px 26px;
}
.vista-escritorio .menu-apps-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* --------- misc --------- */

/* El sentinel del scroll infinito es un hijo directo de la sección, no de
 * la grilla, así que no necesita ocupar columna — pero sí centrarse sobre
 * el ancho completo. */
.vista-escritorio .scroll-sentinel { margin-top: 20px; }