/* Minimal overrides on top of layoutaac2.css for the HTML5 rebuild. */

/* The mobile search slot leaks into the desktop layout in the original CSS;
   hide it above the mobile breakpoint. */
@media (min-width: 768px) {
  .header-widget-mobile-search { display: none; }
}

/*
 * Layout-row fix.
 *
 * The original site uses a width:0 + direction:rtl trick on `.ui-right` to
 * right-align its content — Appland's runtime JS sized those cells before
 * the page rendered. Without that JS the right-cells collapse to width 0
 * and their inline-block children overflow off the left edge of the page
 * (visible: the desktop search input lands at x=-92, the footer
 * "Reconstruido con HTML5" mark lands at x=-131).
 *
 * Fix: opt the affected layout rows into flexbox so each cell sizes itself
 * to its content, with no RTL flow. Scoped tightly so we don't disturb the
 * carousel-row .ui-layout instances that work correctly.
 */
.layout-widget-header-top.ui-layout,
.footer-widget-grid-top-container.ui-layout,
.footer-widget-grid-bottom-container.ui-layout,
.ui-box-header > .ui-layout {
  display: flex;
  align-items: center;
}
.layout-widget-header-top > .ui-left,
.footer-widget-grid-top-container > .ui-left,
.footer-widget-grid-bottom-container > .ui-left,
.ui-box-header > .ui-layout > .ui-left {
  flex: 1 1 auto;
  width: auto;
  white-space: normal;
}
.layout-widget-header-top > .ui-center,
.footer-widget-grid-top-container > .ui-center,
.footer-widget-grid-bottom-container > .ui-center,
.ui-box-header > .ui-layout > .ui-center {
  flex: 0 0 auto;
  width: auto;
}
.layout-widget-header-top > .ui-right,
.footer-widget-grid-top-container > .ui-right,
.footer-widget-grid-bottom-container > .ui-right,
.ui-box-header > .ui-layout > .ui-right {
  flex: 0 0 auto;
  width: auto;
  direction: ltr;
  white-space: normal;
}

/* Footer width fix.
 *
 * In the original CSS at @media (min-width: 960px) the footer-widget is set
 * to width:940px + padding:0 50px, total 1040 outer. It is supposed to be
 * centered inside the layout-widget-outer-container (which is 940 content
 * + 50px padding each side, also 1040 outer) via margin:0 auto, so its
 * outer box bleeds into the container's padding and aligns with the rounded
 * border corners.
 *
 * In practice, margin:auto isn't placing it correctly here — the footer
 * lands flush against the container's left padding edge and overflows on the
 * right by 50px. Force the negative-margin alignment explicitly so the
 * footer occupies the container's full outer box.
 */
@media (min-width: 960px) {
  .footer-widget {
    width: auto;
    margin: 0 -50px;
    box-sizing: content-box;
    padding: 0 50px;
  }
}

/* Make the desktop search input sit at a sensible width */
.layout-widget-main-search { display: inline-block; }
.layout-widget-main-search .search-widget-form { width: 220px; padding: 8px 12px 8px 32px; }

.logo-fallback {
  display: inline-block;
  padding: 18px 0 12px;
  font: 800 36px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  letter-spacing: -0.02em;
  color: #f60;
}
.logo-fallback::after {
  content: ".net";
  color: #999;
  font-weight: 500;
}

/* The original used <img> icons hot-linked from img2.appland.se. We render
   inline SVG thumbnails (fallback) or generated PNGs (when present in the
   manifest) and need them to fill the same 111x111 box. */
.app-tile-widget-image {
  width: 111px;
  height: 111px;
  display: block;
  overflow: hidden;
}
.app-tile-widget-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app-detail-page-widget-overview-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.svg-thumb {
  background: linear-gradient(135deg, var(--thumb-a, #f60), var(--thumb-b, #ffb066)) !important;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font: 800 36px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
  user-select: none;
}
.app-detail-page-widget-overview-image.svg-thumb {
  font-size: 48px;
  border-radius: 8px;
}

/* Detail page description: preserve line breaks within paragraphs (so the
 * "• bullet" lists render one per line) and add spacing between paragraphs
 * so section headers (UN PUZZLE SIMPLE PERO PROFUNDO, CONTROLES, etc.) stand
 * apart from prose. Headers use UPPERCASE convention from the original site. */
.app-detail-page-widget-description-text p {
  white-space: pre-line;
  margin: 0 0 14px;
  line-height: 1.55;
}
.app-detail-page-widget-description-text p:last-child {
  margin-bottom: 0;
}

/* Footer tweak: replace the Appland logo block with a simple text mark. */
.footer-rebuilt-mark {
  display: inline-block;
  padding: 2px 8px;
  background: #f60;
  color: #fff;
  font: 700 12px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.04em;
  border-radius: 3px;
  vertical-align: middle;
}

/* Loading + empty states */
#catalog .loading,
#catalog .empty {
  text-align: center;
  color: #888;
  padding: 48px 16px;
  font-size: 14px;
}

/* Page header (above the catalog content) */
#pageHeader {
  padding: 16px 24px 8px;
}
#pageHeader h1 {
  margin: 0;
  font: 800 28px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.02em;
  color: #222;
}
#pageHeader .breadcrumb {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

