/* MIDE OS · Portal Cliente · CRM por etapa (VJ-02) y tarjeta del Inicio (TB-02). Layout only: components come from
   ui/components.css and every value from ui/tokens.css (the tenant theme overrides the tokens, never this file). */
@layer views {
  /* ---------------------------------------------------------------- CRM · «Por etapa» */
  .crm-pipeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mide-space-3); min-width: 0; }
  .crm-pipeline-body { min-width: 0; }
  /* On «Por etapa» the CRM toolbar has nothing visible (its buttons belong to «Clientes»): it takes no row. */
  .crm:has(.crm-panel[data-panel="pipeline"]:not([hidden])) .crm-toolbar:not(:has(> :not([hidden]))) { display: none; }
  /* An empty notice region takes no row (no dead space between the tabs and the total). */
  .crm-pipeline > .ui-notice-region:empty, .crm-pipeline-head:empty { display: none; }
  .crm-pipeline-head { display: grid; gap: var(--mide-space-1); }
  /* Warnings of this view: text and icon in ink (AA); amber only as background and border. */
  .crm-pipeline-partial { display: flex; align-items: flex-start; gap: var(--mide-space-2); margin: 0; padding: var(--mide-space-2) var(--mide-space-3); border: 1px solid var(--mide-warn); border-radius: var(--mide-radius-sm); background: var(--mide-warn-bg); color: var(--mide-ink); font-size: var(--mide-text-sm); }
  .crm-pipeline-partial svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--mide-ink); }
  .ui-chip.crm-pipeline-warn-chip { border: 1px solid var(--mide-warn); background: var(--mide-warn-bg); color: var(--mide-ink); }
  .ui-chip.crm-pipeline-warn-chip svg { color: var(--mide-ink); }
  .crm-pipeline-total { margin: 0; color: var(--mide-ink); font-size: var(--mide-text-md); }
  /* Below 1100 px: one list grouped by stage (stacked). From 1100 px: one row in funnel order, fixed-width columns, scrolling
     inside the board only (the page never scrolls sideways). */
  .crm-pipeline-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mide-space-3); align-items: start; min-width: 0; }
  @media (min-width: 1100px) {
    .crm-pipeline-columns { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 264px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--mide-space-2); scroll-snap-type: x proximity; }
    .crm-pipeline-column { scroll-snap-align: start; }
  }
  /* The row says it has more: previous/next buttons (44 px), a fade on the edge that hides content and a visible scrollbar. */
  .crm-pipeline-scroller { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mide-space-2); min-width: 0; }
  .crm-pipeline-track { position: relative; min-width: 0; }
  .crm-pipeline-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mide-space-2) var(--mide-space-3); }
  .crm-pipeline-head-row > .crm-pipeline-total { flex: 1 1 18rem; }
  .crm-pipeline-nav-bar { display: flex; justify-content: flex-end; gap: var(--mide-space-2); }
  .crm-pipeline-nav-bar:empty { display: none; }
  .crm-pipeline-nav-bar:not(:has(> :not([hidden]))) { display: none; }
  /* The row is the containing block of what it holds (screen-reader-only text included), so nothing escapes its scroll. */
  .crm-pipeline-columns { position: relative; scrollbar-width: thin; scrollbar-color: var(--mide-muted) var(--mide-line-2); }
  .crm-pipeline-track::before, .crm-pipeline-track::after { content: ""; position: absolute; top: 0; bottom: var(--mide-space-4); z-index: 1; width: 56px; pointer-events: none; opacity: 0; transition: opacity var(--mide-duration) var(--mide-ease); }
  .crm-pipeline-track::before { left: 0; background: linear-gradient(90deg, var(--mide-surface), transparent); }
  .crm-pipeline-track::after { right: 0; background: linear-gradient(270deg, var(--mide-surface), transparent); }
  .crm-pipeline-scroller[data-overflow="true"][data-start="false"] .crm-pipeline-track::before, .crm-pipeline-scroller[data-overflow="true"][data-end="false"] .crm-pipeline-track::after { opacity: 1; }
  .crm-pipeline-nav.ui-button { width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .crm-pipeline-nav[hidden] { display: none; }
  .crm-pipeline-columns:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: 2px; border-radius: var(--mide-radius-sm); }
  .crm-pipeline-column { display: grid; gap: var(--mide-space-2); min-width: 0; padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface-2); }
  /* A closed stage reads differently in text (lock + «Cierre») and in its frame, never by colour alone. */
  .crm-pipeline-column[data-closed="true"] { border-style: dashed; background: var(--mide-surface); }
  .crm-pipeline-closed { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--mide-space-2); padding: 1px var(--mide-space-2); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-pill); color: var(--mide-ink-2); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-semibold); vertical-align: middle; }
  .crm-pipeline-closed svg { width: 12px; height: 12px; }
  .crm-pipeline-empty { margin: 0; padding: var(--mide-space-3); border: 1px dashed var(--mide-line); border-radius: var(--mide-radius-sm); color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: 1.8; }
  .crm-pipeline-empty strong { color: var(--mide-ink); }
  .crm-pipeline-empty-stage { white-space: nowrap; }
  .crm-pipeline-column-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mide-space-2); }
  .crm-pipeline-stage { margin: 0; font-size: var(--mide-text-sm); font-weight: var(--mide-weight-bold); color: var(--mide-heading); overflow-wrap: anywhere; }
  .crm-pipeline-count { min-width: 2rem; padding: 2px var(--mide-space-2); border-radius: var(--mide-radius-pill); background: var(--mide-surface); border: 1px solid var(--mide-line); color: var(--mide-ink); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-bold); font-variant-numeric: tabular-nums; text-align: center; }
  .crm-pipeline-cards { display: grid; gap: var(--mide-space-2); margin: 0; padding: 0; list-style: none; }
  .crm-pipeline-card { display: grid; gap: 2px; min-width: 0; padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface); overflow-wrap: anywhere; }
  .crm-pipeline-card-open { display: flex; align-items: center; justify-content: space-between; gap: var(--mide-space-2); width: 100%; min-height: 44px; margin: calc(-1 * var(--mide-space-2)) 0 0; padding: 0; border: 0; border-radius: var(--mide-radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .crm-pipeline-card-open:hover .crm-pipeline-card-title { text-decoration: underline; }
  .crm-pipeline-card-open:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: 2px; }
  .crm-pipeline-card-open svg { flex: 0 0 auto; color: var(--mide-muted); }
  .crm-pipeline-card-title { color: var(--mide-ink); font-size: var(--mide-text-md); font-weight: var(--mide-weight-semibold); overflow-wrap: anywhere; }
  /* Secondary text of a card: --mide-ink-2 (AA on the card surface). */
  .crm-pipeline-card .crm-meta { color: var(--mide-ink-2); }
  .crm-pipeline-card-actions { display: flex; flex-wrap: wrap; gap: var(--mide-space-1); margin-top: var(--mide-space-2); }
  /* Touch targets of the board are 44 px everywhere (not only on a phone). */
  .crm-pipeline .ui-button { min-height: 44px; }
  .crm-pipeline-none { padding: var(--mide-space-1) 0; }
  .crm-pipeline-more { display: flex; justify-content: center; }
  .crm-pipeline-more:empty { display: none; }
  .crm-pipeline .ui-state { min-height: 0; }

  /* ---------------------------------------------------------------- Inicio · indicadores */
  .home-trips { display: grid; gap: var(--mide-space-4); }
  .home-trips-total { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .home-trips-total strong { color: var(--mide-ink); font-size: var(--mide-text-lg); }
  .home-trips-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--mide-space-6); align-items: start; }
  @media (max-width: 900px) { .home-trips-grid { grid-template-columns: minmax(0, 1fr); } }
  .home-trips-block { display: grid; gap: var(--mide-space-3); min-width: 0; }
  .home-trips-heading { margin: 0; color: var(--mide-heading); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-bold); }
  /* One series (data series 1): the tenant theme maps --mide-blue-600 to its own primary (TENANT_BRANDING.md). */
  .home-trips-stages .ui-progress-item { --tone: var(--mide-blue-600); grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto; }
  .home-trips-stage-count { color: var(--mide-ink); font-weight: var(--mide-weight-semibold); }
  .home-trip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-3); width: 100%; min-height: 44px; 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-trip .home-row-text small { color: var(--mide-ink-2); }
  .home-trip:hover { background: var(--mide-surface-2); }
  .home-trip:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: 1px; }
  .home-trip-date { display: grid; justify-items: center; min-width: 3.5rem; padding: var(--mide-space-1) var(--mide-space-2); border-radius: var(--mide-radius-sm); background: var(--mide-surface-2); }
  .home-trip-date b { color: var(--mide-ink); font-size: var(--mide-text-sm); white-space: nowrap; }
  .home-trip-date small { color: var(--mide-ink-2); font-size: var(--mide-text-xs); white-space: nowrap; }
  @media (max-width: 480px) {
    .home-trip { grid-template-columns: auto minmax(0, 1fr); }
    .home-trip > .ui-chip { grid-column: 2; justify-self: start; }
  }
  .home-trips-card .ui-card-head { flex-wrap: wrap; }
  .home-trips-slot { display: grid; min-width: 0; }
  .home-trips-slot[hidden] { display: none; }
  /* Below 1100 px client-home.css lifts the cards out of their stacks: the slot takes the whole row, first. */
  @media (max-width: 1100px) { .home .home-trips-slot { grid-column: 1 / -1; order: 0; } }
}