/* Sarea: solo la composición que ui/shared/dirutxi.css no cubre. Fuente, colores, rail, barra
   superior, métricas, tablas y banners vienen del sistema común (.dx-root, tokens var(--…)).
   Se carga después de app.css y del paquete de estilos del host. */

body { margin: 0; }

/* ── Carcasa ──────────────────────────────────────────────────────────── */
/* Sarea tiene 14 secciones con etiquetas largas en castellano: el rail pasa de 96 a 120 px
   con menos relleno para que ninguna etiqueta se corte. */
.sarea-rail .dx-rail-brand { padding-inline: var(--space-3); min-height: 56px; min-width: var(--target-min); text-decoration: none; }
.sarea-rail .dx-rail-brand .dx-brand-stack { color: var(--color-chrome-text); }
.sarea-rail-nav { display: flex; flex-direction: column; }
.sarea-rail > *, .sarea-rail-nav > * { flex-shrink: 0; }  /* ni en columna ni en fila se encogen */
.sarea-rail .dx-rail-item {
  position: relative; min-height: 64px; padding: var(--space-3); letter-spacing: 0.03em; line-height: 1.2;
  border-bottom: 1px solid var(--color-chrome-rule); overflow-wrap: anywhere;
}
.sarea-rail .dx-rail-item svg { flex: none; }
/* Cuenta de pendientes (invitaciones): la cifra acompaña a la etiqueta, no depende del color. */
.sarea-rail-count {
  position: absolute; top: var(--space-2); right: var(--space-2); min-width: 20px; padding: 0 var(--space-1);
  background: var(--color-accent-solid); color: var(--color-on-accent);
  font-size: var(--font-size-xs); font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.sarea-rail .dx-rail-user { padding-inline: var(--space-3); }
.sarea-rail .dx-rail-user form { margin: 0; }
.sarea-main { min-width: 0; display: flex; flex-direction: column; }
.sarea-content { padding: var(--space-6); min-width: 0; max-width: 1500px; }
.sarea-topbar-logout { margin: 0; }

@media (min-width: 768px) {
  .dx-shell.sarea-shell { grid-template-columns: 120px minmax(0, 1fr); }
  /* El rail no se desplaza con la página y, si no cabe, se desplaza él solo: «Salir» nunca
     queda fuera de alcance. */
  .sarea-rail { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
  /* El bloque de usuario queda anclado al pie visible del rail aunque las secciones no quepan. */
  .sarea-rail .dx-rail-user { position: sticky; bottom: 0; z-index: 1; background: var(--color-chrome); }
  .sarea-topbar-logout { display: none; }
}
@media (max-width: 767px) {
  .sarea-rail-nav { flex-direction: row; }
  .sarea-rail .dx-rail-item { white-space: nowrap; overflow-wrap: normal; border-bottom: 0; border-right: 1px solid var(--color-chrome-rule); }
  .sarea-content { padding: var(--space-4); }
  .sarea-header .dx-topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Páginas del host (Mi negocio, Organización, Invitaciones, Identity) ── */
.sarea-page { display: flex; flex-direction: column; gap: var(--space-4); max-width: 980px; }
.sarea-page-head h1, .sarea-resumen-head h1 { font-size: var(--font-size-2xl); margin: 0; }
.sarea-page-head p, .sarea-resumen-head p { margin: 0; }
.sarea-page-head { display: flex; flex-direction: column; gap: var(--space-1); }
.sarea-panel {
  min-width: 0; padding: var(--space-5) 0 0;
  border-top: var(--rule-strong) solid var(--color-divider);
}
.sarea-panel h2 { font-size: var(--font-size-lg); margin: 0 0 var(--space-3); }
.sarea-panel h3 { font-size: var(--font-size-md); margin: var(--space-5) 0 var(--space-2); }
.sarea-panel > p { margin: 0 0 var(--space-3); max-width: 70ch; }
.sarea-panel .dx-table-wrap { margin-bottom: var(--space-4); }
.sarea-muted { color: var(--color-text-muted); }
/* Formularios: rejilla que pasa a una columna en 390 px; acciones al final, alineadas a la izquierda. */
.sarea-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-3) var(--space-4); align-items: end; }
.sarea-form > :where(.validation-errors, ul), .sarea-form-wide, .sarea-form-actions { grid-column: 1 / -1; }
.sarea-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sarea-form-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.sarea-form-row .field { flex: 1 1 260px; max-width: 480px; }
.sarea-checks { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.sarea-checks legend { padding: 0; margin-bottom: var(--space-1); }
.sarea-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); font-size: 14px; cursor: pointer; }
.sarea-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent-solid); }
.sarea-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.sarea-tag-gap { margin-left: var(--space-2); }
.sarea-invitations { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-divider); }
.sarea-invitation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.sarea-invitation-main { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
/* Páginas de Identity (.form-control) aún sin .input. */
.sarea-content .form-control {
  display: block; width: min(100%, 420px); max-width: 100%; min-height: var(--target-min);
  padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
/* Mensajes de validación de Blazor: app.css los pinta con hex fijos (#e50000, #26b050). */
.dx-root .validation-message, .dx-root .validation-errors { color: var(--color-danger); font-size: 13px; font-weight: 600; }
.dx-root .invalid { outline: 0; border-color: var(--color-danger); border-width: 2px; }
.dx-root .valid.modified:not([type=checkbox]) { outline: 0; }

/* ── Páginas de módulo (ui/sarea/**) ────────────────────────────────────
   .sarea-content ya pone el relleno de la página: los módulos no añaden otro. Títulos de tarjeta
   en --font-size-lg (el h1 de la página sigue siendo el mayor) y --space-6 entre secciones.
   Clientes y Comunicaciones comparten composición (.sarea-workspace): antes eran dos .razor.css
   idénticos; aquí no hay nada que otro componente pueda heredar sin querer. */
.sarea-content .card h2 { font-size: var(--font-size-lg); margin: 0; }
.sarea-content :is(.catalog-workspace, .extensions-workspace, .franchise-workspace) h2 { font-size: var(--font-size-lg); }
.sarea-content .card h3 { font-size: var(--font-size-md); margin: var(--space-3) 0 0; }
.sarea-panel.sarea-workspace {
  max-width: 78rem; padding: 0; border-top: 0; margin-bottom: 0; display: grid; gap: var(--space-6);
}
.sarea-workspace section.card { gap: var(--space-3); }
.sarea-workspace .field { max-width: 26rem; }
.sarea-workspace .field-check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); }
.sarea-workspace .field-set {
  min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2);
}
.sarea-workspace .field-set legend { padding-inline: var(--space-2); font-weight: 700; }
@media (max-width: 600px) { .sarea-panel.sarea-workspace { gap: var(--space-5); } }
/* Selector de archivo propio: la etiqueta .btn en castellano abre el input nativo oculto. */
.sarea-file { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.sarea-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sarea-file:focus-within .btn { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sarea-file:has(input[type=file]:disabled) .btn { opacity: .55; cursor: not-allowed; }
.sarea-hash { margin-top: var(--space-1); }
.sarea-hash summary { cursor: pointer; min-height: var(--target-min); display: inline-flex; align-items: center; color: var(--color-accent-text); }
.sarea-hash code { display: block; word-break: break-all; font-size: var(--font-size-sm); }

/* ── Resumen de red (Mi negocio) ──────────────────────────────────────── */
.sarea-resumen { display: flex; flex-direction: column; gap: var(--space-4); }
.sarea-resumen-title { font-size: var(--font-size-2xl); margin: 0; }
.sarea-resumen-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.sarea-resumen-head a { color: var(--color-accent-text); font-weight: 700; }
/* Barra del resumen: filtros a la izquierda y «RED n/m» al final, con regla de 2 px. */
.sarea-resumen-bar {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-5);
  padding-top: var(--space-3); border-top: var(--rule-strong) solid var(--color-divider);
}
.sarea-filter { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sarea-filter .field-label { margin: 0; }
.sarea-filter .seg-opt:disabled { cursor: progress; }
.sarea-filter-off {
  display: inline-flex; align-items: center; min-height: var(--target-min); padding-inline: var(--space-3);
  border: 1px dashed var(--color-border); font-size: 13px; color: var(--color-text-muted);
}
.sarea-red {
  margin: 0 0 0 auto; display: inline-flex; align-items: baseline; gap: var(--space-2);
  min-height: var(--target-min); padding: var(--space-2) var(--space-3); background: var(--color-text); color: var(--color-bg);
}
.sarea-red-label { font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sarea-red strong { font-size: var(--font-size-lg); }
.sarea-metrics { border-top: var(--rule-strong) solid var(--color-divider); border-bottom: var(--rule-strong) solid var(--color-divider); }
.sarea-metrics .dx-metric:last-child { border-right: 0; }
.sarea-metric-note { font-size: 12px; color: var(--color-text-muted); }
.sarea-metric-note[data-state] { font-weight: 700; color: var(--color-text); }
.sarea-resumen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); border-bottom: var(--rule-strong) solid var(--color-divider); }
.sarea-resumen-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-6) 0; border-right: var(--rule-strong) solid var(--color-divider); }
.sarea-resumen-aside { min-width: 0; display: flex; flex-direction: column; background: var(--color-surface); }
.sarea-resumen-aside > section + section { border-top: var(--rule-strong) solid var(--color-divider); }
.sarea-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.sarea-section-head h2 { font-size: var(--font-size-lg); margin: 0; }
.sarea-section-head .sarea-muted { font-size: var(--font-size-sm); }
.sarea-resumen-aside .sarea-section-head { padding: var(--space-4) var(--space-5); border-bottom: var(--rule-strong) solid var(--color-divider); }
.sarea-resumen-aside .sarea-section-head .sarea-muted { margin-left: auto; }
.sarea-resumen-aside > section > .dx-banner { margin: var(--space-4) var(--space-5); }
.sarea-note { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.sarea-resumen-aside .sarea-note { padding: var(--space-3) var(--space-5); }
.sarea-num { font-variant-numeric: tabular-nums; text-align: right; }

/* Composición del periodo: barra apilada por local (método dataviz). Tres series como máximo con
   color fijo por entidad: acento, tinta y, la tercera («Otros» o el tercer local), en contorno de
   tinta de 2 px sobre la superficie, que se distingue del fondo y de las otras dos en claro y en
   oscuro sin depender de la luminosidad. Entre segmentos, una regla de 2 px del color del fondo.
   Reparte por local, no Tabernas frente a Dendas en el tiempo como la fuente: Sarea no registra
   el tipo de local (lo dice la nota bajo el gráfico). La leyenda lleva cada importe. */
.sarea-stack { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sarea-stack-bar { display: flex; gap: 2px; height: 48px; background: var(--color-bg); }
.sarea-stack-seg { position: relative; flex-basis: 0; min-width: 4px; display: flex; align-items: center; padding-inline: var(--space-2); overflow: hidden; }
.sarea-stack-pct { font-size: var(--font-size-sm); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-bg); }
.sarea-stack [data-serie="1"] { background: var(--color-accent-solid); }
.sarea-stack [data-serie="2"] { background: var(--color-text); }
.sarea-stack [data-serie="3"] { background: var(--color-surface); box-shadow: inset 0 0 0 var(--rule-strong) var(--color-text); }
.sarea-stack-seg[data-serie="1"] .sarea-stack-pct { color: var(--color-on-accent); }
.sarea-stack-seg[data-serie="3"] .sarea-stack-pct { color: var(--color-text); }
.sarea-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.sarea-legend li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: 600; }
.sarea-legend-key { width: 14px; height: 14px; flex: none; }