/* Category-page grid: 6 columns at desktop, fall back gracefully.
 *
 * `.category-grid` shares the `.carousel-widget-view` class with the
 * original horizontal carousel, which forces `white-space: nowrap` and 3D
 * transforms on its children — both break a wrapping grid. Override here. */
/* The original CSS locks `.frontpage-page-widget-applist .ui-box-content`
 * at height:240px (sized for a single horizontal carousel row). Our home
 * sections now wrap into multi-row grids, so let the content expand. */
.frontpage-page-widget-applist .carousel-box-widget > .ui-box > .ui-box-content,
.frontpage-page-widget-applist .ui-box-content {
  height: auto !important;
}

.category-grid {
  display: grid !important;
  /* The original site shows 5 tiles per row (config: carousel_html=5). Match that.
   * `minmax(0, 1fr)` ensures columns can't grow past their share when child
   * content (long category badges, etc.) would otherwise push them out. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  /* Match the 55px horizontal inset the original site used for carousel
   * arrows, so tiles don't run flush into the orange-bordered card edges. */
  padding: 16px 55px 32px;
  white-space: normal !important;
  transform: none !important;
  perspective: none !important;
  transform-style: flat !important;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.category-grid .carousel-widget-item {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  list-style: none;
  display: block !important;
  box-sizing: border-box;
}
/* The original .app-tile-widget reserves margin:5px 6px for the carousel
 * spacing — strips that off so the tile fits inside its grid cell. */
.category-grid .app-tile-widget {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1100px) { .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 32px 32px; } }
@media (max-width: 760px)  { .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px 20px 24px; } }
@media (max-width: 480px)  { .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 16px 24px; } }

.cargar-mas-row {
  text-align: center;
  padding: 8px 0 32px;
}
.cargar-mas-row button {
  font: 700 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #f60;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
}
.cargar-mas-row button:hover { text-decoration: underline; }
.cargar-mas-row button[disabled] { color: #ccc; cursor: default; }

/* Tile flag: "Requiere build" badge for games without a static entry */
.app-tile-widget {
  position: relative;
}
.tile-build-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font: 600 9px/1 -apple-system, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 5px;
  border-radius: 3px;
  pointer-events: none;
}

/* Sort-by label on category pages (matches screenshot) */
.sort-bar {
  padding: 0 24px 8px;
  font-size: 13px;
  color: #555;
}
.sort-bar select {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid #ddd;
  background: #fff;
}

/*
 * Category icon next to the orange ARCADE / CARRERAS / etc. label on each
 * tile and on the app detail page.
 *
 * The original layoutaac2.css sets the `:before` of both
 * `.app-tile-widget-category` and `.app-detail-page-widget-overview-text-category`
 * to `content: url('../png/app_iconaac2.png?…')` — that asset isn't in our
 * mirrored files, so the browser renders a broken-image square.
 *
 * Fix: blank out the content URL, drop the original padding rule, and use a
 * small inline-SVG background-image picked per category via data-cat. SVGs
 * are stroke-only in the brand orange so they read well on white tiles.
 */
.app-tile-widget-category:before,
.app-detail-page-widget-overview-text-category:before {
  content: "" !important;            /* override the broken url() */
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-right: 5px;
  padding: 0 !important;             /* layoutaac2.css set padding-left/right */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Default fallback (also covers any unknown category) — small filled dot. */
.app-tile-widget-category:before,
.app-detail-page-widget-overview-text-category:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='6' fill='%23fe7b00'/></svg>");
}

/* Acción — target / crosshairs */
.app-tile-widget-category[data-cat="accion"]:before,
.app-detail-page-widget-overview-text-category[data-cat="accion"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.6' fill='%23fe7b00' stroke='none'/></svg>");
}

