/* MIDE OS · Portal Cliente · Inicio (reference client/01). Layout of the view only: every
   component comes from ui/components.css and every value from ui/tokens.css. */
@layer views {
  .home.ui-template { padding-top: var(--mide-space-1); }

  /* Five KPIs in one row on wide screens; they wrap (never truncate) below that. */
  @media (min-width: 1400px) { .home-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

  .home-callout { display: grid; gap: var(--mide-space-1); margin: 0; padding: var(--mide-space-4) var(--mide-space-5); border-radius: var(--mide-radius-lg); background: var(--mide-warn-bg); color: var(--mide-ink-2); }
  .home-callout strong { color: var(--mide-warn); }

  .home-card > .ui-card-head { align-items: center; }
  .home .ui-page-header > .ui-actions { flex-wrap: nowrap; }
  .home-chart { min-height: 200px; }
  .home-chart > .ui-state { min-height: 200px; align-content: center; }
  .home-footnote { margin: var(--mide-space-3) 0 0; color: var(--mide-muted); font-size: var(--mide-text-sm); }

  .home-list { display: grid; margin: 0; padding: 0; list-style: none; }
  .home-list > li + li { border-top: 1px solid var(--mide-line-2); }
  .home-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-3); padding: var(--mide-space-3) 0; }
  .home-row-text { display: grid; gap: 2px; min-width: 0; }
  .home-row-text strong { color: var(--mide-ink); font-size: var(--mide-text-md); font-weight: var(--mide-weight-semibold); overflow-wrap: anywhere; }
  .home-row-text small { color: var(--mide-muted); font-size: var(--mide-text-xs); overflow-wrap: anywhere; }

  .home-recent-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-3); width: 100%; padding: var(--mide-space-3) var(--mide-space-1); border: 0; border-radius: var(--mide-radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .home-recent-item:hover { background: var(--mide-surface-2); }
  .home-recent-item:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: 1px; }
  /* Up to two lines: the end of the line («ventana cerrada») is what tells two rows apart. */
  .home-recent-item .home-row-text small { display: -webkit-box; overflow: hidden; overflow-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .home-recent-meta { display: grid; justify-items: end; gap: var(--mide-space-1); }
  .home-recent-meta time { color: var(--mide-muted); font-size: var(--mide-text-xs); white-space: nowrap; }

  .home-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--mide-space-3); margin: 0; padding: 0; list-style: none; }
  .home-product { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--mide-space-2) var(--mide-space-3); padding: var(--mide-space-4); border: 1px solid var(--mide-panel-line); border-radius: var(--mide-radius); background: var(--mide-surface-2); }
  .home-product .home-row-text { justify-items: start; }
  .home-product-actions { display: flex; flex-wrap: wrap; gap: var(--mide-space-2); grid-column: 1 / -1; }
  .home-product-actions > small { color: var(--mide-muted); font-size: var(--mide-text-xs); }
  /* A single product (4 columns): identity, its real figures and the way in. */
  .home-products[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .home-products[data-count="1"] .ui-tile { width: 44px; height: 44px; }
  .home-product-facts { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mide-space-1) var(--mide-space-3); margin: 0; padding-top: var(--mide-space-3); border-top: 1px solid var(--mide-line); }
  /* Subgrid: a label that wraps (390 px) keeps every figure on one line, as in the KPI cards. */
  .home-product-facts > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 2px; min-width: 0; }
  .home-product-facts dt { align-self: end; color: var(--mide-muted); font-size: var(--mide-text-xs); }
  .home-product-facts dd { margin: 0; color: var(--mide-heading); font-size: var(--mide-text-xl); font-weight: var(--mide-weight-heavy); font-variant-numeric: tabular-nums; }
  .home-product-facts small { display: block; color: var(--mide-muted); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-regular); }

  .home-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mide-space-3); }
  .home-shortcut { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-3); min-height: 56px; padding: var(--mide-space-2) var(--mide-space-3); border: 1px solid var(--mide-panel-line); border-radius: var(--mide-radius); background: var(--mide-surface); color: var(--mide-ink); font: var(--mide-weight-regular) var(--mide-text-sm)/1.3 var(--mide-font); text-align: left; cursor: pointer; }
  .home-shortcut .home-row-text strong { font-size: var(--mide-text-sm); }
  .home-shortcut:hover { border-color: var(--mide-blue-100); background: var(--mide-accent-soft); }
  .home-shortcut:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: 2px; }
  .home-shortcut > .ui-icon:last-child { width: 16px; height: 16px; color: var(--mide-muted); }
  .home-shortcut .ui-tile { flex-basis: 36px; width: 36px; height: 36px; }
  /* Phones: 2 × 2 compact shortcuts (icon and name; the description shows from 721 px). After the
     base rules: the same specificity must come later to apply (review #6: it never did). */
  @media (max-width: 720px) {
    /* Icon above the name: the whole card width is left for the word («Conversaciones» never splits). */
    .home-shortcut { grid-template-columns: minmax(0, 1fr); justify-items: start; min-height: 0; padding: var(--mide-space-3); gap: var(--mide-space-2); }
    .home-shortcut .home-row-text small, .home-shortcut > .ui-icon:last-child { display: none; }
    .home-shortcut .ui-tile { width: 28px; height: 28px; }
    .home-shortcut .home-row-text { min-width: 0; max-width: 100%; }
    .home-shortcut .home-row-text strong { display: block; overflow-wrap: normal; }
  }

  /* Below 1100 px the columns become one list: what you act on first, connections and the
     handoffs summary last. */
  @media (max-width: 1100px) {
    .home .home-main, .home .home-side, .home .home-pair { display: contents; }
    /* Cards lifted out of the stacks are not DOM children of the grid: give them the full row. */
    .home .ui-dashboard-grid .ui-card { grid-column: 1 / -1; min-width: 0; }
    .home .home-activity { order: 1; } .home .home-ownership { order: 2; } .home .home-recent-card { order: 3; }
    .home .home-shortcuts-card { order: 4; } .home .home-products-card { order: 5; }
    .home .home-flow { order: 6; } .home .home-connections { order: 7; }
  }
}