/* Clasificación de locales con .dx-bar. */
.sarea-ranking { list-style: none; margin: 0; padding: 0; }
.sarea-ranking-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: var(--space-1);
  align-items: baseline; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-divider);
}
.sarea-ranking-pos { font-size: var(--font-size-xs); font-weight: 800; color: var(--color-text-muted); }
.sarea-ranking-name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.sarea-ranking-value { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.sarea-ranking-bar, .sarea-ranking-sub { grid-column: 2 / -1; }
.sarea-ranking-sub { font-size: 12px; color: var(--color-text-muted); }

/* Avisos: lista neutra con barra de nivel; el nivel también se dice en texto (visually-hidden). */
.sarea-alerts { list-style: none; margin: 0; padding: 0; }
.sarea-alert { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-divider); }
.sarea-alert-level { align-self: stretch; background: var(--color-info); }
.sarea-alert[data-level="warning"] .sarea-alert-level { background: var(--color-warning); }
.sarea-alert[data-level="error"] .sarea-alert-level { background: var(--color-danger); }
.sarea-alert-body { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.sarea-alert-body strong { font-size: 13px; color: var(--color-text); }
.sarea-alert-body a { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-accent-text); font-weight: 700; }

@media (max-width: 1099px) {
  .sarea-resumen-grid { grid-template-columns: minmax(0, 1fr); }
  .sarea-resumen-main { padding-right: 0; border-right: 0; border-bottom: var(--rule-strong) solid var(--color-divider); }
}

/* Hostelería (S04) aún fija colores claros propios: su página anfitriona la envuelve en el
   ámbito claro fijo de la base (.dx-scheme-light en Components/Pages/Hospitality.razor). */