/* Arcade — joystick */
.app-tile-widget-category[data-cat="arcade"]:before,
.app-detail-page-widget-overview-text-category[data-cat="arcade"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='6' r='2.6'/><path d='M12 8.6v7.4'/><rect x='6' y='15.5' width='12' height='4.5' rx='1.2'/></svg>");
}

/* Aventura — compass needle inside ring */
.app-tile-widget-category[data-cat="aventura"]:before,
.app-detail-page-widget-overview-text-category[data-cat="aventura"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polygon points='12,5 14.5,12 12,19 9.5,12' fill='%23fe7b00' stroke='none'/></svg>");
}

/* Carreras — checkered flag */
.app-tile-widget-category[data-cat="carreras"]:before,
.app-detail-page-widget-overview-text-category[data-cat="carreras"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4'/><path d='M5 4q4-2 8 0t8 0v8q-4 2-8 0t-8 0z'/></svg>");
}

/* Casual — smiling face */
.app-tile-widget-category[data-cat="casual"]:before,
.app-detail-page-widget-overview-text-category[data-cat="casual"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='9' cy='10' r='1.1' fill='%23fe7b00' stroke='none'/><circle cx='15' cy='10' r='1.1' fill='%23fe7b00' stroke='none'/><path d='M8.5 14.5q3.5 3 7 0'/></svg>");
}

/* Deportes — soccer-ball-style polygon inside circle */
.app-tile-widget-category[data-cat="deportes"]:before,
.app-detail-page-widget-overview-text-category[data-cat="deportes"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polygon points='12,7 16.5,10.3 14.8,15.5 9.2,15.5 7.5,10.3'/></svg>");
}

/* Estrategia — crowned chess piece */
.app-tile-widget-category[data-cat="estrategia"]:before,
.app-detail-page-widget-overview-text-category[data-cat="estrategia"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 14h8v6H8z'/><path d='M10 14V9a2 2 0 1 1 4 0v5'/><path d='M11 4h2v3h-2z'/><path d='M9.5 5.5h5'/></svg>");
}

/* Niños — balloon with string */
.app-tile-widget-category[data-cat="ninos"]:before,
.app-detail-page-widget-overview-text-category[data-cat="ninos"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a5.5 5.5 0 0 0-5.5 5.5c0 4 5.5 8.5 5.5 8.5s5.5-4.5 5.5-8.5A5.5 5.5 0 0 0 12 3z'/><path d='M12 17v4'/></svg>");
}

/* Puzzle — interlocking puzzle piece */
.app-tile-widget-category[data-cat="puzzle"]:before,
.app-detail-page-widget-overview-text-category[data-cat="puzzle"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M19.5 11.5h-2.5a2 2 0 1 0 0 4h2.5v4h-4a2 2 0 1 1-4 0h-4v-4H5a2 2 0 1 1 0-4h2.5V7.5h4a2 2 0 1 1 4 0h4z'/></svg>");
}

/* RPG — sword */
.app-tile-widget-category[data-cat="rpg"]:before,
.app-detail-page-widget-overview-text-category[data-cat="rpg"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 17.5L3 6V3h3l11.5 11.5'/><path d='M13 19l6-6'/><path d='M16 16l4 4'/><path d='M19 21l2-2'/></svg>");
}

/* Tablero — grid */
.app-tile-widget-category[data-cat="tablero"]:before,
.app-detail-page-widget-overview-text-category[data-cat="tablero"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='1.5'/><path d='M4 12h16M12 4v16'/></svg>");
}

/*
 * "Seleccionar categoría" mobile dropdown indicator.
 *
 * The original CSS sets `.main-navigation-widget-more-mobile:after` to
 * `content: url('../png/arrow_downaac2-2.png?…')` — that asset isn't in
 * our mirrored copy, so a broken-image square shows up at the right of
 * the orange bar. Replace with an inline SVG chevron in white so it
 * stays readable on the orange background.
 */
.main-navigation-widget-more-mobile:after {
  content: "" !important;
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 8px;
  vertical-align: middle;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
}

/* Disparos / Plataformas / share defaults — accion-style target keeps it sharp. */
.app-tile-widget-category[data-cat="disparos"]:before,
.app-detail-page-widget-overview-text-category[data-cat="disparos"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h6'/><path d='M11 8l4 4-4 4'/><circle cx='17' cy='12' r='2'/></svg>");
}
.app-tile-widget-category[data-cat="plataformas"]:before,
.app-detail-page-widget-overview-text-category[data-cat="plataformas"]:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='15' width='8' height='4' rx='0.5'/><rect x='13' y='9' width='8' height='4' rx='0.5'/></svg>");
}