/* MIDE OS · layout of the administration views rebuilt on ui/ (Equipo y Permisos,
   Integraciones, Configuración). Layout only: colours, type and spacing come from
   ui/tokens.css; components come from ui/components.css. */
@layer views {
  /* ---------- shared ---------- */
  .tv-person { display: flex; align-items: center; gap: var(--mide-space-3); min-width: 0; }
  .tv-person-text, .tv-stack { display: grid; gap: 2px; min-width: 0; }
  .tv-person-text strong { color: var(--mide-heading); font-weight: var(--mide-weight-semibold); overflow-wrap: break-word; }
  .tv-person-text span, .tv-stack small { color: var(--mide-muted); font-size: var(--mide-text-xs); overflow-wrap: break-word; }
  /* Scoped to these three views: unscoped, they reached every table of the portal (review #5:
     Auditoría's last phone-card cell squeezed to 3 px by «width: 1%»). */
  :is(.team-view, .integrations-view, .settings-view) .ui-table td.ui-wrap:first-child { min-width: 260px; overflow-wrap: break-word; }
  .tv-tabs { overflow-x: auto; margin: calc(var(--mide-space-1) * -1) 0 var(--mide-space-4); }
  .tv-controls { display: grid; gap: var(--mide-space-2); margin-bottom: var(--mide-space-3); }
  .tv-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--mide-space-3); }
  .tv-toolbar .ui-filter-bar { flex: 1 1 520px; }
  /* The result of an action: a notice in the flow of the page (never over content or the drawer's sticky footer),
     with a close button. Tone: ok (check, green accent) or danger (alert icon, danger tokens). */
  /* The region itself is ui.noticeRegion (issue 1133); the notice inside draws the box. */
  .tv-live[data-visible="true"] { margin-bottom: var(--mide-space-3); }
  .ui-inspector .tv-live[data-visible="true"] { margin-bottom: 0; }
  .tv-controls:has(> .tv-live:only-child:empty) { display: none; }
  /* «Gestionar» never clips when the drawer narrows the table. */
  .team-view .ui-table th:last-child, .team-view .ui-table td:last-child { min-width: 112px; white-space: nowrap; }
  /* Phone (issue 1133 Fase 2): people, invitations and areas are cards; «Gestionar» is not repeated in each one because
     the whole card opens the record (tap, Enter or Space on the focusable row). */
  @media (max-width: 640px) {
    .team-view .ui-table:has(td:last-child > .tv-row-action) :is(th, td):last-child { display: none; }
    /* The card says it opens (issue 1133 Fase 2, review of 1149): «Ver detalle ›» at the right (decorative: the row's
       accessible name is «Abrir a {nombre}»), the whole card is the target, and its focus is clearly visible. */
    /* Integraciones uses the same cards: the «⋯» action is not repeated (the card opens the service). */
    .integrations-view .ui-data-table-cards .ui-table :is(th, td):last-child { display: none; }
    :is(.team-view, .integrations-view) .ui-data-table-cards .ui-row-selectable::after { content: "Ver detalle ›" / ""; grid-column: 1 / -1; justify-self: end; color: var(--mide-link); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); }
    :is(.team-view, .integrations-view) .ui-data-table-cards .ui-row-selectable:focus-visible { outline: 2px solid var(--mide-focus-ring); outline-offset: 2px; border-color: var(--mide-focus-ring); }
  }
  .tv-offboard-result { margin: 0; }
  .ui-list-main .ui-table td:last-child .ui-button-ghost { color: var(--mide-accent); }
  .iv-features { display: grid; gap: var(--mide-space-2); margin: 0; padding: 0; list-style: none; }
  .iv-features li { display: flex; align-items: center; gap: var(--mide-space-2); color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .iv-features .ui-icon { width: 16px; height: 16px; color: var(--mide-ok); }
  .tv-note { display: flex; align-items: flex-start; gap: var(--mide-space-2); padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius); background: var(--mide-surface-2); color: var(--mide-ink-2); }
  .tv-note .ui-icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--mide-accent); }
  .tv-note p { margin: 0; font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .tv-muted { margin: 0; color: var(--mide-muted); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .tv-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-2); }
  .tv-status-row { justify-content: space-between; }
  .tv-section { display: grid; gap: var(--mide-space-3); padding-top: var(--mide-space-4); border-top: 1px solid var(--mide-line-2); }
  .tv-section-title { margin: 0; color: var(--mide-heading); font-size: var(--mide-text-md); font-weight: var(--mide-weight-bold); }
  .tv-facts { display: grid; gap: var(--mide-space-2); margin: 0; }
  .tv-facts > div { display: flex; justify-content: space-between; gap: var(--mide-space-3); font-size: var(--mide-text-sm); }
  .tv-facts dt { color: var(--mide-muted); }
  .tv-facts dd { margin: 0; color: var(--mide-ink); font-weight: var(--mide-weight-semibold); text-align: right; overflow-wrap: anywhere; }
  .tv-toggles { display: grid; gap: var(--mide-space-3); }
  .tv-confirm { display: grid; gap: var(--mide-space-3); padding: var(--mide-space-4); border: 1px solid var(--mide-danger); border-radius: var(--mide-radius); background: var(--mide-danger-bg); color: var(--mide-ink); }
  .tv-confirm p { margin: 0; font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  /* Issue 1198 visual review: a confirmation is never covered by the panel's fixed action bar (padding below it, and it
     scrolls into view clear of the bar); while it is open the bar itself is not rendered (team-view.js). */
  .ui-inspector-body:has(.tv-confirm) { padding-bottom: var(--mide-space-6, 24px); }
  .tv-confirm { scroll-margin-bottom: 120px; }
  /* Hints and secondary text on the danger background use ink tones (AA on --mide-danger-bg), never --mide-muted. */
  .tv-confirm .ui-field-hint, .tv-confirm .tv-muted { color: var(--mide-ink-2); }
  .tv-confirm .ui-field-label { color: var(--mide-ink); }
  .tv-confirm .ui-select-menu, .tv-confirm .ui-select-menu-trigger { width: 100%; min-width: 0; max-width: 100%; }
  .tv-confirm .ui-select-menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The sticky drawer footer never covers the confirmation block or a focused field. */
  .team-view .ui-inspector { scroll-padding-bottom: 96px; }
  .team-view .tv-confirm { scroll-margin-bottom: 96px; }
  .tv-pending-work .ui-icon { color: var(--mide-warn, var(--mide-accent)); }
  .tv-result { display: grid; justify-items: start; gap: var(--mide-space-3); }
  .tv-result p { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .tv-invite-form { grid-template-columns: 1fr; }
  .tv-directory-empty { padding: 0; }
  .tv-notice-slot:empty { display: none; }
  .tv-table-slot[hidden] { display: none; }
  /* Visual QA of PR 1164 (follow-up): the title block gets room above and the full width it needs beside a short action. */
  .team-view > .ui-page-header, .team-view .ui-page-header { margin-top: var(--mide-space-3); }
  .team-view .ui-page-header .ui-actions { max-width: 280px; }
  .team-view .ui-page-header .ui-disabled-reason { color: var(--mide-muted); font-size: var(--mide-text-xs); }
  /* On a phone the tabs scroll sideways with the fade cue of ui/components.css; no extra gap before the notice. */
  @media (max-width: 640px) {
    .team-view .tv-tabs { margin-bottom: var(--mide-space-2); }
    .team-view .tv-controls { gap: var(--mide-space-2); }
  }

  /* ---------- Equipo · áreas de atención (issue 1099) ---------- */
  .tv-area-controls, .tv-area-form, .tv-area-facts, .tv-create-area, .tv-weekly, .tv-member-list { display: grid; gap: var(--mide-space-3); }
  .tv-area-form, .tv-create-area { gap: var(--mide-space-4); }
  .tv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-1); }
  .tv-skill-chip { padding-right: 2px; }
  /* 32 px target on desktop (issue 1133); the chip keeps its height through the negative margin. Phones: 44 px (ui/components.css). */
  .tv-skill-chip .ui-button.ui-button-icon { width: 32px; min-height: 32px; height: 32px; margin: -6px -8px -6px -2px; border-radius: var(--mide-radius-pill); color: inherit; }
  .tv-skill-chip .ui-button .ui-icon { width: 14px; height: 14px; }
  .tv-fieldset { display: grid; gap: var(--mide-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
  .tv-fieldset > legend { padding: 0; margin-bottom: var(--mide-space-2); }
  .tv-add-row { display: flex; align-items: center; gap: var(--mide-space-2); }
  .tv-add-row .ui-input { flex: 1 1 auto; min-width: 0; }
  .tv-number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--mide-space-3); align-items: start; }
  .tv-days { display: grid; }
  .tv-day { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-2); padding: var(--mide-space-2) 0; border-bottom: 1px solid var(--mide-line-2); }
  .tv-day:last-child { border-bottom: 0; }
  .tv-day-name { color: var(--mide-ink); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); }
  .tv-windows { display: grid; gap: var(--mide-space-1); min-width: 0; }
  .tv-window { display: flex; align-items: center; gap: var(--mide-space-2); min-width: 0; }
  .tv-window .ui-input { flex: 0 1 116px; width: 116px; min-width: 0; }
  /* The desktop inspector column (≈ 360 px) is too narrow for name + two times + actions on one row (the times
     measured 26 px, issue 1133): there the windows take their own row, as on phones. */
  .ui-inspector .tv-day { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-inspector .tv-day .tv-windows { grid-column: 1 / -1; grid-row: 2; }
  .ui-inspector .tv-window .ui-input { flex: 1 1 0; width: auto; }
  .tv-form-status { margin: 0; padding: var(--mide-space-2) var(--mide-space-3); border: 1px solid var(--mide-line); border-left: 3px solid var(--mide-danger); border-radius: var(--mide-radius); background: var(--mide-surface-2); color: var(--mide-ink); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .tv-member-row { display: grid; gap: var(--mide-space-2); padding: var(--mide-space-3); border: 1px solid var(--mide-line-2); border-radius: var(--mide-radius); }
  .tv-member-row.is-editing { border-color: var(--mide-accent); }
  .tv-member-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mide-space-2); }
  .tv-schedule-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--mide-text-sm); }
  .tv-schedule-list li { display: flex; justify-content: space-between; gap: var(--mide-space-3); }

  /* QA visual (PR 1113) ---------- */
  /* Row action: visible text, ink from the tokens, 44 px target. */
  .team-view .tv-row-action { min-height: 44px; color: var(--mide-ink); border-color: var(--mide-line); }
  /* Nine columns: a narrower first column and tighter cells so Acciones stays in view on desktop. */
  .team-view .tv-areas-table .ui-table td.ui-wrap:first-child { min-width: 180px; }
  .team-view .tv-areas-table .ui-table :is(th, td) { padding-left: var(--mide-space-2); padding-right: var(--mide-space-2); }
  /* Cards (narrow table): label and value side by side, never pushed to opposite edges. */
  @container ui-table (max-width: 860px) {
    .team-view .ui-data-table-cards[data-cards="wide"] .ui-table td { grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr); text-align: left; }
    .team-view .ui-data-table-cards[data-cards="wide"] .ui-table td > * { justify-self: start; }
    /* The table's «width: 1%» action cell would squeeze «Gestionar» inside a card. */
    .team-view .ui-list-main .ui-data-table-cards[data-cards="wide"] .ui-table td:last-child { width: auto; }
  }
  @container ui-table (max-width: 640px) {
    .team-view .ui-data-table-cards[data-cards="wide"] .ui-table td { grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr); }
    .team-view .tv-areas-table .ui-table td.ui-wrap:first-child { min-width: 0; }
  }
  /* Inspector: bounded by the viewport, scrolls inside, sticky footer that signals more content below. */
  @media (min-width: 901px) {
    .team-view .ui-inspector { max-height: min(var(--tv-inspector-room, 100dvh), calc(100dvh - var(--mx-topbar-h, 72px) - var(--mide-space-6))); overflow-y: auto; overscroll-behavior: contain; }
    /* Invitation panel: a full-height side panel below the top bar, in the column the list keeps for it (its
       position and width are measured from that column, team-view.js). Nothing to scroll at 1440 x 900. */
    /* While it is open, the header and indicators above the list keep clear of it (same column width as the list). */
    .team-view:has(.ui-inspector[data-open="true"] > .ui-inspector-foot > .tv-stacked-foot) > :not(.ui-list-inspector) { margin-right: calc(360px + var(--mide-space-5)); }
    @media (max-width: 1180px) { .team-view:has(.ui-inspector[data-open="true"] > .ui-inspector-foot > .tv-stacked-foot) > :not(.ui-list-inspector) { margin-right: calc(320px + var(--mide-space-5)); } }
    .team-view .ui-inspector:has(> .ui-inspector-foot > .tv-stacked-foot) { position: fixed; z-index: 5; top: calc(var(--mx-topbar-h, 72px) + var(--mide-space-3)); bottom: var(--mide-space-3); left: var(--tv-inspector-left, auto); right: var(--tv-inspector-right, var(--mide-space-6)); width: var(--tv-inspector-w, 360px); height: auto; max-height: none; }
  }
  /* Review of PR 1131: opaque sticky footer with a solid top border (no translucent fade over the
     content), and focus/scroll targets stop above it (scroll-padding = the measured footer height). */
  .team-view .ui-inspector { scroll-padding-bottom: calc(var(--tv-inspector-foot-h, 0px) + var(--mide-space-3)); }
  .team-view .ui-inspector-foot { position: sticky; bottom: calc(var(--mide-space-5) * -1); z-index: 1; margin-bottom: calc(var(--mide-space-5) * -1); padding-bottom: var(--mide-space-5); background: var(--mide-surface); border-top: 1px solid var(--mide-line); }
  .team-view .ui-inspector-body { padding-bottom: var(--mide-space-5); }
  /* Issue 1117 visual review: invitation actions stacked full width, in DOM order («Reenviar» first, destructive below) at
     every width; overrides the phone rule that reverses the footer. */
  .team-view .ui-inspector-foot:has(> .tv-stacked-foot) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .team-view .ui-inspector-foot:has(> .tv-stacked-foot) > .ui-button { width: 100%; }
  /* Invitation panel (issue 1117 visual review): the whole height below the top bar, content on top, the notice under
     it (compact) and the actions in a fixed footer with padding. */
  .team-view .ui-inspector:has(> .ui-inspector-foot > .tv-stacked-foot) { display: flex; flex-direction: column; }
  .team-view .ui-inspector:has(> .ui-inspector-foot > .tv-stacked-foot) > .ui-inspector-body { flex: 1 0 auto; align-content: start; padding-bottom: var(--mide-space-3); }
  .team-view .ui-inspector:has(> .ui-inspector-foot > .tv-stacked-foot) > .ui-inspector-foot { margin-top: auto; }
  .team-view .tv-live-compact .ui-notice { padding: var(--mide-space-2) var(--mide-space-3); font-size: var(--mide-text-sm); line-height: 1.4; }
  /* Scroll cue while there is more content below: a second solid line, never a translucent fade. It is drawn inside the
     footer (its height is reserved there), so it never lies over a label or a hint of the panel; it goes at the end. */
  .team-view .ui-inspector[data-scroll-more="true"] .ui-inspector-foot { box-shadow: inset 0 2px 0 var(--mide-line); }
  /* Issue 1117 visual review: content cut by the sticky footer fades out above it (token colours only), and the
     scrollbar stays visible, so a half line always reads as «more below». */
  .team-view .ui-inspector[data-scroll-more="true"] .ui-inspector-foot::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 48px; background: linear-gradient(transparent, var(--mide-surface)); pointer-events: none; }
  .team-view .ui-inspector { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--mide-line) transparent; }
  .tv-warning-note .ui-icon { color: var(--mide-ink-2); }
  /* Without a footer (read-only session) the cue is a fade at the bottom edge. */
  .team-view .ui-inspector:has(> .ui-inspector-foot[hidden])[data-scroll-more="true"]::after { content: ''; position: sticky; bottom: calc(var(--mide-space-5) * -1); display: block; height: 40px; margin: calc(-40px - var(--mide-space-4)) calc(var(--mide-space-5) * -1) calc(var(--mide-space-5) * -1); background: linear-gradient(transparent, var(--mide-surface)); border-bottom: 3px solid var(--mide-line); pointer-events: none; }
  /* Disabled header action (read-only session): legible, with its reason in `title`. */
  .team-view .ui-page-header .ui-button:disabled { opacity: 1; background: var(--mide-surface-2); background-image: none; border-color: var(--mide-line); color: var(--mide-ink-2); }
  .tv-readonly-note .ui-icon { color: var(--mide-ink-2); }
  :is(.team-view, .integrations-view, .settings-view) .ui-list-main .ui-table td:last-child { width: 1%; }
  @media (max-width: 640px) { :is(.team-view, .integrations-view, .settings-view) .ui-data-table-cards .ui-table td { width: auto; min-width: 0; } }

  /* ---------- Integraciones ---------- */
  .iv-gates { display: grid; gap: var(--mide-space-2); margin: 0; padding: 0; list-style: none; }
  .iv-gate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-3); padding: var(--mide-space-2) 0; border-bottom: 1px solid var(--mide-line-2); }
  .iv-gate:last-child { border-bottom: 0; }
  .iv-gate time { color: var(--mide-muted); font-size: var(--mide-text-xs); white-space: nowrap; }

  /* ---------- Negocios y números ---------- */
  .bc-grid { display: grid; gap: var(--mide-space-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .bc-channels { display: grid; gap: var(--mide-space-2); margin: 0; padding: 0; list-style: none; }
  .bc-channel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-1) var(--mide-space-3); padding: var(--mide-space-2) 0; border-bottom: 1px solid var(--mide-line-2); }
  .bc-channel:last-child { border-bottom: 0; }
  .bc-phone { color: var(--mide-heading); font-weight: var(--mide-weight-semibold); font-variant-numeric: tabular-nums; }
  .bc-license { grid-column: 1 / -1; color: var(--mide-muted); font-size: var(--mide-text-xs); }
  @media (max-width: 900px) { .bc-grid { grid-template-columns: 1fr; } }

  /* ---------- Configuración ---------- */
  .sv-card .ui-card-body { display: grid; gap: var(--mide-space-4); }
  .sv-grid { display: grid; gap: var(--mide-space-4); }
  .sv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-pref { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--mide-space-3); }
  .sv-pref .ui-tile { margin-top: 22px; }
  .sv-days { display: grid; gap: var(--mide-space-2); }
  .sv-day { display: grid; grid-template-columns: minmax(160px, 1fr) 128px auto 128px; align-items: center; gap: var(--mide-space-3); padding: var(--mide-space-2) 0; border-bottom: 1px solid var(--mide-line-2); }
  .sv-day:last-child { border-bottom: 0; }
  .sv-day .ui-toggle { flex-direction: row-reverse; justify-content: flex-end; gap: var(--mide-space-3); }
  .sv-day-sep { color: var(--mide-muted); font-size: var(--mide-text-sm); }
  .sv-status { margin: 0; min-height: 1.3em; font-size: var(--mide-text-sm); font-weight: var(--mide-weight-medium); color: var(--mide-ink-2); }
  .sv-status:empty { display: none; }
  .sv-status-ok { color: var(--mide-ok); }
  .sv-status-error { color: var(--mide-danger); }
  .sv-services { display: grid; gap: var(--mide-space-2); margin: 0; padding: 0; list-style: none; }
  .sv-services li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-3); font-size: var(--mide-text-sm); color: var(--mide-ink); }
  .sv-services .ui-tile { width: 32px; height: 32px; flex-basis: 32px; border-radius: var(--mide-radius-sm); }
  .sv-aside-card .ui-card-foot { justify-content: flex-start; }
  /* «Última verificación» and the list of services are two rows with air between them (issue 1133 Fase 2). */
  .sv-aside-card .ui-card-body { display: grid; gap: var(--mide-space-3); }
  .sv-aside-card .ui-card-body > p { margin: 0; }
  /* «Asientos» inside «Plan y consumo»: a section label, full ink contrast (not muted). */
  .sv-aside-card .sv-usage-section { margin-top: var(--mide-space-2); font-size: var(--mide-text-sm); font-weight: 700; color: var(--mide-ink-900); }

  @media (max-width: 900px) {
    .sv-grid-2 { grid-template-columns: 1fr; }
    .sv-day { grid-template-columns: 1fr 1fr; }
    .sv-day .ui-toggle { grid-column: 1 / -1; }
    .sv-day-sep { display: none; }
    .tv-facts > div { flex-direction: column; gap: 2px; }
    .tv-facts dd { text-align: left; }
    /* Drawer footer on phones: full width, primary first, destructive below. */
    /* In a column a wrapping item would open a second column off screen: the disabled reason stacks instead. */
    .team-view .ui-inspector-foot { flex-direction: column-reverse; align-items: stretch; }
    .team-view .ui-inspector-foot { flex-wrap: nowrap; }
    .team-view .ui-inspector-foot > :is(.ui-disabled-reason, .ui-form-message) { flex: 0 0 auto; }
    .team-view .ui-inspector-foot > .ui-button { width: 100%; }
    .tv-day { grid-template-columns: minmax(0, 1fr) auto; }
    .tv-day .tv-windows { grid-column: 1 / -1; grid-row: 2; }
  }
}