/* =====================================================================
   Mosal CRM · «Bandeja clara» · ui/components.css (15/10/2026)
   Requiere ui/tokens.css. CSS sin compilación, sin framework.
   Origen: docs/ux/2026-10-15-bandeja-clara/components.css (maquetas m1-m7).
   ---------------------------------------------------------------------
   CÓMO SE ADOPTA POR PARTES (sin romper los paneles que aún no se migran)
   1. tokens.css, components.css, iconos.js y dialogo.js se cargan en
      index.html, seguimiento.html, cliente.html, /tecnicos/ y
      /tecnicos/equipo. Solo crean clases .m-*, variables --m-* y
      window.MosalUI / window.MosalIconos: lo existente no cambia.
   2. Cada panel migrado pone class="m-ui" en SU raíz (no en <body>: los
      estilos base quitan márgenes y viñetas). Los estilos base (letra,
      márgenes, foco) solo valen dentro de .m-ui. Los diálogos y avisos de
      dialogo.js ya llevan .m-ui en su propio elemento.
   3. Todas las piezas llevan prefijo .m-: no chocan con .card, .row, .next,
      .journey, .sidebar, .empty, .tabs, .badge, .secondary, .danger ni .btn
      de seguimiento*.css, clientes.css o portal*.css.
   4. NO va dentro de @layer a propósito: seguimiento.css y clientes.css
      declaran reglas globales sin capa (button {background}, button:hover,
      button:disabled, input, input:focus, label, th, td, dialog…) y una regla
      sin capa gana a cualquier regla con capa. Con una clase (0,1,0) ya
      ganamos a los selectores de elemento (0,0,1); el bloque «Neutralizar lo
      heredado» cubre los :hover, :focus y :disabled (0,1,1). El preflight de
      Tailwind de index.html sí va en capa, así que no interfiere.
   5. Orden de migración propuesto: barra lateral → Mi día → ficha →
      paneles de oficina → panel comercial → técnico.
   Índice: base · neutralizar · iconos · estructura · barra lateral ·
   cabecera de página · texto · botones · fase y raíl · estado y urgencia ·
   nota · pestañas · segmentado · bandeja (grupos y filas) · tabla y
   tarjetas móviles · marcas Cita/Contrato/Fotos · tarjeta · siguiente
   paso · mensaje preparado · comprobación · propiedades · recorrido ·
   hitos · semana · cajón · diálogo y hoja · aviso efímero · campo · vacío ·
   ayuda plegada · teclas · móvil del técnico · alto contraste · movimiento
   ===================================================================== */

/* ---------- Base (solo dentro de .m-ui) ---------- */
.m-ui, .m-ui *, .m-ui *::before, .m-ui *::after { box-sizing: border-box; }
.m-ui {
  font-family: var(--m-font);
  font-size: var(--m-fs-16);
  line-height: var(--m-lh-body);
  color: var(--m-text);
  background: var(--m-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.m-ui :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
.m-ui :where(ul, ol) { padding: 0; list-style: none; }
.m-ui :where(button, input, select, textarea) { font: inherit; color: inherit; }
.m-ui :where(a) { color: var(--m-link); }
.m-ui :where(img, svg) { display: block; }
.m-num { font-variant-numeric: tabular-nums; }

/* Un solo foco en todo el CRM: contorno (sobrevive a forced-colors).
   El selector pesa (0,3,0) para ganar a los focos del portal (portal.css y
   portal-unified.css: (0,2,1)). El color sale de --m-ring: las zonas oscuras
   (barra lateral, cabecera del técnico, banda sin cobertura, aviso) solo
   cambian la variable, sin pelear por especificidad.                       */
.m-ui { --m-ring: var(--m-focus); }
.m-ui :is(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
  outline: var(--m-focus-width) solid var(--m-ring);
  outline-offset: var(--m-focus-offset);
  box-shadow: none;
}
.m-ui :focus:not(:focus-visible) { outline: none; }
/* Sobre oscuro, verde claro; en los avisos de error y advertencia (fondo claro), el azul */
.m-side, .m-mbar, .m-offline, .m-toast { --m-ring: var(--m-focus-on-dark); }
.m-toast--error, .m-toast--warn { --m-ring: var(--m-focus); }
/* Dentro de listas y tarjetas pegadas al borde, el anillo va por dentro */
.m-ui .m-ring-in:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-offset: -3px; }

.m-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m-skip {
  position: absolute; left: 12px; top: -200px; z-index: var(--m-z-skip);
  background: var(--m-surface); color: var(--m-text); padding: 12px 16px; border-radius: var(--m-r-md);
  font-weight: var(--m-fw-semibold);
}
/* Revisión 15/10: la sombra solo con el enlace a la vista; aparcado arriba dejaba una franja gris en el móvil. */
.m-skip:focus { top: 12px; box-shadow: var(--m-shadow-pop); }

/* ---------- Neutralizar lo heredado ----------
   seguimiento.css: button:hover {filter} · button:disabled {opacity} ·
   label {display:grid} · input {padding; width} · th {background} · td {vertical-align: top} · dialog {…}
   clientes.css: button:hover {background; border-color} · button:disabled {opacity} ·
   label {flex; margin-bottom} · input:focus {outline: 0; box-shadow}
   Cada variante de botón vuelve a declarar su fondo y su borde en :hover.  */
.m-btn:hover, .m-icon-btn:hover, .m-tab:hover, .m-seg__opt:hover, .m-nav__item:hover,
.m-nav__head:hover, .m-search:hover, .m-choice:hover, .m-tabbar__item:hover, .m-row__open:hover,
.m-th-filter:hover, .m-toast__close:hover { filter: none; }
.m-btn:disabled, .m-icon-btn:disabled, .m-choice:disabled { opacity: .6; cursor: not-allowed; }
.m-btn[aria-busy="true"] { cursor: progress; }

/* ---------- Iconos (iconos.js: SVG en línea, trazo 2, aria-hidden) ---------- */
.m-i {
  width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.m-i--14 { width: 14px; height: 14px; stroke-width: 2.4; }
.m-i--16 { width: 16px; height: 16px; stroke-width: 2.2; }
.m-i--24 { width: 24px; height: 24px; }
.m-i--fill { fill: currentColor; stroke: none; }

/* ---------- Estructura de escritorio (fluida; sin lienzo fijo) ---------- */
.m-app { display: grid; grid-template-columns: var(--m-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.m-main { min-width: 0; position: relative; }
.m-page { padding: var(--m-sp-6) var(--m-sp-8) var(--m-sp-8); max-width: 1600px; }
.m-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--m-sp-6); align-items: start; }
.m-stack > * + * { margin-top: var(--m-sp-4); }
/* Lista + cajón: por encima de 1280 px conviven; por debajo, el cajón se superpone */
.m-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--m-drawer-w); min-height: 100vh; }
@media (max-width: 1279px) {
  .m-split { grid-template-columns: minmax(0, 1fr); }
  .m-split > .m-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--m-drawer-w), 92vw); z-index: var(--m-z-drawer); }
  .m-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .m-app { grid-template-columns: minmax(0, 1fr); }
  .m-app > .m-side { display: none; } /* en móvil: cabecera con menú y barra inferior */
  .m-page { padding: var(--m-sp-4); }
}

/* ---------- Barra lateral (navegación única) ---------- */
.m-side {
  background: var(--m-chrome); color: var(--m-on-chrome);
  display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; align-self: start; height: 100vh;
  padding: var(--m-sp-4) var(--m-sp-3) var(--m-sp-3);
}
.m-brand { display: flex; align-items: center; gap: var(--m-sp-3); min-height: var(--m-target); padding: 0 var(--m-sp-2); margin-bottom: var(--m-sp-3); text-decoration: none; }
.m-brand__logo { width: 36px; height: 36px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--m-on-dark-hover); }
.m-brand__name { font-family: var(--m-font-brand); font-size: 1.0625rem; letter-spacing: .05em; color: var(--m-brand-name); line-height: 1.1; white-space: nowrap; }
.m-brand__name b { font-weight: 400; color: var(--m-brand-accent); }

.m-search {
  display: flex; align-items: center; gap: var(--m-sp-2); width: 100%; min-height: var(--m-target);
  padding: 0 6px 0 10px; margin: 0 0 var(--m-sp-3);
  background: var(--m-chrome-2); color: var(--m-on-chrome-2);
  border: 1px solid var(--m-chrome-control); border-radius: var(--m-r-md);
  font-size: var(--m-fs-14); font-weight: var(--m-fw-regular); text-align: left; cursor: text;
}
.m-search:hover { background: var(--m-chrome-3); border-color: var(--m-on-chrome-2); }
.m-search__label { flex: 1; white-space: nowrap; }
.m-search .m-kbd { background: transparent; border-color: var(--m-chrome-control); color: var(--m-on-chrome-2); }

.m-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.m-nav__item {
  position: relative; display: flex; align-items: center; gap: var(--m-sp-3);
  min-height: var(--m-target); padding: 6px var(--m-sp-3); border-radius: var(--m-r-md);
  color: var(--m-on-chrome); text-decoration: none; font-size: var(--m-fs-16); font-weight: var(--m-fw-medium);
  background: none; border: 0; width: 100%; text-align: left; white-space: normal; line-height: 1.25; justify-content: flex-start;
}
.m-nav__item .m-i { color: var(--m-on-chrome-2); }
.m-nav__item:hover { background: var(--m-chrome-2); color: var(--m-on-chrome); }
.m-nav__item[aria-current="page"] { background: var(--m-chrome-3); color: var(--m-on-dark); }
.m-nav__item[aria-current="page"] .m-i { color: var(--m-brand-accent); }
.m-nav__item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--m-brand-accent);
}
.m-nav__item--sub { font-size: var(--m-fs-15); gap: 10px; padding: 6px 10px; }
.m-nav__count {
  margin-left: auto; flex: none; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--m-r-pill);
  display: inline-grid; place-items: center; background: var(--m-chrome-4); color: var(--m-on-dark);
  font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); font-variant-numeric: tabular-nums;
}
.m-nav__item[aria-current="page"] .m-nav__count { background: var(--m-on-dark); color: var(--m-chrome); } /* el verde queda para «hecho» */
.m-nav__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--m-target);
  margin-top: var(--m-sp-2); padding: 0 var(--m-sp-3); background: none; border: 0; border-radius: var(--m-r-md); cursor: pointer;
  color: var(--m-on-chrome-2); font-size: var(--m-fs-12); font-weight: var(--m-fw-semibold); letter-spacing: .07em; text-transform: uppercase;
}
.m-nav__head .m-i { width: 16px; height: 16px; }
.m-nav__head:hover { background: none; color: var(--m-on-chrome); }
/* Cuadro numerado de fase (leyenda permanente) */
.m-sq {
  width: 20px; height: 20px; border-radius: 5px; flex: none; display: inline-grid; place-items: center;
  background: var(--ph-dark); color: var(--m-chrome); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); line-height: 1;
}
.m-sq--x { background: transparent; color: var(--m-on-chrome-2); box-shadow: inset 0 0 0 1.5px var(--m-on-chrome-2); } /* panel transversal */
.m-side__foot { margin-top: auto; padding-top: var(--m-sp-3); border-top: 1px solid var(--m-chrome-line); display: flex; align-items: center; gap: var(--m-sp-3); }
.m-me { display: flex; align-items: center; gap: var(--m-sp-3); min-width: 0; flex: 1; padding-left: var(--m-sp-2); }
.m-me__av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--m-chrome-4); color: var(--m-brand-accent); font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); }
.m-me__name { display: block; font-size: var(--m-fs-15); color: var(--m-on-dark); font-weight: var(--m-fw-semibold); line-height: 1.25; }
.m-me__role { display: block; font-size: var(--m-fs-14); color: var(--m-on-chrome-2); line-height: 1.25; }
.m-side .m-icon-btn { color: var(--m-on-chrome-2); }
.m-side .m-icon-btn:hover { background: var(--m-chrome-2); color: var(--m-on-dark); }

/* ---------- Cabecera de página ---------- */
.m-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--m-sp-6); margin-bottom: var(--m-sp-4); flex-wrap: wrap; }
.m-eyebrow { font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-muted); }
.m-h1 { font-size: var(--m-fs-28); line-height: var(--m-lh-tight); font-weight: var(--m-fw-bold); letter-spacing: -.015em; }
.m-h1--xl { font-size: var(--m-fs-32); }
.m-h2 { font-size: var(--m-fs-20); line-height: var(--m-lh-snug); font-weight: var(--m-fw-bold); }
.m-h3 { font-size: var(--m-fs-16); line-height: var(--m-lh-snug); font-weight: var(--m-fw-semibold); }
.m-lede { font-size: var(--m-fs-16); color: var(--m-text-2); margin-top: 2px; }
.m-lede strong { color: var(--m-text); }
.m-crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-14); color: var(--m-muted); }
.m-crumbs a { color: var(--m-muted); text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--m-target); margin: -12px 0; }

/* ---------- Texto ---------- */
.m-meta { font-size: var(--m-fs-14); color: var(--m-muted); }
.m-sep { color: var(--m-muted); margin: 0 2px; } /* separador «·»: 6,5:1, también legible */
.m-strong { font-weight: var(--m-fw-semibold); color: var(--m-text); }
.m-link { color: var(--m-link); text-decoration: underline; text-decoration-color: var(--m-link-line); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-link:hover { text-decoration-color: var(--m-text); text-decoration-thickness: 2px; }
.m-link--target { display: inline-flex; align-items: center; min-height: var(--m-target); margin: -10px 0; } /* enlace suelto: zona de 44 px */
.m-kind { display: inline-block; font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); letter-spacing: .03em; color: var(--m-text-2);
          border: 1px solid var(--m-control); border-radius: 4px; padding: 0 5px; line-height: 1.4; vertical-align: 1px; }

/* ---------- Botones: una familia, un primario por zona ----------
   primary      = tinta (la acción del siguiente paso)
   secondary    = blanco con borde
   quiet        = sin caja, subrayado (acciones de apoyo)
   danger       = solo acciones destructivas (borde rojo)
   danger-solid = la confirmación de una acción destructiva (en el diálogo)
   locked       = no está desactivado: dice qué falta (.m-btn__why) y lleva allí
   Texto: verbo + objeto («Reclamar el cobro», «Anular la obra»).            */
.m-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--m-sp-2);
  min-height: var(--m-target); min-width: var(--m-target); padding: 0 var(--m-sp-4); margin: 0;
  border: 1px solid transparent; border-radius: var(--m-r-md);
  background: var(--m-surface); color: var(--m-text);
  font-family: var(--m-font); font-size: var(--m-fs-16); font-weight: var(--m-fw-semibold); line-height: 1.2; text-align: center;
  text-decoration: none; white-space: nowrap; cursor: pointer; opacity: 1; filter: none; box-shadow: none; flex-shrink: 0; max-width: 100%;
  transition: background var(--m-dur) var(--m-ease), border-color var(--m-dur) var(--m-ease);
}
.m-btn:hover { background: var(--m-hover); border-color: transparent; color: var(--m-text); }
.m-btn--primary { background: var(--m-action); color: var(--m-on-action); border-color: var(--m-action); }
.m-btn--primary:hover { background: var(--m-action-hover); border-color: var(--m-action-hover); color: var(--m-on-action); }
.m-btn--secondary { background: var(--m-surface); color: var(--m-text); border-color: var(--m-control); }
.m-btn--secondary:hover { background: var(--m-hover); border-color: var(--m-text); color: var(--m-text); }
.m-btn--quiet { background: transparent; color: var(--m-text); padding: 0 var(--m-sp-3); text-decoration: underline; text-decoration-color: var(--m-link-line); text-underline-offset: 4px; font-weight: var(--m-fw-medium); }
.m-btn--quiet:hover { background: var(--m-hover); border-color: transparent; color: var(--m-text); }
.m-btn--danger { background: var(--m-surface); color: var(--m-block-ink); border-color: var(--m-block-line); }
.m-btn--danger:hover { background: var(--m-block-bg); border-color: var(--m-block-line); color: var(--m-block-ink); }
.m-btn--danger-solid { background: var(--m-danger); color: var(--m-on-action); border-color: var(--m-danger); }
.m-btn--danger-solid:hover { background: var(--m-danger-hover); border-color: var(--m-danger-hover); color: var(--m-on-action); }
.m-btn--locked { background: var(--m-subtle); color: var(--m-text); border: 1px dashed var(--m-control); justify-content: flex-start; }
.m-btn--locked:hover { background: var(--m-selected); border-color: var(--m-text); color: var(--m-text); }
.m-btn--locked .m-btn__why { margin-left: auto; padding-left: var(--m-sp-3); font-weight: var(--m-fw-medium); color: var(--m-text-2); font-size: var(--m-fs-16); }
.m-btn--field { min-height: var(--m-target-field); font-size: var(--m-fs-18); border-radius: var(--m-r-lg); }
.m-btn--hero  { min-height: var(--m-target-hero); font-size: var(--m-fs-18); border-radius: var(--m-r-lg); padding: 0 var(--m-sp-5); }
.m-btn--block { display: flex; width: 100%; }
.m-btn--compact { padding: 0 var(--m-sp-3); font-size: var(--m-fs-15); }
.m-btn--wrap { white-space: normal; text-align: left; padding-block: var(--m-sp-2); }
.m-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); }
@media (max-width: 480px) { .m-btn { white-space: normal; } } /* en el móvil el texto parte línea antes que salirse */
.m-icon-btn {
  position: relative; display: inline-grid; place-items: center; width: var(--m-target); height: var(--m-target); flex: none;
  min-width: var(--m-target); min-height: var(--m-target);
  border: 1px solid transparent; border-radius: var(--m-r-md); background: none; color: var(--m-text-2); cursor: pointer; padding: 0; margin: 0;
}
.m-icon-btn:hover { background: var(--m-hover); border-color: transparent; color: var(--m-text); }
.m-icon-btn--line { border-color: var(--m-line-strong); background: var(--m-surface); color: var(--m-text); }
.m-icon-btn--line:hover { border-color: var(--m-control); background: var(--m-hover); }
.m-icon-btn--field { width: var(--m-target-field); height: var(--m-target-field); min-width: var(--m-target-field); min-height: var(--m-target-field); }

/* ---------- Fase: chip con número + raíl de 6 ----------
   El chip es cuadrado (radio 6) y lleva SIEMPRE el número; un estado es
   una píldora redonda con icono. Nunca se confunden.
   Nombre corto en el chip (Comercial, Contratos, Instalación, Facturación,
   Legalización, Entrega) y el nombre completo en title. MosalUI.fase(n). */
.m-phase {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px 2px 3px;
  border-radius: var(--m-r-sm); background: var(--ph-bg); color: var(--ph-ink); box-shadow: inset 0 0 0 1px var(--ph-line);
  font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); line-height: 1.2; white-space: nowrap;
}
.m-phase__n {
  width: 19px; height: 19px; border-radius: 4px; flex: none; display: grid; place-items: center;
  background: var(--ph-ink); color: var(--m-on-action); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold);
}
.m-phase--lg { min-height: 32px; font-size: var(--m-fs-16); padding: 3px 12px 3px 4px; }
.m-phase--lg .m-phase__n { width: 24px; height: 24px; font-size: var(--m-fs-14); }
.m-phase--cell { display: flex; width: 100%; } /* columna Fase al estilo de Monday */

/* Raíl: 6 segmentos; hecho = gris, ahora = color de su fase y más alto, falta = claro.
   La posición del segmento alto dice la fase aunque no se distinga el color. MosalUI.rail(n). */
.m-rail { display: inline-grid; grid-template-columns: repeat(6, 1fr); gap: 3px; align-items: end; width: 96px; height: 12px; }
.m-rail__s { display: block; height: 6px; border-radius: 2px; background: var(--m-rail-future); }
.m-rail__s--done { background: var(--m-rail-done); }
.m-rail__s--now { height: 12px; background: var(--ph-solid); }
.m-phasecell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* ---------- Estado (píldora con icono y palabra) y urgencia (texto en su columna) ----------
   MosalUI.estado('todo' | 'wait' | 'block' | 'done' | 'later', texto)          */
.m-status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px 2px 8px;
  border-radius: var(--m-r-pill); border: 1px solid transparent;
  font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); line-height: 1.2; white-space: nowrap;
}
.m-status .m-i { width: 15px; height: 15px; stroke-width: 2.4; }
.m-status--todo  { background: var(--m-todo-bg);  color: var(--m-todo-ink); }
.m-status--wait  { background: var(--m-wait-bg);  color: var(--m-wait-ink); border: 1px dashed var(--m-wait-line); }
.m-status--block { background: var(--m-block-bg); color: var(--m-block-ink); border-color: var(--m-block-line); }
.m-status--done  { background: var(--m-done-bg);  color: var(--m-done-ink); }
.m-status--later { background: transparent; color: var(--m-later-ink); padding-left: 0; font-weight: var(--m-fw-medium); }
/* Icono de estado solo (columna izquierda de las filas) */
.m-sti { width: 20px; height: 20px; flex: none; }
.m-sti--todo { color: var(--m-todo-ink); } .m-sti--wait { color: var(--m-wait-line); }
.m-sti--block { color: var(--m-block-ink); } .m-sti--done { color: var(--m-done-line); } .m-sti--later { color: var(--m-control); }

.m-due { display: inline-flex; align-items: center; gap: 6px; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text); white-space: nowrap; }
.m-due .m-i { width: 16px; height: 16px; }
.m-due--late { color: var(--m-late); }
.m-due--calm { color: var(--m-muted); font-weight: var(--m-fw-medium); }

/* Persona que lo lleva (en lugar de un botón desactivado) */
.m-who { display: inline-flex; align-items: center; gap: 8px; font-size: var(--m-fs-14); color: var(--m-text-2); white-space: nowrap; }
.m-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: var(--m-subtle); box-shadow: inset 0 0 0 1px var(--m-line-strong); color: var(--m-text-2); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); }

/* ---------- Nota en línea (información o advertencia que NO bloquea) ----------
   Ej.: «Falta la firma de la clienta. Puedes cerrar la visita igualmente.»
   Siempre con icono (info o alert) y la palabra; nunca solo el color.      */
.m-note { display: flex; align-items: flex-start; gap: var(--m-sp-3); padding: var(--m-sp-3) var(--m-sp-4); border-radius: var(--m-r-md); background: var(--m-subtle); color: var(--m-text-2); font-size: var(--m-fs-15); line-height: var(--m-lh-snug); }
.m-note .m-i { margin-top: 1px; color: var(--m-text); }
.m-note b, .m-note strong { color: var(--m-text); }
.m-note--warn { background: var(--m-warn-bg); color: var(--m-warn-ink); box-shadow: inset 4px 0 0 var(--m-warn-line); }
.m-note--warn .m-i, .m-note--warn b, .m-note--warn strong { color: var(--m-warn-ink); }
.m-note--block { background: var(--m-block-bg); color: var(--m-block-ink); box-shadow: inset 4px 0 0 var(--m-block-line); }
.m-note--block .m-i, .m-note--block b, .m-note--block strong { color: var(--m-block-ink); }

/* ---------- Pestañas con recuento (el recuento = tareas que son tuyas) ---------- */
.m-tabs { display: flex; gap: var(--m-sp-1); border-bottom: 1px solid var(--m-line-strong); overflow-x: auto; scrollbar-width: thin; }
.m-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--m-sp-2); min-height: var(--m-target);
  padding: 0 var(--m-sp-3); border: 0; background: none; cursor: pointer; white-space: nowrap; margin: 0; flex: none; min-width: 0;
  color: var(--m-text-2); font-size: var(--m-fs-16); font-weight: var(--m-fw-medium); text-decoration: none; border-radius: var(--m-r-md) var(--m-r-md) 0 0;
}
.m-tab:hover { color: var(--m-text); background: var(--m-hover); border-color: transparent; }
.m-tab[aria-selected="true"], .m-tab[aria-current="page"] { color: var(--m-text); font-weight: var(--m-fw-semibold); }
.m-tab[aria-selected="true"]::after, .m-tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--m-sp-2); right: var(--m-sp-2); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--m-text); }
.m-ui .m-tabs .m-tab:focus-visible { outline-offset: -3px; } /* el contenedor desplaza: el anillo va por dentro */
.m-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--m-r-pill);
  background: var(--m-subtle); color: var(--m-text-2); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); font-variant-numeric: tabular-nums;
}
.m-tab[aria-selected="true"] .m-count, .m-tab[aria-current="page"] .m-count { background: var(--m-text); color: var(--m-on-action); }
.m-count--block { background: var(--m-block-bg); color: var(--m-block-ink); }

/* ---------- Segmentado (sin overflow: el foco no se recorta) ---------- */
.m-seg { display: inline-flex; flex-wrap: wrap; }
.m-seg__opt {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--m-target); margin: 0 0 0 -1px;
  padding: 0 var(--m-sp-4); border: 1px solid var(--m-control); border-radius: 0; background: var(--m-surface); color: var(--m-text);
  font-size: var(--m-fs-15); font-weight: var(--m-fw-semibold); cursor: pointer; white-space: nowrap;
}
.m-seg__opt:first-child { margin-left: 0; border-radius: var(--m-r-md) 0 0 var(--m-r-md); }
.m-seg__opt:last-child { border-radius: 0 var(--m-r-md) var(--m-r-md) 0; }
.m-seg__opt:hover { background: var(--m-hover); border-color: var(--m-control); color: var(--m-text); }
.m-seg__opt[aria-pressed="true"], .m-seg__opt[aria-checked="true"] { background: var(--m-text); color: var(--m-on-action); border-color: var(--m-text); z-index: 1; }
.m-seg__opt:focus-visible { z-index: 2; }

/* ---------- Bandeja: grupos y filas ----------
   Marcado: <ul class="m-list"><li class="m-row">… <a class="m-row__open">
   Nombre</a> … <button class="m-btn">Verbo</button></li></ul>
   · Sin listbox/option: cada fila tiene un enlace (abre el cajón) y un
     botón (el siguiente paso); no hay interactivos anidados.
   · Toda la fila se pulsa gracias a ::after del enlace; el botón queda encima.
   · Atajos J/K/Intro/O/Esc: solo con el foco dentro de .m-list, y se
     pueden desactivar en «Mi cuenta» (WCAG 2.1.4).                        */
.m-listbox { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); }
.m-group-head {
  display: flex; align-items: center; gap: var(--m-sp-2); min-height: 40px; padding: 0 var(--m-sp-5);
  background: var(--m-subtle); border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line);
  font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text-2);
}
.m-listbox > .m-group-head:first-child { border-top: 0; border-radius: var(--m-r-lg) var(--m-r-lg) 0 0; }
.m-group-head__path { color: var(--m-muted); font-weight: var(--m-fw-medium); display: inline-flex; align-items: center; gap: 4px; }
.m-group-head__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--m-r-pill); background: var(--m-text); color: var(--m-on-action); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); }
.m-group-head__hint { margin-left: auto; color: var(--m-muted); font-weight: var(--m-fw-regular); }

.m-list { list-style: none; margin: 0; padding: 0; }
.m-row {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--m-sp-4);
  min-height: var(--m-row-h); padding: var(--m-sp-2) var(--m-sp-5); border-bottom: 1px solid var(--m-line); background: var(--m-surface);
}
.m-list > .m-row:last-child { border-bottom: 0; }
.m-row:hover { background: var(--m-hover); }
.m-row[aria-current="true"] { background: var(--m-selected); }
.m-row[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--m-text); }
.m-row__main { min-width: 0; }
.m-row__title { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--m-fs-16); line-height: 1.3; }
.m-row__place { font-size: var(--m-fs-14); color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-row__verb { font-weight: var(--m-fw-semibold); color: var(--m-text); white-space: nowrap; }
/* Revisión 15/10: inline-block, no flex (seguimiento.css hace de todo <button> un inline-flex centrado): con flex no hay
   puntos suspensivos y el nombre se recortaba por los dos lados. */
.m-row__open { display: inline-block; max-width: 100%; text-align: left; justify-content: flex-start; flex: 0 1 auto; color: var(--m-text); font-weight: var(--m-fw-semibold); text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: 0; padding: 0; min-height: 0; cursor: pointer; }
.m-row__title > .m-row__place { flex: 1 1 0; } /* el lugar se recorta antes que el nombre */
.m-row__open::after { content: ""; position: absolute; inset: 0; } /* toda la fila abre el cajón */
.m-row__open:hover { text-decoration-color: var(--m-text); background: none; }
.m-row__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--m-fs-14); color: var(--m-muted); white-space: nowrap; overflow: hidden; }
/* Restos 15/10: la fase de la fila no se recorta nunca; se recorta el texto que la sigue. */
.m-row__meta > .m-phase { flex: none; }
.m-row__due { text-align: right; min-width: 132px; }
.m-row__act { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: var(--m-sp-2); min-width: 176px; }
.m-row--late .m-row__due { color: var(--m-late); }
@media (max-width: 720px) {
  .m-row { grid-template-columns: 20px minmax(0, 1fr); row-gap: var(--m-sp-2); padding: var(--m-sp-3) var(--m-sp-4); }
  .m-row__due, .m-row__act { grid-column: 2; min-width: 0; text-align: left; justify-content: flex-start; }
  .m-row__meta { flex-wrap: wrap; white-space: normal; }
}
/* Línea de resumen dentro de un grupo («Nada que hacer · 1 esperando…») */
.m-row-note { display: flex; align-items: center; gap: var(--m-sp-3); min-height: 48px; padding: 0 var(--m-sp-5); border-bottom: 1px solid var(--m-line); font-size: var(--m-fs-15); color: var(--m-text-2); }
.m-row-note .m-i { color: var(--m-muted); }
.m-row-note--ok .m-i { color: var(--m-done-line); }
/* Fila «Ahora»: la primera, desplegada con el porqué */
.m-row--now { display: block; padding: var(--m-sp-4) var(--m-sp-5) var(--m-sp-5); background: var(--m-surface); box-shadow: inset 4px 0 0 var(--m-text); }
.m-row--now:hover { background: var(--m-surface); }
.m-now__top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--m-sp-3); font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text-2); }
.m-now__verb { margin-top: 6px; font-size: var(--m-fs-20); line-height: 1.3; font-weight: var(--m-fw-bold); letter-spacing: -.005em; }
.m-now__verb a { color: inherit; text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 4px; }
.m-now__why { margin-top: 6px; color: var(--m-text-2); max-width: 70ch; }
.m-now__why strong { color: var(--m-text); }
.m-now__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: var(--m-fs-14); color: var(--m-muted); }
.m-now__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); margin-top: var(--m-sp-4); }

/* ---------- Tabla (panel comercial) y tarjetas en móvil ----------
   <table class="m-table m-table--cards"> y data-label="Cita" en cada <td>:
   por debajo de 720 px cada fila es una tarjeta con su etiqueta.          */
.m-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--m-surface); font-size: var(--m-fs-15); }
.m-table th {
  height: 40px; padding: 0 10px; background: var(--m-surface); text-align: left; vertical-align: middle; white-space: nowrap;
  font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text-2); border-bottom: 1px solid var(--m-line-strong);
  text-transform: none; letter-spacing: normal;
}
.m-table td { height: 58px; padding: 6px 10px; border-bottom: 1px solid var(--m-line); vertical-align: middle; line-height: 1.3; color: var(--m-text); }
.m-table tbody tr:hover td { background: var(--m-hover); }
.m-table th:first-child, .m-table td:first-child { padding-left: var(--m-sp-4); }
.m-table th:last-child, .m-table td:last-child { padding-right: var(--m-sp-4); }
.m-table .m-tr-group td { height: 40px; background: var(--m-subtle); font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text-2); }
.m-table .m-tr-mine td { background: var(--m-mine); }
.m-table .m-tr-mine td:first-child { box-shadow: inset 4px 0 0 var(--m-text); }
.m-cell-name { display: block; font-size: var(--m-fs-15); font-weight: var(--m-fw-semibold); color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cell-sub { display: block; font-size: var(--m-fs-14); color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.m-th-filter { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 6px; margin-left: -6px; border: 0; background: none; border-radius: var(--m-r-sm); font: inherit; color: inherit; cursor: pointer; }
.m-th-filter:hover { background: var(--m-hover); color: inherit; }
@media (max-width: 720px) {
  .m-table--cards, .m-table--cards tbody, .m-table--cards tr, .m-table--cards td { display: block; width: 100%; height: auto; }
  .m-table--cards thead { display: none; }
  .m-table--cards tr { border-bottom: 1px solid var(--m-line); padding: var(--m-sp-3) var(--m-sp-4); }
  .m-table--cards td, .m-table--cards td:first-child, .m-table--cards td:last-child { border: 0; padding: 2px 0; white-space: normal; }
  .m-table--cards tbody tr:hover td { background: transparent; }
  .m-table--cards td[data-label]::before { content: attr(data-label) " · "; color: var(--m-muted); font-size: var(--m-fs-14); }
  .m-table--cards .m-tr-group td::before { content: none; }
  .m-table--cards .m-cell-name, .m-table--cards .m-cell-sub { white-space: normal; }
  .m-table--cards .m-icon-btn, .m-table--cards .m-btn { min-height: var(--m-target-field); }
}

/* Marcas Cita · Contrato · Fotos (icono + texto) */
.m-tick { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--m-fs-15); color: var(--m-text-2); }
.m-tick .m-i { width: 16px; height: 16px; stroke-width: 2.4; }
.m-tick--done .m-i { color: var(--m-done-line); }
.m-tick--todo { color: var(--m-text); font-weight: var(--m-fw-semibold); }
.m-tick--todo .m-i { color: var(--m-text); }
.m-tick--wait .m-i { color: var(--m-wait-line); }
.m-tick--later { color: var(--m-muted); }
.m-tick--later .m-i { color: var(--m-control); }
.m-tick--block { color: var(--m-block-ink); font-weight: var(--m-fw-semibold); }
.m-tick--warn { color: var(--m-warn-ink); font-weight: var(--m-fw-semibold); }

/* ---------- Tarjeta ---------- */
.m-card { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); }
.m-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--m-sp-3); min-height: 52px; padding: 0 var(--m-sp-5); border-bottom: 1px solid var(--m-line); }
.m-card__title { font-size: var(--m-fs-16); font-weight: var(--m-fw-bold); }
.m-card__body { padding: var(--m-sp-4) var(--m-sp-5); }
.m-label { font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--m-muted); }

/* ---------- Siguiente paso: el único bloque destacado de cada vista ----------
   Uno por expediente: el que vence antes, con un responsable; el resto como
   «Esperando a…» en .m-next__wait.                                         */
.m-next { background: var(--m-surface); border: 1px solid var(--m-line-strong); border-radius: var(--m-r-lg); box-shadow: var(--m-shadow-2); position: relative; }
.m-next::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; border-radius: var(--m-r-lg) 0 0 var(--m-r-lg); background: var(--m-text); }
.m-next--other::before { background: var(--m-control); } /* lo lleva otra persona */
.m-next__body { padding: var(--m-sp-4) var(--m-sp-5) var(--m-sp-5) var(--m-sp-6); }
.m-next__top { display: flex; align-items: center; gap: var(--m-sp-3); flex-wrap: wrap; }
.m-next__title { margin-top: 6px; font-size: var(--m-fs-20); line-height: 1.3; font-weight: var(--m-fw-bold); }
.m-next__why { margin-top: 4px; color: var(--m-text-2); }
.m-next__why strong { color: var(--m-text); }
.m-next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); margin-top: var(--m-sp-4); }
.m-next__reply { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-3); margin-top: var(--m-sp-3); font-size: var(--m-fs-15); color: var(--m-text-2); }
.m-next__wait {
  display: flex; align-items: center; gap: var(--m-sp-3); padding: var(--m-sp-3) var(--m-sp-5) var(--m-sp-3) var(--m-sp-6);
  border-top: 1px solid var(--m-line); background: var(--m-bg); border-radius: 0 0 var(--m-r-lg) var(--m-r-lg); font-size: var(--m-fs-15); color: var(--m-text-2);
}
.m-next__wait b { color: var(--m-text); font-weight: var(--m-fw-semibold); }
.m-next__wait .m-btn { margin-left: auto; }

/* ---------- Mensaje preparado (el CRM no envía: abre WhatsApp o el correo y se marca a mano) ---------- */
.m-msg { padding: 10px 14px; border-radius: var(--m-r-md); background: var(--m-bg); border: 1px solid var(--m-line); font-size: var(--m-fs-15); line-height: var(--m-lh-snug); color: var(--m-text-2); white-space: pre-line; }
.m-msg__label { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-14); color: var(--m-muted); margin-bottom: 4px; font-weight: var(--m-fw-medium); white-space: normal; }

/* ---------- Lista de comprobación (requisitos de un hito o de un traspaso) ---------- */
.m-check { list-style: none; margin: 0; padding: 0; }
.m-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 40px; border-bottom: 1px solid var(--m-line); font-size: var(--m-fs-15); }
.m-check li:last-child { border-bottom: 0; }
.m-check__val { font-size: var(--m-fs-14); color: var(--m-muted); text-align: right; white-space: nowrap; }
.m-check__val--todo { color: var(--m-text); font-weight: var(--m-fw-semibold); }

/* ---------- Propiedades (clave · valor), las mismas en cajón y ficha ---------- */
.m-props { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: var(--m-sp-3); font-size: var(--m-fs-15); margin: 0; }
.m-props dt, .m-props dd { padding: 8px 0; border-bottom: 1px solid var(--m-line); margin: 0; }
.m-props dt { color: var(--m-muted); }
.m-props dd { color: var(--m-text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; overflow-wrap: anywhere; }
.m-props > :nth-last-child(-n + 2) { border-bottom: 0; }
.m-props .m-sub { display: block; width: 100%; color: var(--m-muted); font-size: var(--m-fs-14); }

/* ---------- Recorrido: 6 fases · 19 hitos (tablero de 6 columnas) ----------
   Hitos por fase: 1-2 · 3-6 · 7 · 8-12 · 13-18 · 19                       */
.m-journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--m-sp-2); }
@media (max-width: 960px) { .m-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .m-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m-jcol { min-width: 0; padding: 10px 12px; border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--m-surface); }
.m-jcol--now { border: 2px solid var(--m-text); padding: 9px 11px; box-shadow: var(--m-shadow-2); }
.m-jcol__head { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text); white-space: nowrap; }
.m-jcol__head .m-phase__n { background: var(--ph-ink); }
.m-jcol__range { margin-left: auto; font-size: var(--m-fs-12); font-weight: var(--m-fw-medium); color: var(--m-muted); font-variant-numeric: tabular-nums; }
.m-jcol__ticks { display: flex; gap: 3px; margin-top: 8px; }
.m-tk { flex: 1; height: 8px; border-radius: 2px; background: var(--m-rail-future); }
.m-tk--done { background: var(--ph-solid); }
.m-tk--todo { background: var(--m-surface); box-shadow: inset 0 0 0 2px var(--m-text); }
.m-tk--wait { background: repeating-linear-gradient(135deg, var(--ph-bg) 0 3px, var(--ph-solid) 3px 5px); }
.m-jcol__state { margin-top: 6px; font-size: var(--m-fs-14); color: var(--m-muted); line-height: 1.3; }
.m-jcol--now .m-jcol__state { color: var(--m-text); font-weight: var(--m-fw-medium); }
.m-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--m-fs-14); color: var(--m-muted); }
.m-legend__k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.m-legend__k .m-tk { flex: none; width: 18px; }

/* ---------- Hitos en lista ---------- */
.m-ms { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; column-gap: var(--m-sp-3); padding: 12px var(--m-sp-5); border-bottom: 1px solid var(--m-line); }
.m-ms:last-child { border-bottom: 0; }
.m-ms__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); border: 2px solid var(--m-control); color: var(--m-text-2); background: var(--m-surface); }
.m-ms__n--done { background: var(--m-done-ink); border-color: var(--m-done-ink); color: var(--m-on-action); } /* 6,5:1 */
.m-ms__n--todo { background: var(--m-text); border-color: var(--m-text); color: var(--m-on-action); }
.m-ms__n--wait { border-style: dashed; }
.m-ms__title { font-weight: var(--m-fw-semibold); line-height: 1.35; }
.m-ms__sub { font-size: var(--m-fs-14); color: var(--m-muted); margin-top: 2px; }
.m-ms__checks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.m-ms--now { background: linear-gradient(90deg, var(--m-selected), var(--m-surface) 75%); }

/* ---------- Semana (7 días laborables) ---------- */
.m-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); background: var(--m-surface); }
@media (max-width: 720px) { .m-week { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(140px, 1fr); overflow-x: auto; } }
.m-day { min-height: 96px; padding: 8px 10px 10px; border-left: 1px solid var(--m-line); min-width: 0; }
.m-day:first-child { border-left: 0; }
.m-day__name { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text-2); }
.m-day__today { font-size: var(--m-fs-12); color: var(--m-on-action); background: var(--m-text); border-radius: 4px; padding: 1px 6px; font-weight: var(--m-fw-bold); }
.m-day--today { box-shadow: inset 0 3px 0 var(--m-text); }
.m-day__free { margin-top: 6px; font-size: var(--m-fs-14); color: var(--m-muted); }
.m-appt { display: block; margin-top: 6px; padding: 5px 8px 6px 9px; border-radius: var(--m-r-sm); background: var(--ph-bg); box-shadow: inset 3px 0 0 var(--ph-solid), inset 0 0 0 1px var(--ph-line); color: var(--m-text); text-decoration: none; line-height: 1.3; }
.m-appt__time { font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); color: var(--ph-ink); }
.m-appt__who { display: block; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-appt__note { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--m-fs-14); color: var(--m-text-2); }

/* ---------- Cajón (maestro-detalle) ----------
   Mismo contenido y bloques que la ficha. ↑/↓ cambian de expediente,
   Esc cierra, «Abrir ficha» lleva a la vista completa.
   Dentro de .m-split convive con la lista; .m-drawer--overlay lo superpone
   siempre (con .m-drawer-scrim detrás).                                   */
.m-drawer { background: var(--m-surface); box-shadow: var(--m-shadow-drawer); display: flex; flex-direction: column; min-width: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.m-drawer--overlay { position: fixed; top: 0; right: 0; bottom: 0; height: auto; width: min(var(--m-drawer-w), 92vw); z-index: var(--m-z-drawer); }
.m-drawer-scrim { position: fixed; inset: 0; z-index: calc(var(--m-z-drawer) - 1); background: var(--m-scrim); }
.m-drawer__bar { display: flex; align-items: center; gap: var(--m-sp-1); min-height: 56px; padding: 0 var(--m-sp-3) 0 var(--m-sp-4); border-bottom: 1px solid var(--m-line); font-size: var(--m-fs-14); color: var(--m-muted); position: sticky; top: 0; background: var(--m-surface); z-index: 2; }
.m-drawer__bar .m-spacer { flex: 1; }
.m-drawer__body { padding: var(--m-sp-4) var(--m-sp-6) var(--m-sp-6); }
.m-drawer__name { font-size: var(--m-fs-24); font-weight: var(--m-fw-bold); letter-spacing: -.01em; line-height: var(--m-lh-tight); }
.m-drawer__refs { font-size: var(--m-fs-14); color: var(--m-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.m-drawer__sec { margin-top: var(--m-sp-5); }
.m-drawer__sec > .m-label { display: block; margin-bottom: 6px; }

/* ---------- Diálogo y hoja inferior (sustituyen alert/confirm/prompt) ----------
   Con <dialog> y showModal(): foco atrapado y Esc. Lo monta MosalUI
   (dialogo.js); para formularios propios basta con
   <dialog class="m-ui m-dialog"> o <dialog class="m-ui m-sheet">.
   Dentro de un iframe del portal, MosalPortalFrame.positionDialog() fija
   top y max-height en línea: por eso bottom/right van a auto aquí.
   .m-dialog--adapt pasa a hoja inferior por debajo de 600 px (fuera de los
   iframes, que crecen con su contenido).                                  */
.m-scrim { position: fixed; inset: 0; z-index: var(--m-z-scrim); background: var(--m-scrim); }
.m-dialog {
  position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
  width: min(var(--m-dialog-w), calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; margin: 0;
  z-index: var(--m-z-dialog);
  background: var(--m-surface); color: var(--m-text); border: 0; border-radius: var(--m-r-xl); box-shadow: var(--m-shadow-pop); padding: var(--m-sp-6);
}
.m-dialog:not([open]) { display: none; }
.m-dialog::backdrop, .m-sheet::backdrop { background: var(--m-scrim); }
.m-dialog--wide { --m-dialog-w: 640px; }
.m-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--m-sp-3); }
.m-dialog__title { font-size: var(--m-fs-20); font-weight: var(--m-fw-bold); line-height: 1.3; color: var(--m-text); margin: 0; letter-spacing: normal; }
.m-dialog__text { margin-top: var(--m-sp-2); color: var(--m-text-2); white-space: pre-line; }
.m-dialog__body { margin-top: var(--m-sp-4); display: grid; gap: var(--m-sp-3); }
.m-dialog__note { margin-top: var(--m-sp-4); }
.m-dialog__error:empty { display: none; }
.m-dialog__error { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--m-sp-3); padding: var(--m-sp-3) var(--m-sp-4); border-radius: var(--m-r-md); background: var(--m-block-bg); color: var(--m-block-ink); font-weight: var(--m-fw-semibold); }
.m-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--m-sp-2); margin-top: var(--m-sp-6); }
.m-conseq { list-style: none; margin: var(--m-sp-3) 0 0; padding: 0; display: grid; gap: 8px; }
.m-conseq li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--m-text-2); }
.m-conseq .m-i { margin-top: 2px; color: var(--m-text); }
.m-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  z-index: var(--m-z-dialog);
  background: var(--m-surface); color: var(--m-text); border: 0; border-radius: var(--m-r-xl) var(--m-r-xl) 0 0; box-shadow: var(--m-shadow-pop);
  padding: var(--m-sp-2) var(--m-sp-4) max(var(--m-sp-5), env(safe-area-inset-bottom));
}
.m-sheet:not([open]) { display: none; }
.m-sheet__grip { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--m-line-strong); margin: 0 auto var(--m-sp-3); }
.m-dialog__grip { display: none; }
@media (max-width: 600px) {
  .m-dialog--adapt {
    top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh;
    border-radius: var(--m-r-xl) var(--m-r-xl) 0 0; padding: var(--m-sp-2) var(--m-sp-4) max(var(--m-sp-5), env(safe-area-inset-bottom));
  }
  .m-dialog--adapt .m-dialog__grip { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--m-line-strong); margin: 0 auto var(--m-sp-3); }
  .m-dialog--adapt .m-dialog__actions { flex-direction: column-reverse; align-items: stretch; }
  .m-dialog--adapt .m-dialog__actions .m-btn { min-height: var(--m-target-field); white-space: normal; }
}

/* ---------- Aviso efímero (toast) ----------
   MosalUI.avisar(texto, {tipo}). Una sola zona por ventana (.m-toasts,
   role=status); desde el iframe de Seguimiento sale en la ventana del portal.
   «Deshacer» solo en marcas sin consecuencias (mensaje enviado, respuesta
   de la cita) y en Facturación (deshacer el último paso del día). Nunca en
   Entrega y cierre: allí solo reabre Dirección.                           */
.m-ui.m-toasts {
  position: fixed; left: 50%; bottom: calc(var(--m-toast-bottom) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--m-z-toast);
  display: grid; justify-items: center; gap: var(--m-sp-2); width: max-content; max-width: calc(100vw - 32px);
  margin: 0; padding: 0; background: none; pointer-events: none;
}
.m-toast {
  pointer-events: auto; display: inline-flex; align-items: center; gap: var(--m-sp-3); min-height: 52px; max-width: 100%; padding: 4px 6px 4px 16px;
  background: var(--m-text); color: var(--m-on-dark); border: 1px solid transparent; border-radius: var(--m-r-lg); box-shadow: var(--m-shadow-pop);
  font-size: var(--m-fs-15); line-height: var(--m-lh-snug);
  animation: m-toast-in var(--m-dur) var(--m-ease);
}
.m-toast__text { padding: 8px 0; overflow-wrap: anywhere; }
.m-toast:not(:has(.m-btn, .m-toast__close)) { padding-right: 16px; }
.m-toast .m-i { color: var(--m-brand-accent); }
.m-toast .m-btn { min-height: var(--m-target); background: transparent; color: var(--m-on-dark); border-color: var(--m-on-dark-line); }
.m-toast .m-btn:hover { background: var(--m-on-dark-hover); border-color: var(--m-on-dark); color: var(--m-on-dark); }
.m-toast__close { display: inline-grid; place-items: center; width: var(--m-target); height: var(--m-target); min-width: var(--m-target); min-height: var(--m-target); flex: none; margin: 0; padding: 0; border: 0; border-radius: var(--m-r-md); background: transparent; color: inherit; cursor: pointer; }
.m-toast__close:hover { background: var(--m-on-dark-hover); color: inherit; }
.m-toast .m-toast__close .m-i { color: inherit; }
.m-toast--error { background: var(--m-block-bg); color: var(--m-block-ink); border-color: var(--m-block-line); }
.m-toast--error .m-i { color: var(--m-block-ink); }
.m-toast--error .m-btn { color: var(--m-block-ink); border-color: var(--m-block-line); }
.m-toast--error .m-btn:hover, .m-toast--error .m-toast__close:hover { background: var(--m-surface); border-color: var(--m-block-line); color: var(--m-block-ink); }
.m-toast--warn { background: var(--m-warn-bg); color: var(--m-warn-ink); border-color: var(--m-warn-line); }
.m-toast--warn .m-i { color: var(--m-warn-ink); }
.m-toast--warn .m-btn { color: var(--m-warn-ink); border-color: var(--m-warn-line); }
.m-toast--warn .m-btn:hover, .m-toast--warn .m-toast__close:hover { background: var(--m-surface); border-color: var(--m-warn-line); color: var(--m-warn-ink); }
.m-toast.is-leaving { opacity: 0; transition: opacity var(--m-dur) var(--m-ease); }
@keyframes m-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Campo con error en línea ----------
   <div class="m-field m-field--error"><label class="m-field__label" for="x">…</label>
   <span class="m-field__hint">…</span><span class="m-field__error" id="x-e">…</span>
   <input class="m-input" id="x" aria-invalid="true" aria-describedby="x-e"></div> */
.m-field { display: grid; gap: 6px; }
.m-field__label { display: block; margin: 0; font-size: var(--m-fs-16); font-weight: var(--m-fw-semibold); color: var(--m-text); }
.m-field__hint { font-size: var(--m-fs-14); color: var(--m-muted); }
.m-field__count { font-size: var(--m-fs-14); color: var(--m-muted); text-align: right; font-variant-numeric: tabular-nums; }
.m-input {
  display: block; width: 100%; min-width: 0; min-height: var(--m-target); margin: 0; padding: 0 12px;
  border: 1px solid var(--m-control); border-radius: var(--m-r-md); background: var(--m-surface); color: var(--m-text);
  font-family: var(--m-font); font-size: var(--m-fs-16); font-weight: var(--m-fw-regular); line-height: var(--m-lh-body); box-shadow: none;
}
.m-input:hover { border-color: var(--m-text); }
.m-input:focus { border-color: var(--m-text); box-shadow: none; }
textarea.m-input, .m-input--area { min-height: 96px; padding: 10px 12px; resize: vertical; }
.m-input::placeholder { color: var(--m-muted); opacity: 1; }
.m-field-ui .m-input { min-height: var(--m-target-field); font-size: var(--m-fs-18); }
.m-field--error { border-left: 4px solid var(--m-block-line); padding-left: var(--m-sp-3); }
.m-field--error .m-input { border: 2px solid var(--m-block-line); }
.m-field__error { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-15); font-weight: var(--m-fw-semibold); color: var(--m-block-ink); }
.m-field__error[hidden] { display: none; }
.m-file { display: flex; align-items: center; gap: var(--m-sp-3); min-height: 56px; padding: 0 var(--m-sp-4); border: 1px dashed var(--m-control); border-radius: var(--m-r-md); background: var(--m-bg); }

/* ---------- Estado vacío: dice qué significa y qué viene después («Todo al día») ---------- */
.m-empty { display: flex; align-items: center; gap: var(--m-sp-3); padding: var(--m-sp-4) var(--m-sp-5); }
.m-empty__mark { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--m-done-bg); color: var(--m-done-ink); }
.m-empty__title { display: block; font-weight: var(--m-fw-semibold); }
.m-empty__next { display: block; font-size: var(--m-fs-14); color: var(--m-muted); }

/* ---------- Ayuda plegada (<details> nativo, sin JS) ---------- */
.m-details summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--m-target); cursor: pointer;
  color: var(--m-text); text-decoration: underline; text-decoration-color: var(--m-link-line); text-underline-offset: 3px; font-size: var(--m-fs-15);
}
.m-details summary::-webkit-details-marker { display: none; }
.m-details summary::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform var(--m-dur); }
.m-details[open] summary::before { transform: rotate(90deg); }
.m-details__body { border-left: 4px solid var(--m-line); padding: var(--m-sp-2) var(--m-sp-4); margin: var(--m-sp-1) 0 var(--m-sp-2); color: var(--m-text-2); font-size: var(--m-fs-15); }

/* ---------- Teclas ---------- */
.m-kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--m-line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--m-surface); color: var(--m-text-2);
  font-family: var(--m-font); font-size: var(--m-fs-12); font-weight: var(--m-fw-semibold); line-height: 1; white-space: nowrap;
}

/* ---------- Móvil del técnico («Hoy») ----------
   .m-field-ui sube la base a 18 px y los objetivos a 48 px.                */
.m-field-ui { font-size: var(--m-fs-18); --m-target: var(--m-target-field); }
.m-mbar { display: flex; align-items: center; gap: var(--m-sp-3); min-height: 64px; padding: 8px var(--m-sp-2) 8px var(--m-sp-4); background: var(--m-chrome); color: var(--m-on-dark); }
.m-mbar__logo { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.m-mbar__title { font-size: var(--m-fs-20); font-weight: var(--m-fw-bold); line-height: 1.15; }
.m-mbar__sub { font-size: var(--m-fs-15); color: var(--m-on-chrome); line-height: 1.3; }
.m-net { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--m-r-pill); background: var(--m-surface); color: var(--m-text); font-size: var(--m-fs-15); font-weight: var(--m-fw-bold); white-space: nowrap; }
/* Banda «Sin cobertura»: no es un error; dice qué queda por enviar (role=status) */
.m-offline { display: flex; align-items: center; gap: var(--m-sp-3); padding: 10px var(--m-sp-4); background: var(--m-band); color: var(--m-on-dark); font-size: var(--m-fs-16); line-height: 1.35; }
.m-offline b { font-weight: var(--m-fw-bold); }
.m-offline .m-i { color: var(--m-brand-accent); }
.m-offline__sub { display: block; font-size: var(--m-fs-15); color: var(--m-on-chrome); }
.m-job { margin: var(--m-sp-3) var(--m-sp-3) 0; background: var(--m-surface); border: 1px solid var(--m-line-strong); border-radius: var(--m-r-lg); }
.m-job__head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px var(--m-sp-4) 0; font-size: var(--m-fs-16); font-weight: var(--m-fw-bold); }
.m-job__name { padding: 2px var(--m-sp-4) 0; font-size: var(--m-fs-24); font-weight: var(--m-fw-bold); line-height: 1.2; letter-spacing: -.01em; }
.m-job__place { padding: 2px var(--m-sp-4) 0; color: var(--m-text-2); font-size: var(--m-fs-16); }
.m-job__pre { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px var(--m-sp-4) 0; font-size: var(--m-fs-16); }
.m-job__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-sp-2); padding: var(--m-sp-3) var(--m-sp-4) var(--m-sp-4); }
.m-steps-head { display: flex; align-items: center; justify-content: space-between; gap: var(--m-sp-3); padding: 12px var(--m-sp-4) 8px; border-top: 1px solid var(--m-line); }
.m-steps-head__t { font-size: var(--m-fs-18); font-weight: var(--m-fw-bold); }
.m-progress { display: flex; gap: 4px; }
.m-progress i { width: 18px; height: 6px; border-radius: 3px; background: var(--m-rail-future); }
.m-progress i.d, .m-progress i.is-done { background: var(--m-done-line); }
.m-step { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; column-gap: var(--m-sp-3); min-height: 64px; padding: 8px var(--m-sp-4); border-top: 1px solid var(--m-line); color: inherit; text-decoration: none; position: relative; }
.m-step__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--m-subtle); color: var(--m-text-2); }
.m-step__ic--done { background: var(--m-done-bg); color: var(--m-done-ink); }
.m-step__ic--now { background: var(--m-text); color: var(--m-on-action); }
.m-step__t { font-size: var(--m-fs-18); font-weight: var(--m-fw-semibold); line-height: 1.25; }
.m-step__s { font-size: var(--m-fs-15); color: var(--m-text-2); line-height: 1.3; margin-top: 2px; }
.m-step--now { background: var(--m-selected); }
.m-step__more { grid-column: 2 / 4; margin-top: 10px; }
.m-dock { position: sticky; bottom: 0; z-index: var(--m-z-sticky); background: var(--m-surface); border-top: 1px solid var(--m-line-strong); box-shadow: var(--m-shadow-dock); }
.m-tabbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid var(--m-line); background: var(--m-surface); }
.m-tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; color: var(--m-text-2); text-decoration: none; font-size: var(--m-fs-14); font-weight: var(--m-fw-medium); background: none; border: 0; }
.m-tabbar__item:hover { background: var(--m-hover); color: var(--m-text); }
.m-tabbar__item[aria-current="page"] { color: var(--m-text); font-weight: var(--m-fw-bold); }
.m-tabbar__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--m-text); }
/* Opción grande de la hoja «Cerrar la visita».
   --locked: no se puede elegir y dice por qué. --warn: se puede elegir pero
   avisa de lo que falta («Instalación finalizada» sin la firma no bloquea). */
.m-choice {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--m-sp-3); align-items: start; width: 100%; min-height: var(--m-target-hero);
  margin: 0; padding: 12px var(--m-sp-4); text-align: left; cursor: pointer; font: inherit; font-weight: var(--m-fw-regular); white-space: normal;
  background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-control); border-radius: var(--m-r-lg);
}
.m-choice:hover { background: var(--m-hover); border-color: var(--m-text); color: var(--m-text); }
.m-choice__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--m-subtle); color: var(--m-text); }
.m-choice__t { display: block; font-size: var(--m-fs-18); font-weight: var(--m-fw-bold); line-height: 1.3; }
.m-choice__s { display: block; font-size: var(--m-fs-15); color: var(--m-text-2); line-height: 1.35; margin-top: 2px; }
.m-choice--locked { background: var(--m-subtle); border-style: dashed; cursor: default; }
.m-choice--locked:hover { background: var(--m-subtle); border-color: var(--m-control); }
.m-choice--warn { border-color: var(--m-warn-line); }
.m-choice--warn .m-choice__ic { background: var(--m-warn-bg); color: var(--m-warn-ink); }
.m-choice--warn .m-choice__s { color: var(--m-warn-ink); }
.m-choice--danger { border-color: var(--m-block-line); }
.m-choice--danger:hover { background: var(--m-block-bg); border-color: var(--m-block-line); }
.m-choice--danger .m-choice__ic { background: var(--m-block-bg); color: var(--m-block-ink); }
.m-choice--danger .m-choice__t { color: var(--m-block-ink); }

/* ---------- Alto contraste de Windows (forced-colors) ---------- */
@media (forced-colors: active) {
  .m-ui, .m-ui * { --m-ring: Highlight; }
  .m-btn, .m-status, .m-phase, .m-seg__opt, .m-choice, .m-search, .m-toast, .m-note, .m-dialog, .m-sheet, .m-drawer { border: 1px solid CanvasText; }
  .m-rail__s--now, .m-tk--todo, .m-row[aria-current="true"]::before, .m-next::before, .m-tab[aria-selected="true"]::after,
  .m-tab[aria-current="page"]::after, .m-nav__item[aria-current="page"]::before { background: Highlight; forced-color-adjust: none; }
  .m-seg__opt[aria-pressed="true"], .m-seg__opt[aria-checked="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .m-field--error { border-left-color: CanvasText; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-ui *, .m-ui *::before, .m-ui *::after, .m-toast { transition: none !important; animation: none !important; }
}

/* =====================================================================
   REDISEÑO UX (23/10/2026, fase 2): la evolución del prototipo (ux-rediseno-20261021/prototipo/ui/components.css,
   desde «EVOLUCIÓN 21/10» hasta la ronda 7), ACOTADA a :where(.m-rd). Las pantallas actuales no la ven: solo las
   piezas nuevas (cajón, buscador Ctrl K, avisos con «Deshacer», filas) viven dentro de un elemento .m-rd.
   :where() no suma especificidad: dentro de .m-rd gana como en el prototipo (va después de lo del 15/10).
   Lo de html/:root pasa a html.m-rediseno (la clase la pone ui/rd-http.js con la bandera REDISENO_UX).
   Generado con un script desde el prototipo: para cambiarlo, edita aquí y apúntalo en REDISENO-ESTADO.md.
   ===================================================================== */
/* =====================================================================
   EVOLUCIÓN 21/10/2026 (especificación, sección 5.2)
   Sin colores nuevos: todo sale de tokens.css. Componentes nuevos o
   cambiados: armazón con cabecera fija, .m-summary, .m-chips, .m-row con
   densidades y modo índice (consultas de contenedor), .m-drawer con barra
   y «Siguiente» fijos, .m-todo, .m-savestate, .m-conflict, .m-dash,
   .m-board, .m-pager, .m-trunc/.m-clamp, .m-tag, .m-menu, .m-palette,
   .m-appbar/.m-fab, .m-quick, .m-novedades, .m-terminal, .m-preview.
   ===================================================================== */
html.m-rediseno { scroll-padding-top: calc(var(--m-sticky-h) + 8px); }

:where(.m-rd) .m-ui [hidden] { display: none !important; }
:where(.m-rd) .m-ui .m-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
:where(.m-rd) .m-ui .m-btn[aria-busy="true"] { opacity: .8; }
:where(.m-rd) .m-ui code { font-size: var(--m-fs-14); background: var(--m-subtle); padding: 1px 4px; border-radius: 4px; }

/* ---------- Armazón: barra lateral | contenido | cajón ---------- */
:where(.m-rd) .m-shell { display: grid; grid-template-columns: var(--m-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
:where(.m-rd) .m-shell > .m-side { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; z-index: 20; }
:where(.m-rd) .m-shell > .m-main { grid-column: 2; grid-row: 1; min-width: 0; }
:where(.m-rd) .m-shell > .m-drawer { grid-row: 1; }
:where(.m-rd) .m-shell--sin-barra { grid-template-columns: minmax(0, 1fr); }
:where(.m-rd) .m-shell--sin-barra > .m-main { grid-column: 1; }
:where(.m-rd) .m-shell > .m-appbar, :where(.m-rd) .m-shell > .m-tabbar--fixed { display: none; }
:where(.m-rd) .m-ui .m-nav { overflow: visible; flex: 1 0 auto; min-height: auto; }
:where(.m-rd) .m-nav__grp { display: flex; flex-direction: column; gap: 2px; }
:where(.m-rd) .m-nav__body { display: flex; flex-direction: column; gap: 2px; }
:where(.m-rd) .m-nav__txt { flex: 1; min-width: 0; }
:where(.m-rd) .m-nav__item .m-sq { width: 22px; height: 22px; }
:where(.m-rd) .m-side .m-sq { background: var(--ph-dark, var(--m-on-chrome-2)); color: var(--m-chrome); }
:where(.m-rd) .m-side .m-sq--x { background: transparent; color: var(--m-on-chrome-2); }
:where(.m-rd) .m-page-wrap { min-width: 0; outline: none; }

/* Cabecera fija de 56 px (título, «Actualizado», densidad y ayuda siempre en el mismo sitio: WCAG 3.2.6) */
:where(.m-rd) .m-pagehead { position: sticky; top: 0; z-index: var(--m-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--m-sp-4);
  min-height: var(--m-sticky-h); padding: 6px var(--m-sp-6); background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
:where(.m-rd) .m-pagehead__main { display: flex; align-items: baseline; gap: var(--m-sp-3); min-width: 0; }
:where(.m-rd) .m-pagehead__title { font-size: var(--m-fs-20); font-weight: var(--m-fw-bold); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
:where(.m-rd) .m-pagehead__sub { font-size: var(--m-fs-14); color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-pagehead__tools { display: flex; align-items: center; gap: 2px; flex: none; }
:where(.m-rd) .m-pagehead__upd { font-size: var(--m-fs-14); color: var(--m-muted); margin-right: 2px; white-space: nowrap; }
:where(.m-rd) .m-page { padding: var(--m-sp-4) var(--m-sp-6) var(--m-sp-12); max-width: 1500px; container-type: inline-size; container-name: pagina; }
:where(.m-rd) .m-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); margin: var(--m-sp-2) 0 var(--m-sp-3); }

/* ---------- Resumen en una línea: cada cifra con su palabra, y filtra ---------- */
:where(.m-rd) .m-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 var(--m-sp-2); }
:where(.m-rd) .m-summary__item { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: var(--m-r-md); color: var(--m-text-2); text-decoration: none; font-size: var(--m-fs-15); border: 1px solid transparent; }
:where(.m-rd) a.m-summary__item:hover { background: var(--m-hover); color: var(--m-text); }
:where(.m-rd) .m-summary__item.is-on { background: var(--m-surface); border-color: var(--m-text); color: var(--m-text); }
:where(.m-rd) .m-summary__n { font-size: var(--m-fs-18); font-weight: var(--m-fw-bold); color: var(--m-text); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-summary__late { color: var(--m-late); font-weight: var(--m-fw-semibold); font-size: var(--m-fs-14); }
:where(.m-rd) .m-summary__sep { width: 1px; align-self: stretch; margin: 6px 6px; background: var(--m-line-strong); }
:where(.m-rd) .m-summary .m-inline-field { margin-left: auto; }
:where(.m-rd) .m-summary .m-btn { margin-left: var(--m-sp-2); }
:where(.m-rd) .m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--m-sp-3); }
:where(.m-rd) .m-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--m-r-pill); border: 1px solid var(--m-line-strong); background: var(--m-surface); color: var(--m-text-2); font-size: var(--m-fs-14); font-weight: var(--m-fw-medium); text-decoration: none; white-space: nowrap; }
:where(.m-rd) .m-chip b { color: var(--m-text); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-chip:hover { border-color: var(--m-control); color: var(--m-text); }
:where(.m-rd) .m-chip.is-on { background: var(--m-text); border-color: var(--m-text); color: var(--m-on-action); }
:where(.m-rd) .m-chip.is-on b { color: var(--m-on-action); }
:where(.m-rd) .m-sq--light { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; background: var(--ph-ink, var(--m-text-2)); color: var(--m-on-action); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); flex: none; }
:where(.m-rd) .m-sq--light.m-sq--x { background: transparent; color: var(--m-text-2); box-shadow: inset 0 0 0 1.5px var(--m-text-2); }
:where(.m-rd) .m-chip.is-on .m-sq--light.m-sq--x { color: var(--m-on-action); box-shadow: inset 0 0 0 1.5px var(--m-on-action); }
:where(.m-rd) .m-filtro-on { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-14); color: var(--m-text-2); margin: 0 0 var(--m-sp-3); }

/* ---------- Grupos de la bandeja ---------- */
:where(.m-rd) .m-group { margin: 0 0 var(--m-sp-4); background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); overflow: clip; }
:where(.m-rd) .m-group__title { display: flex; align-items: center; gap: var(--m-sp-2); min-height: 40px; padding: 0 var(--m-sp-4); background: var(--m-subtle); border-bottom: 1px solid var(--m-line);
  font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--m-text-2); }
:where(.m-rd) .m-group__n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--m-r-pill); background: var(--m-text); color: var(--m-on-action); font-size: var(--m-fs-12); letter-spacing: 0; font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-group__hint { margin-left: auto; font-size: var(--m-fs-14); font-weight: var(--m-fw-regular); letter-spacing: 0; text-transform: none; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
:where(.m-rd) .m-group--fold > summary { list-style: none; cursor: pointer; }
:where(.m-rd) .m-group--fold > summary::-webkit-details-marker { display: none; }
:where(.m-rd) .m-group--fold > summary .m-group__title::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform var(--m-dur); }
:where(.m-rd) .m-group--fold[open] > summary .m-group__title::before { transform: rotate(90deg); }
:where(.m-rd) .m-group--fold:not([open]) .m-group__title { border-bottom: 0; }
:where(.m-rd) .m-group__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--m-sp-4); }
:where(.m-rd) .m-group .m-empty { min-height: 56px; }
:where(.m-rd) .m-empty--box { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); }
:where(.m-rd) .m-group--relevo { border-style: dashed; }

/* ---------- Fila: alto fijo, la fila entera abre el cajón, nada se mueve al marcar ----------
   Compacta (oficina): una línea de 40 px. Cómoda: dos líneas de 64 px. Con el cajón abierto (lista
   estrecha), modo índice: nombre, fase y plazo; la acción vive en la cabecera del cajón. */
:where(.m-rd) .m-ui .m-row { display: grid; grid-template-columns: 20px minmax(190px, 1.45fr) minmax(200px, 1.25fr) minmax(0, .8fr) auto auto;
  grid-template-areas: "ic who state next due act"; column-gap: var(--m-sp-3); align-items: center; min-height: var(--m-row-h); padding: 3px var(--m-sp-3) 3px var(--m-sp-4); }
:where(.m-rd) .m-row__check { grid-area: chk; width: 24px; height: 24px; margin: 0; position: relative; z-index: 2; accent-color: var(--m-text); }
:where(.m-rd) .m-row__checkwrap { grid-area: chk; display: grid; place-items: center; width: 24px; height: 24px; position: relative; z-index: 2; cursor: pointer; }
:where(.m-rd) .m-ui .m-row:has(.m-row__check) { grid-template-columns: 24px 20px minmax(190px, 1.45fr) minmax(200px, 1.25fr) minmax(0, .8fr) auto auto; grid-template-areas: "chk ic who state next due act"; }
:where(.m-rd) .m-row__ic { grid-area: ic; display: grid; place-items: center; }
:where(.m-rd) .m-row__ic .m-sti { width: 20px; height: 20px; display: grid; place-items: center; }
:where(.m-rd) .m-row__who { grid-area: who; display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
:where(.m-rd) .m-row__who .m-row__open { flex: 0 0 auto; min-width: 4em; max-width: 72%; }
:where(.m-rd) .m-row__who .m-tag { display: inline-block; flex: 0 5 auto; min-width: 2.5em; max-width: 13em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-row__who .m-tag .m-i { display: inline-block; vertical-align: -2px; margin-right: 2px; }
:where(.m-rd) .m-row__next .m-tag { flex: none; }
:where(.m-rd) .m-row__open--lote { text-decoration: none; cursor: default; }
:where(.m-rd) .m-row__open--lote::after { content: none !important; }
:where(.m-rd) .m-row__place { flex: 0 10 auto; min-width: 0; font-size: var(--m-fs-14); color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

:where(.m-rd) .m-row__state { grid-area: state; display: flex; align-items: center; gap: 8px; min-width: 0; }
:where(.m-rd) .m-row__state .m-phase { flex: none; }
:where(.m-rd) .m-row__paso { min-width: 0; font-size: var(--m-fs-14); color: var(--m-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-row__next { grid-area: next; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--m-fs-15); }
:where(.m-rd) .m-row__verb { font-weight: var(--m-fw-semibold); color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-row__nexttxt { color: var(--m-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
:where(.m-rd) .m-row--bloqueado .m-row__nexttxt { color: var(--m-block-ink); font-weight: var(--m-fw-medium); }
:where(.m-rd) .m-row__done { display: inline-flex; align-items: center; gap: 6px; color: var(--m-done-ink); font-weight: var(--m-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
:where(.m-rd) .m-row__due { grid-area: due; justify-self: end; text-align: right; min-width: 0; }
:where(.m-rd) .m-row__act { grid-area: act; position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
:where(.m-rd) .m-row__marks { grid-area: marks; display: none; }
:where(.m-rd) .m-row--te_toca .m-row__open { font-weight: var(--m-fw-bold); }
:where(.m-rd) .m-row--done { background: var(--m-bg); }
:where(.m-rd) .m-row--done .m-row__open, :where(.m-rd) .m-row--done .m-row__paso { color: var(--m-muted); font-weight: var(--m-fw-medium); }
:where(.m-rd) .m-row--lote { background: linear-gradient(90deg, var(--m-subtle), var(--m-surface) 60%); }
:where(.m-rd) .m-row--lote .m-row__open--lote { font-weight: var(--m-fw-bold); color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-phase--x { background: var(--m-surface); color: var(--m-text-2); box-shadow: inset 0 0 0 1px var(--m-control); }
:where(.m-rd) .m-phase--x .m-phase__n { background: transparent; color: var(--m-text-2); box-shadow: inset 0 0 0 1.5px var(--m-text-2); }
:where(.m-rd) .m-more { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: var(--m-r-pill); background: var(--m-subtle); color: var(--m-text-2); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); }
/* El botón de la fila: 32 px en compacta (> 24 px de WCAG 2.5.8), 44 px en cómoda y en el móvil */
:where(.m-rd) .m-ui .m-btn--row { min-height: var(--m-target-dense); padding: 0 var(--m-sp-3); font-size: var(--m-fs-14); border-radius: var(--m-r-sm); }
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-btn--row { min-height: var(--m-target); font-size: var(--m-fs-15); }
:where(.m-rd) .m-ui[data-densidad="compacta"] .m-row .m-icon-btn { width: var(--m-target-dense); height: var(--m-target-dense); min-width: var(--m-target-dense); min-height: var(--m-target-dense); }
:where(.m-rd) .m-btn--file { cursor: pointer; }
:where(.m-rd) .m-btn--file:focus-within { outline: var(--m-focus-width) solid var(--m-focus); outline-offset: var(--m-focus-offset); }
/* Cómoda: dos líneas (y una tercera con las marcas Cita · Contrato · Fotos en el panel comercial) */
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-row { grid-template-columns: 20px minmax(0, 1.2fr) minmax(0, 1fr) auto auto; grid-template-areas: "ic who who due act" "ic state next next act" "ic marks marks marks act"; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-row__marks { display: block; }
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-row:not(:has(.m-row__marks)) { grid-template-areas: "ic who who due act" "ic state next next act"; }

/* Modo índice (lista estrecha, p. ej. con el cajón abierto en 1366: quedan 630 px) */
@container pagina (max-width: 760px) {
  :where(.m-rd) .m-ui .m-row, :where(.m-rd) .m-ui[data-densidad="comoda"] .m-row, :where(.m-rd) .m-ui[data-densidad="comoda"] .m-row:not(:has(.m-row__marks)) { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "ic who due" "ic state state"; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  :where(.m-rd) .m-ui .m-row:has(.m-row__check) { grid-template-columns: 24px 20px minmax(0, 1fr) auto; grid-template-areas: "chk ic who due" "chk ic state state"; }
  :where(.m-rd) .m-row__next, :where(.m-rd) .m-row__marks, :where(.m-rd) .m-row__act { display: none !important; }
  :where(.m-rd) .m-group__hint { display: none; }
}
/* Sin cajón y estrecho (768 px): la fila se apila con su botón */
@container pagina (max-width: 760px) {
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-ui .m-row, :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row { grid-template-areas: "ic who due" "ic state state" "ic next next" "ic marks marks" "ic act act"; }
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row__next { display: flex !important; }
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row__act { display: flex !important; justify-content: flex-start; flex-wrap: wrap; }
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row__marks { display: block !important; }
}
@container pagina (max-width: 520px) {
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row { row-gap: 4px; padding: 10px var(--m-sp-3) 12px; }
  :where(.m-rd) .m-row__act .m-btn--row { min-height: var(--m-target) !important; flex: 1 1 auto; font-size: var(--m-fs-15) !important; }
  :where(.m-rd) .m-row__act .m-icon-btn { width: var(--m-target) !important; height: var(--m-target) !important; min-width: var(--m-target) !important; min-height: var(--m-target) !important; }
  :where(.m-rd) .m-row__who { flex-wrap: wrap; row-gap: 2px; }
  :where(.m-rd) .m-row__who .m-row__open { white-space: nowrap; max-width: 100%; }
  :where(.m-rd) .m-row__place { flex-basis: 100%; }
  :where(.m-rd) .m-summary__item { min-height: 44px; }
  :where(.m-rd) .m-chip { min-height: 44px; }
}

/* ---------- Etiquetas: Monday, sin traducir, posible duplicado ---------- */
:where(.m-rd) .m-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 6px; border-radius: 4px; font-size: var(--m-fs-12); font-weight: var(--m-fw-semibold); line-height: 1.3; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
:where(.m-rd) .m-tag--monday { background: var(--m-subtle); color: var(--m-text-2); box-shadow: inset 0 0 0 1px var(--m-line-strong); }
:where(.m-rd) .m-tag--unknown { background: var(--m-unknown-bg); color: var(--m-unknown-ink); box-shadow: inset 0 0 0 1px var(--m-unknown-line); }
:where(.m-rd) .m-tag--dup { background: var(--m-surface); color: var(--m-text-2); box-shadow: inset 0 0 0 1px var(--m-control); }
:where(.m-rd) .m-tag--quiet { background: var(--m-subtle); color: var(--m-text-2); }
:where(.m-rd) .m-tag--block { background: var(--m-block-bg); color: var(--m-block-ink); box-shadow: inset 0 0 0 1px var(--m-block-line); }
:where(.m-rd) .m-trunc { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
:where(.m-rd) .m-trunc--inline { max-width: 26ch; }
:where(.m-rd) .m-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
:where(.m-rd) .m-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.m-rd) .m-ui .m-clamp1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sin responsable: el porqué manda; el paso, solo con su chip */
:where(.m-rd) .m-listwrap--razon .m-row { grid-template-columns: 24px 20px minmax(170px, 1.2fr) auto minmax(0, 1.6fr) auto auto !important; }
:where(.m-rd) .m-listwrap--razon .m-row__paso { display: none; }
:where(.m-rd) .m-table--sheet td:nth-child(4) { white-space: nowrap; }
:where(.m-rd) .m-due--stale { color: var(--m-stale-ink); background: var(--m-stale-bg); box-shadow: inset 0 0 0 1px var(--m-stale-line); border-radius: 4px; padding: 1px 6px; }
:where(.m-rd) .m-stale { color: var(--m-stale-ink); background: var(--m-stale-bg); padding: 0 4px; border-radius: 3px; font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-stale-dot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--m-stale-bg); color: var(--m-stale-ink); box-shadow: inset 0 0 0 1px var(--m-stale-line); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); }
:where(.m-rd) .m-marks { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
:where(.m-rd) .m-tick { font-size: var(--m-fs-14); }

/* ---------- Cajón (ficha única) ---------- */
:where(.m-rd) .m-ui .m-drawer { display: none; }
:where(.m-rd) .m-shell--cajon > .m-drawer { display: flex; flex-direction: column; grid-column: 3; position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--m-surface); box-shadow: var(--m-shadow-drawer); z-index: 30; }
:where(.m-rd) .m-shell--cajon { grid-template-columns: var(--m-sidebar-w) minmax(var(--m-list-min), 1fr) var(--m-drawer-w-md); }
@media (min-width: 1440px) { :where(.m-rd) .m-shell--cajon { grid-template-columns: var(--m-sidebar-w) minmax(var(--m-list-min), 1fr) var(--m-drawer-w); } }
:where(.m-rd) .m-drawer__inner { display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%; container-type: inline-size; container-name: cajon; }
:where(.m-rd) .m-ui .m-drawer__bar { position: relative; top: auto; display: flex; align-items: center; gap: 2px; min-height: 48px; padding: 0 var(--m-sp-2); border-bottom: 1px solid var(--m-line); background: var(--m-surface); flex: none; }
:where(.m-rd) .m-drawer__back { display: none !important; }
:where(.m-rd) .m-drawer__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 150px; }
:where(.m-rd) .m-ui .m-drawer__head { padding: var(--m-sp-3) var(--m-sp-5) 0; }
:where(.m-rd) .m-ui .m-drawer__name { font-size: var(--m-fs-20); font-weight: var(--m-fw-bold); line-height: 1.25; letter-spacing: -.01em; outline: none; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.m-rd) .m-ui .m-drawer__refs { margin-top: 2px; font-size: var(--m-fs-14); color: var(--m-muted); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
:where(.m-rd) .m-drawer__fase { display: flex; align-items: center; gap: var(--m-sp-3); flex-wrap: wrap; margin-top: var(--m-sp-2); }
:where(.m-rd) .m-drawer__paso { margin-top: 4px; font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-drawer__risk { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 6px 10px; border-radius: var(--m-r-md); background: var(--m-block-bg); color: var(--m-block-ink); font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); }
/* El bloque «Siguiente» se queda fijo bajo la barra: la acción, siempre a la vista (O4) */
:where(.m-rd) .m-drawer__recoger { display: flex; align-items: center; gap: var(--m-sp-2); margin: var(--m-sp-3) var(--m-sp-5) 0; padding: var(--m-sp-2) var(--m-sp-3); border-radius: var(--m-r-md); background: var(--m-wait-bg); color: var(--m-wait-ink); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-drawer__recoger > span { flex: 1; min-width: 0; }
:where(.m-rd) .m-drawer__recoger--libre { background: var(--m-warn-bg); color: var(--m-warn-ink); box-shadow: inset 4px 0 0 var(--m-warn-line); }
:where(.m-rd) .m-drawer__next { position: sticky; top: 0; z-index: 3; margin-top: var(--m-sp-3); padding: var(--m-sp-2) var(--m-sp-5) var(--m-sp-3); background: var(--m-surface); border-bottom: 1px solid var(--m-line); box-shadow: 0 6px 12px -10px rgba(17, 21, 18, .25); }
:where(.m-rd) .m-drawer__nextline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--m-fs-15); }
:where(.m-rd) .m-drawer__verb { font-size: var(--m-fs-16); }
:where(.m-rd) .m-drawer__why { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: var(--m-block-ink); font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-drawer__note { margin-top: 2px; font-size: var(--m-fs-14); color: var(--m-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.m-rd) .m-drawer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: var(--m-sp-2); }
:where(.m-rd) .m-ui .m-drawer__body { padding: var(--m-sp-3) var(--m-sp-5) var(--m-sp-12); }
:where(.m-rd) .m-contact { display: inline-flex; gap: 0; min-width: 0; }
:where(.m-rd) .m-ui .m-contact .m-btn { min-height: var(--m-target); padding: 0 6px; gap: 4px; font-size: var(--m-fs-14); }
:where(.m-rd) #cajon-titulo:focus { outline: none; }
:where(.m-rd) .m-terminal { display: flex; gap: var(--m-sp-3); align-items: flex-start; margin: var(--m-sp-3) var(--m-sp-5) 0; padding: var(--m-sp-3) var(--m-sp-4); border-radius: var(--m-r-md); background: var(--m-terminal-bg); color: var(--m-terminal-ink); }
:where(.m-rd) .m-terminal__t { font-weight: var(--m-fw-bold); color: var(--m-text); }
:where(.m-rd) .m-terminal__s { font-size: var(--m-fs-14); }
:where(.m-rd) .m-nextup { display: flex; align-items: center; gap: var(--m-sp-2); margin: 0 0 var(--m-sp-3); padding: var(--m-sp-2) var(--m-sp-3); border-radius: var(--m-r-md); background: var(--m-done-bg); color: var(--m-done-ink); font-size: var(--m-fs-15); }
:where(.m-rd) .m-nextup .m-btn { margin-left: auto; }
:where(.m-rd) .m-drawer__inner--grande { height: auto; }
:where(.m-rd) .m-drawer__inner--grande .m-drawer__scroll { overflow: visible; }
:where(.m-rd) .m-drawer__inner--grande .m-drawer__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 var(--m-sp-6); align-items: start; }
:where(.m-rd) .m-drawer__inner--grande .m-drawer__body > .m-falta, :where(.m-rd) .m-drawer__inner--grande .m-drawer__body > .m-nextup { grid-column: 1 / -1; }
:where(.m-rd) .m-page--ficha { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); margin: var(--m-sp-4) var(--m-sp-6); padding: 0; }
:where(.m-rd) .m-page--ficha .m-crumbs { padding: var(--m-sp-2) var(--m-sp-5) 0; }

/* «Lo que falta para este paso»: filas de 44 px independientes, con su acción en línea */
:where(.m-rd) .m-falta { margin: 0 0 var(--m-sp-4); }
:where(.m-rd) .m-falta__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--m-sp-2); margin-bottom: 6px; }
:where(.m-rd) .m-falta__t { font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--m-text-2); margin-right: auto; }
:where(.m-rd) .m-todo { list-style: none; margin: 0; padding: 0; border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--m-surface); }
:where(.m-rd) .m-todo + .m-todo, :where(.m-rd) .m-todo + .m-quick, :where(.m-rd) .m-quick + .m-todo { margin-top: var(--m-sp-2); }
:where(.m-rd) .m-todo__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 52px; padding: 6px 10px; border-bottom: 1px solid var(--m-line); }
:where(.m-rd) .m-todo__row:last-child { border-bottom: 0; }
:where(.m-rd) .m-todo__ic { display: grid; place-items: center; }
:where(.m-rd) .m-sti--warn { color: var(--m-warn-ink); }
:where(.m-rd) .m-todo__txt { min-width: 0; display: flex; flex-direction: column; }
:where(.m-rd) .m-todo__t { font-size: var(--m-fs-15); font-weight: var(--m-fw-semibold); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.m-rd) .m-todo__row--hecho .m-todo__t { font-weight: var(--m-fw-medium); color: var(--m-text-2); }
:where(.m-rd) .m-todo__d { font-size: var(--m-fs-14); color: var(--m-muted); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.m-rd) .m-todo__n { font-size: var(--m-fs-12); color: var(--m-text-2); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-todo__act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
:where(.m-rd) .m-todo__row--bloqueo { background: var(--m-block-bg); }
:where(.m-rd) .m-todo__row--bloqueo .m-todo__t { color: var(--m-block-ink); }
:where(.m-rd) .m-todo__row--aviso { background: var(--m-warn-bg); }
:where(.m-rd) .m-todo__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); margin-bottom: var(--m-sp-2); }
:where(.m-rd) .m-todo--checks .m-todo__row { grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; }
@container cajon (max-width: 400px) { :where(.m-rd) .m-todo__row { grid-template-columns: 22px minmax(0, 1fr); } :where(.m-rd) .m-todo__act { grid-column: 2; justify-content: flex-start; } }
:where(.m-rd) .m-check2 { display: inline-flex; align-items: center; gap: 8px; min-height: var(--m-target-dense); padding: 0 8px; border: 1px solid var(--m-control); border-radius: var(--m-r-sm); cursor: pointer; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); background: var(--m-surface); }
:where(.m-rd) .m-check2 input, :where(.m-rd) .m-check3 input { width: 20px; height: 20px; margin: 0; accent-color: var(--m-text); flex: none; }
:where(.m-rd) .m-check3 { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
:where(.m-rd) .m-check3__t { font-size: var(--m-fs-15); line-height: 1.3; }
:where(.m-rd) .m-check3__n { color: var(--m-muted); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-check3 input:disabled + .m-check3__t { color: var(--m-muted); }
:where(.m-rd) .m-check3__who { text-align: right; white-space: nowrap; }
:where(.m-rd) .m-danger-zone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-3); margin-top: var(--m-sp-6); padding-top: var(--m-sp-4); border-top: 1px solid var(--m-line-strong); }

/* Secciones plegadas, con su resumen en el título */
:where(.m-rd) .m-sec { border-top: 1px solid var(--m-line); }
:where(.m-rd) .m-sec__sum { display: flex; align-items: baseline; gap: var(--m-sp-2); min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none; }
:where(.m-rd) .m-sec__sum::-webkit-details-marker { display: none; }
:where(.m-rd) .m-sec__sum::before { content: ""; align-self: center; width: 0; height: 0; border-left: 7px solid var(--m-text-2); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform var(--m-dur); flex: none; }
:where(.m-rd) .m-sec[open] > .m-sec__sum::before { transform: rotate(90deg); }
:where(.m-rd) .m-sec__t { font-weight: var(--m-fw-bold); white-space: nowrap; }
:where(.m-rd) .m-sec__r { font-size: var(--m-fs-14); color: var(--m-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-sec__body { padding: 0 0 var(--m-sp-4); }
:where(.m-rd) .m-mini-h { font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); color: var(--m-text-2); margin: var(--m-sp-2) 0 6px; }
:where(.m-rd) .m-props--mini { grid-template-columns: 90px minmax(0, 1fr); font-size: var(--m-fs-14); }
:where(.m-rd) .m-props--mini dt, :where(.m-rd) .m-props--mini dd { padding: 5px 0; }
:where(.m-rd) .m-prewrap { white-space: pre-line; }
:where(.m-rd) .m-sub--warn { color: var(--m-warn-ink) !important; font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-split2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--m-sp-4); align-items: start; }
@container cajon (max-width: 470px) { :where(.m-rd) .m-split2 { grid-template-columns: minmax(0, 1fr); } }
:where(.m-rd) .m-plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--m-fs-15); }
:where(.m-rd) .m-plainlist li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
:where(.m-rd) .m-plain { color: var(--m-text-2); font-size: var(--m-fs-15); margin: var(--m-sp-2) 0; }
:where(.m-rd) .m-journey2 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m-sp-2); }
:where(.m-rd) .m-journey2__fase { padding: 8px 10px; border: 1px solid var(--m-line); border-radius: var(--m-r-md); }
:where(.m-rd) .m-journey2__fase.is-now { border: 2px solid var(--m-text); }
:where(.m-rd) .m-journey2__pasos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
:where(.m-rd) .m-journey2__paso { display: flex; align-items: center; gap: 8px; font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-journey2__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--m-control); font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); flex: none; }
:where(.m-rd) .m-journey2__paso--hecho .m-journey2__n { background: var(--m-done-ink); border-color: var(--m-done-ink); color: var(--m-on-action); }
:where(.m-rd) .m-journey2__paso--ahora { color: var(--m-text); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-journey2__paso--ahora .m-journey2__n { background: var(--m-text); border-color: var(--m-text); color: var(--m-on-action); }
:where(.m-rd) .m-activity { list-style: none; margin: var(--m-sp-3) 0 0; padding: 0; display: grid; gap: 0; }
:where(.m-rd) .m-activity__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--m-line); }
:where(.m-rd) .m-activity__who { font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-activity__when { font-size: var(--m-fs-14); color: var(--m-muted); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-activity__txt { grid-column: 1 / -1; font-size: var(--m-fs-15); color: var(--m-text-2); white-space: pre-line; overflow-wrap: anywhere; }
:where(.m-rd) .m-activity__item .m-btn { justify-self: start; }
:where(.m-rd) .m-activity__item.is-undone .m-activity__txt { text-decoration: line-through; color: var(--m-muted); }
:where(.m-rd) .m-comment .m-input { min-height: 64px; }
:where(.m-rd) .m-preview { margin: 0 0 var(--m-sp-2); border: 1px solid var(--m-line-strong); border-radius: var(--m-r-md); overflow: hidden; background: var(--m-bg); }
:where(.m-rd) .m-preview figcaption { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: var(--m-fs-14); color: var(--m-text-2); background: var(--m-subtle); border-bottom: 1px solid var(--m-line); }
:where(.m-rd) .m-preview__page { display: grid; gap: 8px; margin: 12px auto; padding: 20px 22px; width: min(320px, 90%); min-height: 200px; background: var(--m-surface); box-shadow: var(--m-shadow-2); }
:where(.m-rd) .m-preview__line { display: block; height: 9px; border-radius: 2px; background: var(--m-line); font-size: 0; }
:where(.m-rd) .m-preview__line:not(:empty) { height: auto; background: transparent; font-size: var(--m-fs-12); font-weight: var(--m-fw-semibold); color: var(--m-text-2); }
:where(.m-rd) .m-preview--mini { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--m-line-strong); border-radius: 4px; background: var(--m-bg); font-size: var(--m-fs-12); color: var(--m-text-2); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Formularios, guardado y 409 ---------- */
:where(.m-rd) .m-form { display: grid; gap: var(--m-sp-3); }
:where(.m-rd) .m-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--m-sp-3); }
:where(.m-rd) .m-form__note { font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); }
:where(.m-rd) .m-form__top { display: flex; justify-content: flex-end; margin-bottom: -8px; }
:where(.m-rd) .m-field__opt { font-weight: var(--m-fw-regular); color: var(--m-muted); font-size: var(--m-fs-14); }
:where(.m-rd) .m-field__warn { display: flex; align-items: center; gap: 6px; margin: -4px 0 0; color: var(--m-warn-ink); font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-file__txt { font-size: var(--m-fs-15); color: var(--m-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-ui .m-file { cursor: pointer; min-height: var(--m-target); }
:where(.m-rd) .m-file:focus-within { outline: var(--m-focus-width) solid var(--m-focus); outline-offset: var(--m-focus-offset); }
:where(.m-rd) .m-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
:where(.m-rd) .m-fieldset legend { margin-bottom: 6px; padding: 0; }
:where(.m-rd) .m-quick { margin-top: var(--m-sp-2); padding: var(--m-sp-3); border: 1px solid var(--m-line-strong); border-radius: var(--m-r-md); background: var(--m-bg); }
:where(.m-rd) .m-errsum { padding: var(--m-sp-3); border-radius: var(--m-r-md); background: var(--m-block-bg); color: var(--m-block-ink); font-size: var(--m-fs-15); }
:where(.m-rd) .m-errsum ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
:where(.m-rd) .m-errsum a { color: var(--m-block-ink); }
:where(.m-rd) .m-savestate { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-muted); }
:where(.m-rd) .m-savestate:empty { display: none; }
:where(.m-rd) .m-savestate--ok { color: var(--m-done-ink); }
:where(.m-rd) .m-savestate--error { color: var(--m-block-ink); }
:where(.m-rd) .m-savestate--cola { color: var(--m-text-2); }
:where(.m-rd) .m-autosave { min-height: 22px; font-size: var(--m-fs-14); color: var(--m-done-ink); display: flex; gap: 4px; align-items: center; }
:where(.m-rd) .m-conflict { padding: var(--m-sp-3); border-radius: var(--m-r-md); background: var(--m-warn-bg); color: var(--m-warn-ink); box-shadow: inset 4px 0 0 var(--m-warn-line); display: grid; gap: var(--m-sp-2); }
:where(.m-rd) .m-conflict p { display: flex; gap: 6px; align-items: flex-start; }
:where(.m-rd) .m-conflict__diff { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: var(--m-fs-15); color: var(--m-text); }
:where(.m-rd) .m-conflict__diff dt { font-weight: var(--m-fw-semibold); color: var(--m-warn-ink); }
:where(.m-rd) .m-conflict__diff dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- Envío: se lanza y se apunta ---------- */
:where(.m-rd) .m-send { display: grid; gap: var(--m-sp-3); }
:where(.m-rd) .m-send__lead { color: var(--m-text-2); }
:where(.m-rd) .m-send__pdf { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-slots { border: 0; margin: 0; padding: 0; display: grid; gap: var(--m-sp-3); max-height: 52vh; overflow-y: auto; }
:where(.m-rd) .m-slots__d { font-weight: var(--m-fw-bold); font-size: var(--m-fs-15); margin-bottom: 4px; }
:where(.m-rd) .m-slot { display: flex; align-items: center; gap: 10px; min-height: var(--m-target); padding: 0 12px; border: 1px solid var(--m-line-strong); border-radius: var(--m-r-md); margin-bottom: 4px; cursor: pointer; }
:where(.m-rd) .m-slot:has(input:checked) { border: 2px solid var(--m-text); background: var(--m-selected); padding: 0 11px; }
:where(.m-rd) .m-slot input { width: 20px; height: 20px; accent-color: var(--m-text); margin: 0; }

/* ---------- Menú «⋯» y popover ---------- */
:where(.m-rd) .m-ui.m-menu { position: fixed; z-index: 120; display: grid; gap: 2px; padding: 6px; background: var(--m-surface); border: 1px solid var(--m-line-strong); border-radius: var(--m-r-lg); box-shadow: var(--m-shadow-pop); }
:where(.m-rd) .m-menu__item { display: flex; align-items: center; gap: 10px; min-height: var(--m-target); padding: 0 12px; border: 0; border-radius: var(--m-r-md); background: none; text-align: left; font: inherit; font-size: var(--m-fs-15); color: var(--m-text); cursor: pointer; width: 100%; }
:where(.m-rd) .m-menu__item:hover, :where(.m-rd) .m-menu__item:focus-visible { background: var(--m-hover); }
:where(.m-rd) .m-menu__item[aria-disabled="true"] { color: var(--m-muted); cursor: not-allowed; }
:where(.m-rd) .m-menu__item--danger { color: var(--m-block-ink); }
:where(.m-rd) .m-menu__nota { margin-left: auto; font-size: var(--m-fs-12); color: var(--m-muted); padding-left: 8px; }
:where(.m-rd) .m-menu__sep { height: 1px; background: var(--m-line); margin: 4px 0; }
:where(.m-rd) .m-menu__label { font-size: var(--m-fs-14); color: var(--m-text-2); font-weight: var(--m-fw-semibold); padding: 6px 12px 0; }
:where(.m-rd) .m-menu--form { padding: 12px; gap: 6px; }

/* ---------- Ctrl K ---------- */
:where(.m-rd) .m-ui.m-palette { position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); margin: 0; width: min(680px, calc(100vw - 32px)); max-height: 76vh; padding: 0; border: 0; border-radius: var(--m-r-xl); background: var(--m-surface); box-shadow: var(--m-shadow-pop); display: flex; flex-direction: column; overflow: hidden; }
:where(.m-rd) .m-palette:not([open]) { display: none; }
:where(.m-rd) .m-palette::backdrop { background: var(--m-scrim); }
:where(.m-rd) .m-palette__bar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--m-line); }
:where(.m-rd) .m-palette__input { flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; font-size: var(--m-fs-18); color: var(--m-text); outline: none; }
:where(.m-rd) .m-palette__hint { padding: 6px 16px; font-size: var(--m-fs-14); color: var(--m-muted); border-bottom: 1px solid var(--m-line); }
:where(.m-rd) .m-palette__res { overflow-y: auto; padding: 6px; }
:where(.m-rd) .m-palette__opt { display: grid; grid-template-rows: 26px 22px; align-content: center; height: 56px; padding: 0 10px; border-radius: var(--m-r-md); cursor: pointer; overflow: hidden; }
:where(.m-rd) .m-palette__opt[aria-selected="true"] { background: var(--m-selected); box-shadow: inset 4px 0 0 var(--m-text); }
:where(.m-rd) .m-palette__opt:hover { background: var(--m-hover); }
:where(.m-rd) .m-palette__l1 { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
:where(.m-rd) .m-palette__name { font-weight: var(--m-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
:where(.m-rd) .m-palette__l1 .m-phase, :where(.m-rd) .m-palette__l1 .m-tag { flex: none; }
:where(.m-rd) .m-palette__paso { font-size: var(--m-fs-12); color: var(--m-muted); flex: none; }
:where(.m-rd) .m-palette__l2 { font-size: var(--m-fs-14); color: var(--m-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-palette__sec { padding: 8px 10px 2px; font-size: var(--m-fs-12); font-weight: var(--m-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--m-muted); }
:where(.m-rd) .m-palette__empty { padding: 16px; color: var(--m-text-2); }
:where(.m-rd) .m-palette__foot { padding: 8px 10px; font-size: var(--m-fs-14); }
:where(.m-rd) .m-ui.m-palette--movil { top: 0; left: 0; transform: none; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }

/* ---------- Dirección: tres bloques en la primera pantalla (P15) ---------- */
:where(.m-rd) .m-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m-sp-3); margin-bottom: var(--m-sp-4); }
@container pagina (max-width: 900px) { :where(.m-rd) .m-dash { grid-template-columns: minmax(0, 1fr); gap: var(--m-sp-2); } }
@container pagina (max-width: 560px) {
  :where(.m-rd) .m-dash__hint { display: none; }
  :where(.m-rd) .m-dash__block { padding: var(--m-sp-2) var(--m-sp-3); }
  :where(.m-rd) .m-bar { min-height: 24px; }
  :where(.m-rd) .m-money { min-height: 26px; padding: 2px 4px; }
  :where(.m-rd) .m-dash__risk { margin-top: 6px; padding: 4px 8px; }
  :where(.m-rd) .m-decide__row { min-height: 44px; }
}
:where(.m-rd) .m-dash__block { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: var(--m-sp-3) var(--m-sp-4) var(--m-sp-3); min-width: 0; }
:where(.m-rd) .m-dash__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--m-text-2); }
:where(.m-rd) .m-dash__title b { font-size: var(--m-fs-24); letter-spacing: -.01em; color: var(--m-text); text-transform: none; font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-dash__hint { font-size: var(--m-fs-14); color: var(--m-muted); margin: 2px 0 var(--m-sp-2); }
:where(.m-rd) .m-dash__risk { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--m-sp-2); padding: 6px 10px; border-radius: var(--m-r-md); background: var(--m-block-bg); color: var(--m-block-ink); font-size: var(--m-fs-14); }
:where(.m-rd) .m-dash__risk a { color: var(--m-block-ink); }
:where(.m-rd) .m-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
:where(.m-rd) .m-bar { display: grid; grid-template-columns: 128px minmax(0, 1fr) 28px; align-items: center; gap: 8px; min-height: 30px; padding: 0 4px; border-radius: var(--m-r-sm); color: var(--m-text); text-decoration: none; }
:where(.m-rd) .m-bar:hover { background: var(--m-hover); }
:where(.m-rd) .m-bar__track { height: 10px; border-radius: 3px; background: var(--m-subtle); overflow: hidden; }
:where(.m-rd) .m-bar__fill { display: block; height: 100%; min-width: 2px; background: var(--ph-solid); border-radius: 3px; }
:where(.m-rd) .m-bar__n { text-align: right; font-weight: var(--m-fw-bold); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-moneys { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
:where(.m-rd) .m-moneys--aparte { margin-top: var(--m-sp-2); padding-top: var(--m-sp-2); border-top: 1px dashed var(--m-line-strong); }
:where(.m-rd) .m-money { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 30px; padding: 4px; border-radius: var(--m-r-sm); color: var(--m-text); text-decoration: none; font-size: var(--m-fs-15); }
:where(.m-rd) .m-money:hover { background: var(--m-hover); }
:where(.m-rd) .m-money__n { font-weight: var(--m-fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.m-rd) .m-money__k { color: var(--m-muted); font-weight: var(--m-fw-regular); }
:where(.m-rd) .m-decide { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
:where(.m-rd) .m-decide__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--m-line); font-size: var(--m-fs-15); }
:where(.m-rd) .m-decide__row:last-child { border-bottom: 0; }
:where(.m-rd) .m-decide__txt { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }

/* ---------- Tableros (Facturación, Legalización): caben y dicen su total ---------- */
:where(.m-rd) .m-tabs--etapas { margin-bottom: var(--m-sp-2); }
:where(.m-rd) .m-tab--etapa { flex-direction: column; align-items: flex-start; gap: 0; min-height: 56px; padding: 6px var(--m-sp-3); }
:where(.m-rd) .m-tab__name { font-size: var(--m-fs-15); }
:where(.m-rd) .m-tab__fig { font-size: var(--m-fs-16); color: var(--m-text); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-board { display: flex; gap: var(--m-sp-2); align-items: flex-start; overflow-x: auto; padding-bottom: var(--m-sp-2); }
:where(.m-rd) .m-board__col { flex: 1 1 230px; min-width: 210px; background: var(--m-subtle); border-radius: var(--m-r-lg); padding: 6px; }
:where(.m-rd) .m-board__col.is-on { box-shadow: inset 0 0 0 2px var(--m-text); }
:where(.m-rd) .m-board__col--block { background: var(--m-block-bg); }
:where(.m-rd) .m-board__col--empty { flex: 0 0 48px; min-width: 48px; display: flex; justify-content: center; padding: 8px 0; }
:where(.m-rd) .m-board__col--empty .m-board__head { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0; }
:where(.m-rd) .m-board__head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; font-size: var(--m-fs-14); font-weight: var(--m-fw-bold); color: var(--m-text-2); }
:where(.m-rd) .m-board__n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--m-text); }
:where(.m-rd) .m-board__col--empty .m-board__n { margin: 8px 0 0; }
:where(.m-rd) .m-board__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
:where(.m-rd) .m-card2 { position: relative; display: grid; gap: 4px; padding: 10px 12px; background: var(--m-surface); border: 1px solid var(--m-line-strong); border-radius: var(--m-r-md); }
:where(.m-rd) .m-card2--te_toca { border-color: var(--m-text); }
:where(.m-rd) .m-card2--bloqueado { border-color: var(--m-block-line); }
:where(.m-rd) .m-card2__open { font-weight: var(--m-fw-bold); color: var(--m-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-card2__open::after { content: ""; position: absolute; inset: 0; }
:where(.m-rd) .m-card2__open:hover { text-decoration: underline; }
:where(.m-rd) .m-card2__amount { font-size: var(--m-fs-15); font-weight: var(--m-fw-semibold); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-card2__amount--stale { color: var(--m-stale-ink); }
:where(.m-rd) .m-card2__meta { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-14); color: var(--m-text-2); min-width: 0; }
:where(.m-rd) .m-card2__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-card2__why { font-size: var(--m-fs-14); color: var(--m-block-ink); }
:where(.m-rd) .m-card2__act, :where(.m-rd) .m-card2__tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Tablas tipo hoja, paginador, embudo ---------- */
:where(.m-rd) .m-tablewrap { overflow-x: auto; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); contain: paint; } /* paint: lo ancho de la tabla no ensancha la página */
:where(.m-rd) .m-board, :where(.m-rd) .m-weekstrip, :where(.m-rd) .m-tabs { contain: paint; }
:where(.m-rd) .m-tablewrap--sheet { max-height: 70vh; overflow: auto; }
:where(.m-rd) .m-tablewrap--sheet thead th { position: sticky; top: 0; z-index: 2; }
:where(.m-rd) .m-table--sheet { table-layout: auto; min-width: 860px; }
:where(.m-rd) .m-table--sheet td { height: 48px; }
:where(.m-rd) .m-table--index { table-layout: auto; }
:where(.m-rd) .m-table--index caption { text-align: left; padding: var(--m-sp-3) var(--m-sp-4) 0; }
:where(.m-rd) .m-table--index th[scope="row"] a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
:where(.m-rd) .m-th-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: inherit; text-decoration: none; }
:where(.m-rd) .m-th-sort:hover { text-decoration: underline; }
:where(.m-rd) .m-cell-sub--strong { color: var(--m-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; display: block; }
:where(.m-rd) .m-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); padding: var(--m-sp-3) var(--m-sp-4); font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-bottleneck { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--m-sp-3); padding: 10px 14px; border-radius: var(--m-r-md); background: var(--m-stale-bg); color: var(--m-stale-ink); font-size: var(--m-fs-16); }
:where(.m-rd) .m-funnel { list-style: none; margin: 0 0 var(--m-sp-4); padding: var(--m-sp-2); display: grid; gap: 2px; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); }
:where(.m-rd) .m-funnel__row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 96px 104px 86px; gap: var(--m-sp-3); align-items: center; min-height: 36px; padding: 0 6px; border-radius: var(--m-r-sm); color: var(--m-text); text-decoration: none; font-size: var(--m-fs-14); }
:where(.m-rd) .m-funnel__row:hover { background: var(--m-hover); }
:where(.m-rd) .m-funnel__track { height: 12px; border-radius: 3px; background: var(--m-subtle); overflow: hidden; }
:where(.m-rd) .m-funnel__fill { display: block; height: 100%; background: var(--ph-solid); }
:where(.m-rd) .m-funnel__n { font-weight: var(--m-fw-semibold); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-funnel__k { color: var(--m-muted); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-funnel__k--stale { color: var(--m-stale-ink); font-weight: var(--m-fw-semibold); }
@container pagina (max-width: 640px) { :where(.m-rd) .m-funnel__row { grid-template-columns: 120px minmax(0, 1fr) auto; min-height: 44px; } :where(.m-rd) .m-funnel__k { display: none; } :where(.m-rd) .m-funnel__k--stale { display: inline; grid-column: 2 / -1; } }

/* ---------- Panel comercial: tira de la semana, presupuestos por cliente, botón flotante ---------- */
:where(.m-rd) .m-weekstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: var(--m-sp-2) 0 var(--m-sp-3); }
:where(.m-rd) .m-weekstrip__day { display: grid; gap: 0; min-height: 48px; padding: 4px 10px; border: 1px solid var(--m-line); border-radius: var(--m-r-md); background: var(--m-surface); color: var(--m-text); text-decoration: none; }
:where(.m-rd) .m-weekstrip__day.is-today { box-shadow: inset 0 3px 0 var(--m-text); }
:where(.m-rd) .m-weekstrip__day.is-on { border: 2px solid var(--m-text); padding: 5px 9px; }
:where(.m-rd) .m-weekstrip__d { font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-weekstrip__n { font-size: var(--m-fs-14); color: var(--m-muted); white-space: nowrap; }
:where(.m-rd) .m-weekstrip__d { white-space: nowrap; }
:where(.m-rd) .m-presgroups { display: grid; gap: var(--m-sp-2); margin-top: var(--m-sp-3); }
:where(.m-rd) .m-presgroup { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: var(--m-sp-2) var(--m-sp-3); }
:where(.m-rd) .m-presgroup__t { font-size: var(--m-fs-16); font-weight: var(--m-fw-bold); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
:where(.m-rd) .m-preslist { list-style: none; margin: 4px 0 0; padding: 0; }
:where(.m-rd) .m-pres { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px 120px auto; gap: var(--m-sp-2); align-items: center; min-height: 48px; border-top: 1px solid var(--m-line); font-size: var(--m-fs-14); }
:where(.m-rd) .m-pres__eq { color: var(--m-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-pres__total { font-weight: var(--m-fw-semibold); font-variant-numeric: tabular-nums; text-align: right; }
:where(.m-rd) .m-pres__act { display: flex; justify-content: flex-end; }
@container pagina (max-width: 640px) { :where(.m-rd) .m-pres { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref total" "eq eq" "st st" "act act"; padding: 8px 0; } :where(.m-rd) .m-pres__ref { grid-area: ref; font-weight: var(--m-fw-semibold); } :where(.m-rd) .m-pres__total { grid-area: total; } :where(.m-rd) .m-pres__eq { grid-area: eq; } :where(.m-rd) .m-pres__st { grid-area: st; } :where(.m-rd) .m-pres__act { grid-area: act; } :where(.m-rd) .m-pres__act .m-btn { flex: 1; min-height: var(--m-target); } }
:where(.m-rd) .m-inline-field { display: inline-flex; align-items: center; gap: 8px; font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-ui .m-input--inline { width: auto; min-height: 40px; display: inline-block; }
:where(.m-rd) .m-ui .m-input--short { width: 6.5em; min-height: var(--m-target-field); display: inline-block; }
:where(.m-rd) .m-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-2); }
:where(.m-rd) .m-fab { display: none; }
:where(.m-rd) .m-page--com { position: relative; }

/* ---------- Agenda ---------- */
:where(.m-rd) .m-tablewrap--agenda { overflow-x: auto; }
:where(.m-rd) .m-agenda { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 820px; }
:where(.m-rd) .m-agenda th, :where(.m-rd) .m-agenda td { border-bottom: 1px solid var(--m-line); border-left: 1px solid var(--m-line); vertical-align: top; padding: 6px; text-align: left; }
:where(.m-rd) .m-agenda thead th { height: 40px; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); background: var(--m-surface); vertical-align: middle; }
:where(.m-rd) .m-agenda thead th.is-today { box-shadow: inset 0 3px 0 var(--m-text); }
:where(.m-rd) .m-agenda__eq { width: 140px; font-size: var(--m-fs-14); background: var(--m-subtle); }
:where(.m-rd) .m-agenda__cell.is-today { background: var(--m-mine); }
:where(.m-rd) .m-agenda .m-appt { margin: 0 0 6px; height: 104px; overflow: hidden; display: grid; align-content: start; gap: 2px; }
:where(.m-rd) .m-agenda .m-appt .m-status { justify-self: start; min-height: 22px; font-size: var(--m-fs-12); }
:where(.m-rd) .m-appt__note--block { color: var(--m-block-ink); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-agenda__free { display: block; margin: 0 0 6px; padding: 6px 8px; border: 1px dashed var(--m-line-strong); border-radius: var(--m-r-sm); font-size: var(--m-fs-12); color: var(--m-muted); }
:where(.m-rd) .m-agenda__free.is-on { border: 2px solid var(--m-text); color: var(--m-text); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-details--inline > summary { min-height: 40px; }
:where(.m-rd) .m-details--box { border: 1px solid var(--m-line-strong); border-radius: var(--m-r-md); padding: 0 var(--m-sp-3); background: var(--m-surface); }
:where(.m-rd) .m-details--box > .m-details__body { border-left: 0; padding: 0 0 var(--m-sp-3); margin: 0; }
:where(.m-rd) .m-seg--wrap { flex-wrap: wrap; }
@media (max-width: 720px) {
  :where(.m-rd) .m-seg--wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(.m-rd) .m-seg--wrap .m-seg__opt { white-space: normal; text-align: center; line-height: 1.2; padding: 4px 6px; border-radius: 0; margin: 0 0 0 -1px; }
  :where(.m-rd) .m-seg--wrap .m-seg__opt:first-child { border-radius: var(--m-r-md) 0 0 var(--m-r-md); margin-left: 0; }
  :where(.m-rd) .m-seg--wrap .m-seg__opt:last-child { border-radius: 0 var(--m-r-md) var(--m-r-md) 0; }
}
:where(.m-rd) .m-seg__opt--radio { cursor: pointer; }
:where(.m-rd) .m-seg__opt--radio:has(input:checked) { background: var(--m-text); color: var(--m-on-action); border-color: var(--m-text); z-index: 1; }
:where(.m-rd) .m-seg__opt--radio:has(input:focus-visible) { outline: var(--m-focus-width) solid var(--m-focus); outline-offset: var(--m-focus-offset); z-index: 2; }
:where(.m-rd) a.m-seg__opt { text-decoration: none; }
:where(.m-rd) .m-sug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-sp-2); padding: var(--m-sp-3); background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-md); margin-bottom: var(--m-sp-2); }
:where(.m-rd) .m-list--plain { list-style: none; padding: 0; margin: var(--m-sp-3) 0 0; }
:where(.m-rd) .m-stepper { list-style: none; margin: 0 0 var(--m-sp-3); padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--m-fs-14); }
:where(.m-rd) .m-stepper li { padding: 6px 10px; border-radius: var(--m-r-pill); background: var(--m-subtle); color: var(--m-text-2); }
:where(.m-rd) .m-stepper li.is-now { background: var(--m-text); color: var(--m-on-action); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-stepper li.is-done { background: var(--m-done-bg); color: var(--m-done-ink); }
:where(.m-rd) .m-ronda-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-sp-3); padding: var(--m-sp-3) var(--m-sp-4); border-bottom: 1px solid var(--m-line); background: var(--m-surface); }
:where(.m-rd) .m-ronda-cta .m-meta { display: block; }
:where(.m-rd) .m-novedades { display: flex; align-items: center; gap: var(--m-sp-2); margin: var(--m-sp-2) var(--m-sp-6) 0; padding: 6px 10px; border-radius: var(--m-r-md); background: var(--m-subtle); font-size: var(--m-fs-15); }
:where(.m-rd) .m-page-wrap > .m-offline { margin: 0; }
:where(.m-rd) .m-ui .m-btn--ondark { background: transparent; color: var(--m-on-dark); border-color: var(--m-on-dark-line); margin-left: auto; }
:where(.m-rd) .m-ui .m-btn--ondark:hover { background: var(--m-on-dark-hover); color: var(--m-on-dark); border-color: var(--m-on-dark); }
:where(.m-rd) .m-dockbar { position: sticky; bottom: 0; z-index: var(--m-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-3); margin: var(--m-sp-2) calc(-1 * var(--m-sp-4)) 0; padding: var(--m-sp-3) var(--m-sp-4); background: var(--m-surface); border-top: 1px solid var(--m-line-strong); box-shadow: var(--m-shadow-dock); border-radius: 0 0 var(--m-r-lg) var(--m-r-lg); }
:where(.m-rd) .m-dockbar__total { display: grid; margin-right: auto; }
:where(.m-rd) .m-dockbar__total b { font-size: var(--m-fs-20); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-page--form { max-width: 720px; }
:where(.m-rd) .m-page--form .m-form { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: var(--m-sp-4) var(--m-sp-4) 0; }

/* ---------- Técnico ---------- */
:where(.m-rd) .m-tec { min-height: 100vh; background: var(--m-bg); padding-bottom: 80px; }
html.m-rediseno:has(.m-tec) { scroll-padding-bottom: 96px; }
:where(.m-rd) .m-tec .m-mbar .m-icon-btn { margin-left: auto; color: var(--m-on-chrome); }
:where(.m-rd) .m-tec__main { max-width: 640px; margin: 0 auto; padding-bottom: var(--m-sp-8); }
:where(.m-rd) .m-job__go { padding: 0 var(--m-sp-4) var(--m-sp-4); }
:where(.m-rd) .m-dock--tec { position: sticky; bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom)); z-index: 20; padding: var(--m-sp-3) var(--m-sp-4); margin-top: var(--m-sp-3); background: var(--m-surface); border-top: 1px solid var(--m-line); }
:where(.m-rd) .m-tabbar--tec { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; box-shadow: var(--m-shadow-dock); padding-bottom: env(safe-area-inset-bottom); }
:where(.m-rd) .m-tec .m-step { grid-template-columns: 40px minmax(0, 1fr) 0; }
:where(.m-rd) .m-tec .m-crumbs { padding: var(--m-sp-3) var(--m-sp-4) 0; }
:where(.m-rd) .m-choices { display: grid; gap: var(--m-sp-3); }
:where(.m-rd) .m-choices__other { display: grid; gap: var(--m-sp-2); margin-top: var(--m-sp-3); padding-top: var(--m-sp-3); border-top: 1px solid var(--m-line); }

/* ---------- Entrada del prototipo («¿Quién eres?»: no es del producto) ---------- */
:where(.m-rd) .m-inicio { max-width: 880px; margin: 0 auto; padding: var(--m-sp-8) var(--m-sp-4); }
:where(.m-rd) .m-inicio__head { display: flex; gap: var(--m-sp-4); align-items: center; margin-bottom: var(--m-sp-6); }
:where(.m-rd) .m-inicio__head img { border-radius: 50%; }
:where(.m-rd) .m-brand__name--light { color: var(--m-text); font-family: var(--m-font-brand); letter-spacing: .05em; }
:where(.m-rd) .m-brand__name--light b { color: var(--m-brand-ink); font-weight: 400; }
:where(.m-rd) .m-inicio__list { display: grid; gap: var(--m-sp-2); }
:where(.m-rd) .m-inicio__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-sp-3); padding: var(--m-sp-4); background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); }

/* ---------- Esqueletos (carga): nunca «Ninguno» antes de los datos ---------- */
:where(.m-rd) .m-skel { display: block; height: 14px; border-radius: 4px; background: var(--m-skeleton); }
:where(.m-rd) .m-skel-row { display: grid; grid-template-columns: 20px 1.2fr 1fr 1.4fr 120px; gap: 12px; align-items: center; min-height: var(--m-row-h); padding: 0 16px; border-bottom: 1px solid var(--m-line); }
@media (prefers-reduced-motion: no-preference) { :where(.m-rd) .m-skel { animation: m-skel 1.2s ease-in-out infinite alternate; } }
@keyframes m-skel { from { opacity: .55; } to { opacity: 1; } }

/* ---------- Cajón superpuesto (961-1279 px): sin velo, no modal ---------- */
@media (max-width: 1279px) {
  :where(.m-rd) .m-shell--cajon { grid-template-columns: var(--m-sidebar-w) minmax(0, 1fr); }
  :where(.m-rd) .m-shell--cajon > .m-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--m-drawer-w-md), 92vw); height: 100vh; z-index: var(--m-z-drawer); }
}
/* ---------- Móvil (≤ 960 px): barra superior, barra inferior y acción al pulgar ---------- */
@media (max-width: 960px) {
  :where(.m-rd) .m-shell, :where(.m-rd) .m-shell--cajon { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  :where(.m-rd) .m-shell > .m-main { grid-column: 1; grid-row: 2; }
  :where(.m-rd) .m-shell > .m-side { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100vh; transform: translateX(-105%); visibility: hidden; transition: transform var(--m-dur) var(--m-ease), visibility 0s linear var(--m-dur); z-index: 80; box-shadow: var(--m-shadow-pop); }
  :where(.m-rd) .m-shell--menu > .m-side { transform: none; visibility: visible; transition: transform var(--m-dur) var(--m-ease); }
  :where(.m-rd) .m-shell--menu::after { content: ""; position: fixed; inset: 0; background: var(--m-scrim); z-index: 70; }
  :where(.m-rd) .m-shell > .m-appbar { display: flex; grid-row: 1; grid-column: 1; position: sticky; top: 0; z-index: 25; align-items: center; gap: 4px; height: var(--m-appbar-h); padding: 0 4px; background: var(--m-chrome); color: var(--m-on-dark); --m-ring: var(--m-focus-on-dark); }
  :where(.m-rd) .m-appbar .m-icon-btn { color: var(--m-on-chrome); }
  :where(.m-rd) .m-appbar .m-icon-btn:hover { background: var(--m-chrome-2); color: var(--m-on-dark); }
  :where(.m-rd) .m-appbar__title { flex: 1; min-width: 0; font-weight: var(--m-fw-bold); font-size: var(--m-fs-18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(.m-rd) .m-shell--tecnico > .m-appbar, :where(.m-rd) .m-shell--sin-barra > .m-appbar { display: none; }
  :where(.m-rd) .m-shell > .m-tabbar--fixed:not([hidden]) { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: var(--m-tabbar-h); grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); box-shadow: var(--m-shadow-dock); padding-bottom: env(safe-area-inset-bottom); }
  :where(.m-rd) .m-shell:not(.m-shell--tecnico):not(.m-shell--sin-barra) { padding-bottom: var(--m-tabbar-h); }
  :where(.m-rd) .m-tabbar__item { min-height: var(--m-tabbar-h); font-size: var(--m-fs-12); gap: 0; cursor: pointer; }
  :where(.m-rd) .m-tabbar__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--m-text); color: var(--m-on-action); font-size: 11px; font-weight: var(--m-fw-bold); }
  :where(.m-rd) .m-pagehead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; min-height: 0; border: 0; }
  :where(.m-rd) .m-pagehead__tools, :where(.m-rd) .m-pagehead__sub { display: none; } /* en el móvil, «Actualizar» y «?» van en la barra superior */
  html.m-rediseno { scroll-padding-bottom: 150px; }
  :where(.m-rd) .m-page { padding: var(--m-sp-3) var(--m-sp-4) var(--m-sp-8); }
  :where(.m-rd) .m-hide-movil { display: none !important; }
  :where(.m-rd) .m-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: calc(var(--m-tabbar-h) + 16px); z-index: 24; min-height: var(--m-fab); padding: 0 20px 0 16px; border-radius: 16px; background: var(--m-action); color: var(--m-on-action); text-decoration: none; font-weight: var(--m-fw-semibold); box-shadow: var(--m-shadow-pop); }
  :where(.m-rd) .m-weekstrip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; margin-top: 0; }
  :where(.m-rd) .m-summary { margin-bottom: 0; }
  :where(.m-rd) .m-tabs { margin-bottom: var(--m-sp-2); }
  /* 721-960 px: el cajón se superpone a la derecha, sin velo (no modal); la lista sigue a la vista */
  :where(.m-rd) .m-shell--cajon > .m-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(var(--m-drawer-w-md), 92vw); height: 100dvh; z-index: 60; }
  :where(.m-rd) .m-drawer__bar [data-testid="cajon-anterior"], :where(.m-rd) .m-drawer__bar [data-testid="cajon-siguiente-exp"] { display: none; }
  :where(.m-rd) .m-dockbar { position: fixed; left: 0; right: 0; bottom: var(--m-tabbar-h); margin: 0; z-index: 24; border-radius: 0; }
  :where(.m-rd) .m-page--form { padding-bottom: 180px; }
  :where(.m-rd) .m-novedades { margin: var(--m-sp-2) var(--m-sp-4) 0; }
  :where(.m-rd) .m-page--ficha { margin: var(--m-sp-2); }
}
/* ≤ 720 px: el cajón es una página entera; la acción, fija abajo (al alcance del pulgar) */
:where(.m-rd) .m-contact-movil { display: none; }
:where(.m-rd) .m-row__cita { flex: none; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-row__cita--late { color: var(--m-block-ink); }
:where(.m-rd) .m-pager--group { border-top: 1px solid var(--m-line); }
@media (max-width: 720px) {
  :where(.m-rd) .m-shell--cajon > .m-drawer { inset: 0; width: 100vw; }
  :where(.m-rd) .m-drawer__back { display: inline-flex !important; }
  :where(.m-rd) .m-drawer__bar .m-contact, :where(.m-rd) .m-drawer__bar [data-testid="cajon-anterior"], :where(.m-rd) .m-drawer__bar [data-testid="cajon-siguiente-exp"] { display: none; }
  :where(.m-rd) .m-contact-movil { display: block; margin-top: var(--m-sp-2); }
  :where(.m-rd) .m-contact-movil .m-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
  :where(.m-rd) .m-ui .m-contact-movil .m-btn { min-height: var(--m-target); justify-content: center; border: 1px solid var(--m-line-strong); text-decoration: none; }
  :where(.m-rd) .m-summary, :where(.m-rd) .m-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :where(.m-rd) .m-page { overflow-x: clip; } /* nada de desplazamiento horizontal de la página: tablas y tiras se desplazan dentro de su caja */
  :where(.m-rd) .m-tablewrap { max-width: 100%; }
  :where(.m-rd) .m-page > .m-summary, :where(.m-rd) .m-page > .m-chips { margin-left: calc(-1 * var(--m-sp-4)); margin-right: calc(-1 * var(--m-sp-4)); padding: 0 var(--m-sp-4); }
  :where(.m-rd) .m-group > .m-chips { padding: var(--m-sp-2) var(--m-sp-3) 0; }
  :where(.m-rd) .m-summary::-webkit-scrollbar, :where(.m-rd) .m-chips::-webkit-scrollbar { display: none; }
  :where(.m-rd) .m-summary__item, :where(.m-rd) .m-chip { flex: none; }
  :where(.m-rd) .m-summary__sep { display: none; }
  :where(.m-rd) .m-drawer__next { position: static; box-shadow: none; }
  :where(.m-rd) .m-drawer__actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0; padding: 10px var(--m-sp-4) calc(10px + env(safe-area-inset-bottom)); background: var(--m-surface); border-top: 1px solid var(--m-line-strong); box-shadow: var(--m-shadow-dock); }
  :where(.m-rd) .m-drawer__actions > .m-btn--primary, :where(.m-rd) .m-drawer__actions > .m-btn--secondary { flex: 1 1 100%; min-height: var(--m-target-field); }
  :where(.m-rd) .m-contact { margin-left: 0; width: 100%; justify-content: space-between; }
  :where(.m-rd) .m-ui .m-drawer__body { padding-bottom: 200px; }
  :where(.m-rd) .m-split2 { grid-template-columns: minmax(0, 1fr); }
  :where(.m-rd) .m-dialog__actions .m-btn { width: 100%; }
  :where(.m-rd) .m-pres { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (forced-colors: active) {
  :where(.m-rd) .m-row__ic .m-sti, :where(.m-rd) .m-tag, :where(.m-rd) .m-chip, :where(.m-rd) .m-card2, :where(.m-rd) .m-todo, :where(.m-rd) .m-board__col { border: 1px solid CanvasText; }
  :where(.m-rd) .m-bar__fill, :where(.m-rd) .m-funnel__fill { forced-color-adjust: none; background: Highlight; }
}

/* Móvil: ningún objetivo por debajo de 44 px (Apple HIG; O7). La fila compacta de 32 px es solo de escritorio. */
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-btn:not(.m-btn--hero):not(.m-btn--field), :where(.m-rd) .m-ui .m-btn--row, :where(.m-rd) .m-ui .m-btn--compact { min-height: var(--m-target) !important; }
  :where(.m-rd) .m-ui .m-icon-btn { min-width: var(--m-target) !important; min-height: var(--m-target) !important; width: var(--m-target) !important; height: var(--m-target) !important; }
  :where(.m-rd) .m-ui .m-input, :where(.m-rd) .m-ui .m-input--inline { min-height: var(--m-target); }
  :where(.m-rd) .m-check2 { min-height: var(--m-target); }
  :where(.m-rd) .m-bar, :where(.m-rd) .m-money, :where(.m-rd) .m-th-sort, :where(.m-rd) .m-funnel__row { min-height: var(--m-target) !important; }
  :where(.m-rd) .m-row__checkwrap { width: var(--m-target); height: var(--m-target); }
  :where(.m-rd) .m-ui .m-row:has(.m-row__check), :where(.m-rd) .m-listwrap--razon .m-row { grid-template-columns: 44px 20px minmax(0, 1fr) auto !important; }
}

/* =====================================================================
   RONDA 2 · 22/10/2026 (arreglos tras las pruebas de la ronda 1)
   Sin colores nuevos. Va al final para ganar a lo anterior sin tocarlo.
   ===================================================================== */
/* ---------- Fila compacta de dos líneas (44 px): nada de fecha, hora, plazo ni estado recortados ---------- */
:where(.m-rd) .m-ui .m-row { grid-template-columns: 20px minmax(170px, 1.35fr) minmax(150px, .95fr) minmax(150px, 1.15fr) auto auto;
  grid-template-areas: "ic who state next due act"; column-gap: var(--m-sp-3); align-items: center; min-height: var(--m-row-h); padding: 2px var(--m-sp-3) 2px var(--m-sp-4); }
:where(.m-rd) .m-ui .m-row:has(.m-row__check) { grid-template-columns: 24px 20px minmax(170px, 1.35fr) minmax(150px, .95fr) minmax(150px, 1.15fr) auto auto; grid-template-areas: "chk ic who state next due act"; }
:where(.m-rd) .m-ui .m-row.m-row--con-cita { grid-template-columns: 20px minmax(160px, 1.3fr) auto minmax(140px, .9fr) minmax(150px, 1.1fr) auto auto; grid-template-areas: "ic who cita state next due act"; }
:where(.m-rd) .m-ui .m-row.m-row--con-importe { grid-template-columns: 20px minmax(160px, 1.3fr) minmax(140px, .9fr) minmax(150px, 1.1fr) auto auto auto; grid-template-areas: "ic who state next amount due act"; }
:where(.m-rd) .m-row__who { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0; min-width: 0; overflow: hidden; }
:where(.m-rd) .m-ui .m-row__who .m-row__open { display: block; flex: none; min-width: 0; max-width: 100%; min-height: 24px; line-height: 24px; }
:where(.m-rd) .m-row__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
:where(.m-rd) .m-row__open--lote { display: block; line-height: 24px; }
:where(.m-rd) .m-row__sub { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.15; }
:where(.m-rd) .m-row__sub .m-row__place { flex: 0 1 auto; min-width: 2ch; }
:where(.m-rd) .m-tags { display: inline-flex; flex: none; align-items: center; gap: 4px; max-width: 100%; }
:where(.m-rd) .m-ui .m-tags .m-tag, :where(.m-rd) .m-ui .m-row__who .m-tag { position: relative; z-index: 2; flex: none; max-width: none; overflow: visible; min-width: 0; }
:where(.m-rd) .m-row__cita { grid-area: cita; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); color: var(--m-text); min-width: 6.5em; }
:where(.m-rd) .m-row__cita-h { font-weight: var(--m-fw-medium); color: var(--m-text-2); }
:where(.m-rd) .m-row__state { flex-direction: row; }
:where(.m-rd) .m-row__state .m-phase { flex: none; }
:where(.m-rd) .m-row__next { font-size: var(--m-fs-14); line-height: 1.2; }
:where(.m-rd) .m-row__txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; overflow-wrap: break-word; color: var(--m-text-2); }
:where(.m-rd) .m-row__verb.m-row__txt { color: var(--m-text); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-row__why { color: var(--m-block-ink); font-weight: var(--m-fw-medium); }
:where(.m-rd) .m-row__why .m-i { vertical-align: -2px; margin-right: 4px; color: var(--m-block-ink); }
:where(.m-rd) .m-row__done .m-row__txt { color: var(--m-done-ink); }
:where(.m-rd) .m-row__amount { grid-area: amount; white-space: nowrap; text-align: right; font-weight: var(--m-fw-semibold); font-variant-numeric: tabular-nums; }
:where(.m-rd) .m-row__due { white-space: nowrap; }
:where(.m-rd) .m-row__act { flex-wrap: nowrap; }
:where(.m-rd) .m-ui .m-btn--undo { padding: 0 var(--m-sp-2); gap: 4px; }
:where(.m-rd) .m-row--done .m-row__name { color: var(--m-muted); }
:where(.m-rd) .m-chip--cero { color: var(--m-muted); background: transparent; border-style: dashed; }
:where(.m-rd) .m-chip--cero b { color: var(--m-muted); }
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-row { grid-template-columns: 20px minmax(0, 1.2fr) minmax(0, 1fr) auto auto; grid-template-areas: "ic who who due act" "ic state next next act" "ic marks marks marks act"; padding-top: 8px; padding-bottom: 8px; }
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-row:not(:has(.m-row__marks)) { grid-template-areas: "ic who who due act" "ic state next next act"; }
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-row.m-row--con-cita { grid-template-columns: 20px minmax(0, 1.2fr) auto minmax(0, 1fr) auto auto; grid-template-areas: "ic who cita who due act" "ic state state next due act"; }
/* Columnas por prioridad: si la lista se estrecha, primero se oculta el paso (el chip queda), luego la población */
@container pagina (max-width: 1100px) { :where(.m-rd) .m-ui .m-row .m-row__paso { display: none; } :where(.m-rd) .m-ui .m-row { grid-template-columns: 20px minmax(150px, 1.3fr) auto minmax(140px, 1.2fr) auto auto; } :where(.m-rd) .m-ui .m-row.m-row--con-cita { grid-template-columns: 20px minmax(150px, 1.3fr) auto auto minmax(140px, 1.1fr) auto auto; } :where(.m-rd) .m-ui .m-row.m-row--con-importe { grid-template-columns: 20px minmax(150px, 1.3fr) auto minmax(140px, 1.1fr) auto auto auto; } :where(.m-rd) .m-ui .m-row:has(.m-row__check) { grid-template-columns: 24px 20px minmax(150px, 1.3fr) auto minmax(140px, 1.2fr) auto auto; } }
/* Modo índice (lista estrecha con el cajón al lado): nombre y plazo; fase, paso y la cita debajo */
@container pagina (max-width: 760px) {
  :where(.m-rd) .m-ui .m-row, :where(.m-rd) .m-ui .m-row.m-row--con-cita, :where(.m-rd) .m-ui .m-row.m-row--con-importe, :where(.m-rd) .m-ui[data-densidad="comoda"] .m-row, :where(.m-rd) .m-ui[data-densidad="comoda"] .m-row:not(:has(.m-row__marks)) { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "ic who due" "ic state cita"; row-gap: 0; padding-top: 4px; padding-bottom: 4px; }
  :where(.m-rd) .m-ui .m-row:has(.m-row__check) { grid-template-columns: 24px 20px minmax(0, 1fr) auto; grid-template-areas: "chk ic who due" "chk ic state cita"; }
  :where(.m-rd) .m-ui .m-row .m-row__paso { display: inline; }
  :where(.m-rd) .m-row__sub { display: none; }
  :where(.m-rd) .m-row__cita { flex-direction: row; gap: 6px; justify-self: end; min-width: 0; }
  :where(.m-rd) .m-row__amount { display: none; }
}
@container pagina (max-width: 760px) {
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-ui .m-row, :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row { grid-template-areas: "ic who due" "ic state cita" "ic next next" "ic marks marks" "ic act act"; }
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row .m-row__sub { display: flex; }
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row__amount { display: block; grid-area: cita; }
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-ui .m-row:has(.m-row__check), :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row:has(.m-row__check) { grid-template-areas: "chk ic who due" "chk ic state state" "chk ic next next" "chk ic act act"; }
}
@container pagina (max-width: 520px) {
  :where(.m-rd) .m-shell:not(.m-shell--cajon) .m-row { row-gap: 4px; padding: 8px var(--m-sp-3) 10px; }
  :where(.m-rd) .m-ui .m-row__who .m-row__open { min-height: var(--m-target); display: flex; align-items: center; line-height: 1.25; }
  :where(.m-rd) .m-row__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }
  :where(.m-rd) .m-row__sub { flex-wrap: wrap; row-gap: 2px; }
  :where(.m-rd) .m-row__due { white-space: normal; max-width: 9.5em; text-align: right; }
  :where(.m-rd) .m-ui .m-row .m-due { white-space: normal; }
}

/* ---------- Cajón: cabecera fija que no se desplaza nunca (tampoco al elegir un archivo) ---------- */
:where(.m-rd) .m-shell--cajon > .m-drawer { overflow: clip; }
:where(.m-rd) .m-ui .m-drawer__inner { overflow: clip; }
:where(.m-rd) .m-drawer__fixed { flex: none; background: var(--m-surface); border-bottom: 1px solid var(--m-line); box-shadow: 0 6px 12px -10px rgba(17, 21, 18, .25); z-index: 3; }
:where(.m-rd) .m-ui .m-drawer__scroll { scroll-padding-top: 8px; scroll-padding-bottom: var(--m-aviso-h, 0px); }
:where(.m-rd) .m-ui .m-drawer__head { padding: var(--m-sp-2) var(--m-sp-5) 0; }
:where(.m-rd) .m-ui .m-drawer__name { font-size: var(--m-fs-20); -webkit-line-clamp: 1; unicode-bidi: isolate; }
:where(.m-rd) .m-ui .m-drawer__fase { margin-top: 4px; gap: var(--m-sp-2); }
:where(.m-rd) .m-ui .m-drawer__paso { margin-top: 2px; line-height: 1.35; }
:where(.m-rd) .m-ui .m-drawer__paso .m-btn { vertical-align: middle; min-height: 28px; margin-left: 4px; }
:where(.m-rd) .m-ui .m-drawer__next { position: static; margin-top: var(--m-sp-2); padding: 6px var(--m-sp-5) var(--m-sp-3); border-bottom: 0; box-shadow: none; }
:where(.m-rd) .m-ui .m-drawer__body { padding-top: var(--m-sp-3); }
:where(.m-rd) .m-ui .m-drawer__body > .m-drawer__refs { margin: 0 0 var(--m-sp-2); }
:where(.m-rd) .m-drawer__tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--m-sp-2); }
:where(.m-rd) .m-drawer__tags .m-tag { white-space: normal; max-width: 100%; text-align: left; }
:where(.m-rd) .m-ui .m-drawer__risk { margin: 0 0 var(--m-sp-3); }
:where(.m-rd) .m-drawer__bartitle { font-weight: var(--m-fw-semibold); color: var(--m-text); padding-left: var(--m-sp-2); }
:where(.m-rd) .m-drawer__inner--grande .m-drawer__fixed { box-shadow: none; }
:where(.m-rd) .m-nextup { display: grid; gap: 4px; align-items: stretch; }
:where(.m-rd) .m-nextup p { display: flex; align-items: center; gap: var(--m-sp-2); flex-wrap: wrap; }
:where(.m-rd) .m-nextup p > span { flex: 1 1 12rem; min-width: 0; }
:where(.m-rd) .m-nextup .m-btn { margin-left: 0; }
/* «Lo que falta»: filas de alto fijo (marcar no las hace crecer) y lo hecho al abrir, plegado en una línea */
:where(.m-rd) .m-ui .m-todo__row { min-height: 52px; padding: 5px 10px; }
:where(.m-rd) .m-ui .m-todo__t, :where(.m-rd) .m-ui .m-todo__d { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-todo__act { flex-wrap: nowrap; align-items: center; }
:where(.m-rd) .m-todo__who { font-size: var(--m-fs-14); color: var(--m-muted); white-space: nowrap; }
:where(.m-rd) .m-todo__row:has(details[open]) { align-items: start; }
:where(.m-rd) .m-todo__row--plegadas { display: block; min-height: 0 !important; padding: 0 !important; }
:where(.m-rd) .m-todo__fold > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; cursor: pointer; list-style: none; font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-todo__fold > summary::-webkit-details-marker { display: none; }
:where(.m-rd) .m-todo__fold > summary > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-todo--inner { border: 0; border-top: 1px solid var(--m-line); border-radius: 0; }
:where(.m-rd) .m-docprev { display: inline-block; }
:where(.m-rd) .m-docprev > summary { display: inline-flex; align-items: center; gap: 4px; min-height: var(--m-target-dense); padding: 0 6px; cursor: pointer; list-style: none; font-size: var(--m-fs-14); }
:where(.m-rd) .m-docprev > summary::-webkit-details-marker { display: none; }
:where(.m-rd) .m-docprev[open] { display: block; width: 100%; }
:where(.m-rd) .m-preview--doc { margin-top: 6px; }
:where(.m-rd) .m-preview__card { display: grid; gap: 8px; margin: 10px auto; padding: 14px 16px; width: min(280px, 90%); min-height: 120px; border-radius: 10px; background: var(--m-surface); box-shadow: var(--m-shadow-2), inset 0 0 0 1px var(--m-line-strong); }
:where(.m-rd) .m-preview--doc .m-meta { padding: 0 10px 8px; }
:where(.m-rd) .m-falta__send { display: grid; gap: 4px; margin: 0 0 var(--m-sp-2); justify-items: start; }
:where(.m-rd) .m-msgprev > summary { display: inline-flex; align-items: center; min-height: var(--m-target-dense); cursor: pointer; list-style: none; font-size: var(--m-fs-14); }
:where(.m-rd) .m-msgprev > summary::-webkit-details-marker { display: none; }
:where(.m-rd) .m-msgprev .m-msg { margin-top: 4px; }
:where(.m-rd) .m-plainlist--docs li { min-height: 36px; }
:where(.m-rd) .m-activity__nota { grid-column: 1 / -1; font-size: var(--m-fs-14); color: var(--m-muted); }
/* Formularios en el cajón: una sola columna (ronda 1: la rectificativa se salía 59 px y el 409 ponía una palabra por línea) */
:where(.m-rd) .m-drawer__inner:not(.m-drawer__inner--grande) .m-split2 { grid-template-columns: minmax(0, 1fr); }
:where(.m-rd) .m-form--cajon { min-width: 0; }
:where(.m-rd) .m-form--cajon > *, :where(.m-rd) .m-form--cajon .m-form__row > * { min-width: 0; }
:where(.m-rd) .m-ui .m-file__txt { min-width: 0; }
:where(.m-rd) .m-conflict { min-width: 0; }
:where(.m-rd) .m-conflict p > span { min-width: 0; }
/* El formulario del cobro, en la cabecera fija (su botón siempre a la vista) */
:where(.m-rd) .m-quick--cobro { margin-top: var(--m-sp-2); padding: var(--m-sp-2) var(--m-sp-3); }
:where(.m-rd) .m-quick--cobro .m-form__note { font-size: var(--m-fs-14); }
/* Ronda: filas de dos líneas (nombre, día y hora arriba; botones abajo) */
:where(.m-rd) .m-ronda { list-style: none; margin: 0; padding: 0; border: 1px solid var(--m-line); border-radius: var(--m-r-md); }
:where(.m-rd) .m-ronda__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ic t when" "ic d d" "ic act act"; column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--m-line); }
:where(.m-rd) .m-ronda__row:last-child { border-bottom: 0; }
:where(.m-rd) .m-ronda__row .m-todo__ic { grid-area: ic; align-self: start; margin-top: 2px; }
:where(.m-rd) .m-ronda__t { grid-area: t; display: flex; justify-content: space-between; gap: 8px; min-width: 0; grid-column: 2 / -1; }
:where(.m-rd) .m-ronda__name { font-weight: var(--m-fw-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
:where(.m-rd) .m-ronda__when { flex: none; font-weight: var(--m-fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.m-rd) .m-ronda__d { grid-area: d; font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-ronda__act { grid-area: act; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
:where(.m-rd) .m-ronda__row--hecho .m-ronda__name { color: var(--m-text-2); }

/* ---------- Tablas tipo hoja: caben (anchos fijos), el nombre se recorta con su texto completo ---------- */
:where(.m-rd) .m-ui .m-table--sheet { table-layout: fixed; width: 100%; min-width: 0; }
:where(.m-rd) .m-table--sheet col.m-col-cliente { width: 26%; } :where(.m-rd) .m-table--sheet col.m-col-fase { width: 128px; } :where(.m-rd) .m-table--sheet col.m-col-paso { width: 56px; }
:where(.m-rd) .m-table--sheet col.m-col-quien { width: 112px; } :where(.m-rd) .m-table--sheet col.m-col-dias { width: 64px; } :where(.m-rd) .m-table--sheet col.m-col-importe { width: 96px; } :where(.m-rd) .m-table--sheet col.m-col-acc { width: 52px; }
:where(.m-rd) .m-ui .m-table--sheet td { height: 58px; overflow: hidden; }
:where(.m-rd) .m-table--sheet .m-col-cliente .m-tags { margin-top: 2px; }
:where(.m-rd) .m-ui .m-cell-name { min-height: 24px; line-height: 24px; unicode-bidi: isolate; }
:where(.m-rd) .m-cell-2l { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; font-size: var(--m-fs-14); color: var(--m-text-2); line-height: 1.25; }
:where(.m-rd) .m-ui .m-cell-sub--strong { max-width: 100%; }
:where(.m-rd) .m-tr { position: relative; cursor: pointer; }
:where(.m-rd) .m-tablewrap--sheet { max-height: none; }
:where(.m-rd) .m-tablewrap, :where(.m-rd) .m-board { background-image: linear-gradient(to right, var(--m-surface), var(--m-surface)), linear-gradient(to right, var(--m-surface), var(--m-surface)), linear-gradient(to right, rgba(17, 21, 18, .14), transparent), linear-gradient(to left, rgba(17, 21, 18, .14), transparent);
  background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; }
:where(.m-rd) .m-board { background-color: transparent; }
@container pagina (max-width: 860px) {
  :where(.m-rd) .m-ui .m-table--sheet, :where(.m-rd) .m-table--sheet tbody, :where(.m-rd) .m-table--sheet tr, :where(.m-rd) .m-table--sheet td { display: block; width: 100%; height: auto; }
  :where(.m-rd) .m-table--sheet thead, :where(.m-rd) .m-table--sheet colgroup { display: none; }
  :where(.m-rd) .m-table--sheet tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cli dias" "fase fase" "sig sig"; gap: 2px 8px; padding: 8px var(--m-sp-4); border-bottom: 1px solid var(--m-line); }
  :where(.m-rd) .m-ui .m-table--sheet td { padding: 0; border: 0; overflow: visible; }
  :where(.m-rd) .m-table--sheet td.m-col-cliente { grid-area: cli; min-width: 0; } :where(.m-rd) .m-table--sheet td.m-col-dias { grid-area: dias; text-align: right; }
  :where(.m-rd) .m-table--sheet td.m-col-fase { grid-area: fase; display: flex; gap: 8px; align-items: center; }
  :where(.m-rd) .m-table--sheet td.m-col-sig { grid-area: sig; }
  :where(.m-rd) .m-table--sheet td.m-col-paso, :where(.m-rd) .m-table--sheet td.m-col-quien, :where(.m-rd) .m-table--sheet td.m-col-importe, :where(.m-rd) .m-table--sheet td.m-col-acc { display: none; }
  :where(.m-rd) .m-table--sheet td.m-col-dias::before { content: "Días: "; color: var(--m-muted); font-size: var(--m-fs-14); }
}

/* ---------- Dirección: los tres bloques en la primera pantalla también en el móvil ---------- */
:where(.m-rd) .m-dash__title > span:first-child { min-width: 0; }
:where(.m-rd) .m-dash__total { font-size: var(--m-fs-24); font-weight: var(--m-fw-bold); letter-spacing: -.01em; color: var(--m-text); text-transform: none; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 4px; }
:where(.m-rd) .m-dash__rev { display: inline-flex; align-items: center; min-height: var(--m-target-dense); margin-top: 4px; font-size: var(--m-fs-14); color: var(--m-warn-ink); font-weight: var(--m-fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
:where(.m-rd) .m-ui .m-decide__txt .m-link { display: inline-flex; align-items: center; min-height: 24px; }
@container pagina (max-width: 560px) {
  :where(.m-rd) .m-dash { gap: 6px; }
  :where(.m-rd) .m-dash__block { padding: 6px var(--m-sp-3) 8px; }
  :where(.m-rd) .m-dash__title { font-size: var(--m-fs-12); }
  :where(.m-rd) .m-dash__title b, :where(.m-rd) .m-dash__total { font-size: var(--m-fs-20); }
  :where(.m-rd) .m-bars, :where(.m-rd) .m-moneys { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
  :where(.m-rd) .m-ui .m-bar { grid-template-columns: auto minmax(0, 1fr) auto; min-height: var(--m-target) !important; gap: 6px; padding: 0 4px; }
  :where(.m-rd) .m-bar__track { height: 6px; }
  :where(.m-rd) .m-ui .m-money { flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; min-height: var(--m-target) !important; padding: 2px 4px; font-size: var(--m-fs-14); line-height: 1.2; }
  :where(.m-rd) .m-moneys--aparte { grid-template-columns: minmax(0, 1fr); margin-top: 4px; padding-top: 4px; }
  :where(.m-rd) .m-moneys--aparte .m-money { flex-direction: row; align-items: center; justify-content: space-between; }
  :where(.m-rd) .m-dash__risk { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  :where(.m-rd) .m-dash__rev { min-height: var(--m-target); margin-top: 0; }
  :where(.m-rd) .m-decide__row { min-height: var(--m-target); padding: 2px 0; }
  :where(.m-rd) .m-ui .m-decide__txt .m-link { min-height: var(--m-target); }
}
/* ---------- Embudo: «23 en curso · 8 atascados · 4 hechos» en la misma línea de su fase ---------- */
:where(.m-rd) .m-ui .m-funnel__row { grid-template-columns: 140px minmax(0, 1fr) auto; }
:where(.m-rd) .m-funnel__nums { display: flex; gap: var(--m-sp-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@container pagina (max-width: 640px) {
  :where(.m-rd) .m-ui .m-funnel__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chip nums" "track track"; row-gap: 4px; padding: 6px 4px; min-height: var(--m-target); border-bottom: 1px solid var(--m-line); }
  :where(.m-rd) .m-funnel__row .m-phase { grid-area: chip; } :where(.m-rd) .m-funnel__nums { grid-area: nums; justify-self: end; gap: 8px; } :where(.m-rd) .m-funnel__track { grid-area: track; height: 8px; }
  :where(.m-rd) .m-ui .m-funnel__k { display: inline; }
}
/* ---------- Tableros: cada tarjeta dentro de su columna ---------- */
:where(.m-rd) .m-ui .m-board__col { min-width: 210px; overflow: hidden; }
:where(.m-rd) .m-board__cards { min-width: 0; }
:where(.m-rd) .m-ui .m-card2 { min-width: 0; }
:where(.m-rd) .m-ui .m-card2__open { min-height: 24px; line-height: 24px; unicode-bidi: isolate; }
:where(.m-rd) .m-card2__meta, :where(.m-rd) .m-card2__why, :where(.m-rd) .m-card2__due { min-width: 0; }
:where(.m-rd) .m-ui .m-card2__why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.m-rd) .m-card2--hecho { background: var(--m-bg); }
:where(.m-rd) .m-card2--hecho .m-card2__open { color: var(--m-muted); }
:where(.m-rd) .m-tab--etapa .m-tab__mine { font-size: var(--m-fs-12); color: var(--m-text-2); }
:where(.m-rd) .m-ui .m-seg__opt[aria-current="page"] { background: var(--m-text); color: var(--m-on-action); border-color: var(--m-text); z-index: 1; }
/* ---------- Grupos: el subtítulo que forma parte del número se ve siempre (ronda 1: «2» con 3 filas en el móvil) ---------- */
:where(.m-rd) .m-group__sub { font-size: var(--m-fs-14); font-weight: var(--m-fw-regular); letter-spacing: 0; text-transform: none; color: var(--m-text-2); }
:where(.m-rd) .m-plainlist--pad, :where(.m-rd) .m-plain--pad { padding: var(--m-sp-3) var(--m-sp-4); margin: 0; }
:where(.m-rd) .m-presgroup__hecho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--m-fs-14); color: var(--m-done-ink); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-ui .m-presgroup__t .m-link { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- Avisos: no tapan el cajón ni la barra inferior (WCAG 2.4.11) y ocupan 1-2 líneas ---------- */
:where(.m-rd) .m-ui .m-toast__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1280px) {
  html.m-rediseno.m-con-cajon .m-ui.m-toasts { left: calc(var(--m-sidebar-w) + (100vw - var(--m-sidebar-w) - var(--m-drawer-w-md)) / 2); max-width: calc(100vw - var(--m-sidebar-w) - var(--m-drawer-w-md) - 32px); }
}
@media (min-width: 1440px) {
  html.m-rediseno.m-con-cajon .m-ui.m-toasts { left: calc(var(--m-sidebar-w) + (100vw - var(--m-sidebar-w) - var(--m-drawer-w)) / 2); max-width: calc(100vw - var(--m-sidebar-w) - var(--m-drawer-w) - 32px); }
}
@media (min-width: 961px) and (max-width: 1279px) {
  html.m-rediseno.m-con-cajon .m-ui.m-toasts { left: calc(var(--m-sidebar-w) + 16px); transform: none; max-width: calc(100vw - var(--m-sidebar-w) - min(var(--m-drawer-w-md), 92vw) - 32px); }
}
@media (max-width: 960px) {
  :where(.m-rd) .m-ui.m-toasts { left: 8px; right: 8px; transform: none; width: auto; max-width: none; bottom: calc(var(--m-tabbar-h) + 8px + env(safe-area-inset-bottom, 0px)); }
  :where(.m-rd) .m-ui.m-toasts .m-toast { width: 100%; }
  html.m-rediseno:has(.m-shell--tecnico) .m-ui.m-toasts { bottom: calc(var(--m-tabbar-h) + 8px); }
  html.m-rediseno:has(.m-shell--sin-barra:not(.m-shell--tecnico)) .m-ui.m-toasts { bottom: 16px; }
}
@media (max-width: 720px) {
  html.m-rediseno.m-con-cajon .m-ui.m-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  html.m-rediseno:has(.m-dockbar) .m-ui.m-toasts { bottom: calc(var(--m-tabbar-h) + 84px); }
}
html.m-rediseno { scroll-padding-bottom: var(--m-aviso-h, 0px); }

/* ---------- Cabecera de la página con el cajón abierto: el título no se corta ---------- */
:where(.m-rd) .m-page-wrap { container-type: inline-size; container-name: contenido; }
@container contenido (max-width: 760px) {
  :where(.m-rd) .m-pagehead__sub, :where(.m-rd) .m-pagehead__upd { display: none; }
  :where(.m-rd) .m-pagehead__refresh > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :where(.m-rd) .m-ui .m-pagehead { padding-left: var(--m-sp-4); padding-right: var(--m-sp-3); }
}

/* ---------- Móvil: menú lateral que se cierra, objetivos de 44 px, nada tapado por el botón flotante ---------- */
:where(.m-rd) .m-side__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:where(.m-rd) .m-side__top .m-brand { margin-bottom: var(--m-sp-3); }
:where(.m-rd) .m-side__close { display: none !important; }
@media (max-width: 960px) {
  :where(.m-rd) .m-shell--menu .m-side__close { display: inline-grid !important; color: var(--m-on-chrome); margin-bottom: var(--m-sp-3); }
  :where(.m-rd) .m-search .m-kbd { display: none; }
  :where(.m-rd) .m-page--fab { padding-bottom: calc(var(--m-fab) + 40px) !important; }
  :where(.m-rd) .m-ui .m-tab--etapa { min-height: 48px; padding: 4px 10px; }
}
@media (pointer: coarse) { :where(.m-rd) .m-search .m-kbd { display: none; } }
@media (max-width: 720px) {
  :where(.m-rd) .m-shell--cajon > .m-tabbar--fixed { display: none !important; }
  :where(.m-rd) .m-shell--cajon:not(.m-shell--tecnico):not(.m-shell--sin-barra) { padding-bottom: 0; }
  :where(.m-rd) .m-ui .m-drawer__inner { overflow-y: auto; overscroll-behavior: contain; }
  :where(.m-rd) .m-drawer__fixed { display: contents; }
  :where(.m-rd) .m-ui .m-drawer__bar { position: sticky; top: 0; z-index: 6; }
  :where(.m-rd) .m-ui .m-drawer__scroll { overflow: visible; flex: none; }
  :where(.m-rd) .m-ui .m-drawer__name { -webkit-line-clamp: 2; }
  :where(.m-rd) .m-ui .m-group__title { min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-details--inline > summary { min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-table--index th[scope="row"] a, :where(.m-rd) .m-ui .m-link--fila { min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-cell-name { min-height: var(--m-target); display: flex; align-items: center; line-height: 1.25; white-space: normal; }
  :where(.m-rd) .m-ui .m-card2__open { min-height: var(--m-target); display: flex; align-items: center; }
  :where(.m-rd) .m-ui .m-presgroup__t .m-link, :where(.m-rd) .m-ui .m-decide__txt .m-link { min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-crumbs a { min-height: var(--m-target); }
  :where(.m-rd) .m-toolbar--agenda { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :where(.m-rd) .m-toolbar--agenda .m-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :where(.m-rd) .m-toolbar--vistas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :where(.m-rd) .m-toolbar--vistas .m-seg { flex-wrap: nowrap; }
  :where(.m-rd) .m-ui .m-tabs { margin-bottom: var(--m-sp-2); }
  :where(.m-rd) .m-ui .m-summary__item, :where(.m-rd) .m-ui .m-chip { min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-dockbar { padding-top: 8px; padding-bottom: 8px; }
}
/* ---------- Agenda en el móvil: por días ---------- */
:where(.m-rd) .m-agdays { display: grid; gap: var(--m-sp-2); }
:where(.m-rd) .m-agday { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); overflow: clip; }
:where(.m-rd) .m-agday.is-today { box-shadow: inset 0 3px 0 var(--m-text); }
:where(.m-rd) .m-agday__t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; padding: 8px 12px; background: var(--m-subtle); font-size: var(--m-fs-15); font-weight: var(--m-fw-bold); }
:where(.m-rd) .m-agday__list { display: grid; gap: 6px; padding: 8px; }
:where(.m-rd) .m-agday .m-appt { margin: 0; min-height: var(--m-target); display: grid; gap: 2px; }
/* ---------- Ctrl K ---------- */
:where(.m-rd) .m-palette__input::-webkit-search-cancel-button, :where(.m-rd) .m-palette__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
:where(.m-rd) .m-palette__l2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
:where(.m-rd) .m-palette__l2t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-palette__l2 .m-tag { flex: 0 1 auto; max-width: 55%; }
:where(.m-rd) .m-ui .m-palette__name { unicode-bidi: isolate; }
:where(.m-rd) .m-palette__extra { padding: 0 6px 6px; }
:where(.m-rd) .m-palette__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
:where(.m-rd) .m-palette__grp { display: block; }
/* ---------- Nombres de clientes: nunca se invierten (U+202E) ---------- */
:where(.m-rd) .m-cell-name, :where(.m-rd) .m-row__open, :where(.m-rd) .m-card2__open, :where(.m-rd) .m-drawer__name, :where(.m-rd) .m-palette__name, :where(.m-rd) .m-presgroup__t a, :where(.m-rd) .m-appt__who, :where(.m-rd) .m-job__name { unicode-bidi: isolate; }
@media (forced-colors: active) { :where(.m-rd) .m-tablewrap, :where(.m-rd) .m-board { background-image: none; } }

/* ---------- Ronda 2 (b): filas de «Lo que falta» en dos filas y cabecera del cajón compacta ---------- */
:where(.m-rd) .m-ui .m-todo__row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ic t act" "ic d d"; column-gap: 10px; row-gap: 0; align-items: center; min-height: 56px; padding: 6px 10px; }
:where(.m-rd) .m-ui .m-todo__row--sola { grid-template-areas: "ic t act"; min-height: 48px; }
:where(.m-rd) .m-todo__row > .m-todo__ic { grid-area: ic; align-self: start; margin-top: 6px; }
:where(.m-rd) .m-todo__row > .m-todo__t { grid-area: t; }
:where(.m-rd) .m-todo__row > .m-todo__act { grid-area: act; }
:where(.m-rd) .m-todo__row > .m-todo__d { grid-area: d; white-space: normal; overflow: visible; text-overflow: clip; display: block; line-height: 1.3; }
:where(.m-rd) .m-ui .m-todo--checks .m-todo__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c w"; min-height: 48px; }
:where(.m-rd) .m-todo--checks .m-check3 { grid-area: c; }
:where(.m-rd) .m-todo--checks .m-check3__who { grid-area: w; }
@container cajon (max-width: 400px) { :where(.m-rd) .m-ui .m-todo__row { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "ic t" "ic d" "ic act"; } :where(.m-rd) .m-todo__act { justify-content: flex-start; flex-wrap: wrap; } }
:where(.m-rd) .m-ui .m-drawer__fase { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--m-sp-2); row-gap: 2px; }
:where(.m-rd) .m-drawer__pasotxt { flex: 1 0 100%; min-width: 0; font-size: var(--m-fs-14); color: var(--m-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-drawer__paso { font-size: var(--m-fs-14); }
:where(.m-rd) .m-ui .m-drawer__next { margin-top: 4px; padding-top: 4px; }
:where(.m-rd) .m-ui .m-drawer__nextline { font-size: var(--m-fs-15); }
:where(.m-rd) .m-ui .m-drawer__actions { margin-top: 6px; }
:where(.m-rd) .m-ui .m-sec__sum { min-height: 44px; padding: 10px 0; }
/* Móvil: el botón flotante es un círculo de 56 px (Material) y los botones de las tarjetas van a la izquierda: nada queda debajo */
@media (max-width: 960px) {
  :where(.m-rd) .m-ui .m-fab { width: var(--m-fab); height: var(--m-fab); min-height: var(--m-fab); padding: 0; justify-content: center; border-radius: 16px; }
  :where(.m-rd) .m-ui .m-fab > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :where(.m-rd) .m-page--fab .m-row__act { justify-content: flex-start; padding-right: calc(var(--m-fab) + 8px); }
  :where(.m-rd) .m-page--fab .m-row__act .m-btn--row { flex: 0 1 auto !important; }
}
:where(.m-rd) .m-verpanel { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--m-sp-2); }
@media (max-width: 720px) { :where(.m-rd) .m-summary .m-inline-field--propio { display: none; } }

/* ---------- Ronda 2 (c): resúmenes de sección y lo plegado en dos líneas (no se cortan las fechas) ---------- */
:where(.m-rd) .m-ui .m-sec__sum { align-items: center; }
:where(.m-rd) .m-ui .m-sec__r { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
:where(.m-rd) .m-ui .m-todo__fold > summary > span:last-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
:where(.m-rd) .m-activity__txt [data-corto] { white-space: pre-line; }

/* ---------- Ronda 2 (d): «Lo que falta» con dos líneas de alto fijo (título + marca; detalle de una línea) ---------- */
:where(.m-rd) .m-todo__row > .m-todo__tl { grid-area: t; display: flex; align-items: center; gap: 6px; min-width: 0; }
:where(.m-rd) .m-ui .m-todo__tl > .m-todo__t { min-width: 0; flex: 0 1 auto; }
:where(.m-rd) .m-todo__nb { flex: none; display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 4px; background: var(--m-subtle); color: var(--m-text-2); font-size: var(--m-fs-12); font-weight: var(--m-fw-semibold); white-space: nowrap; }
:where(.m-rd) .m-ui .m-todo__row > .m-todo__d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-todo__row { min-height: 56px; }
:where(.m-rd) .m-ui .m-todo__row--sola { min-height: 48px; }

:where(.m-rd) .m-ui .m-todo__row > .m-todo__d { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
:where(.m-rd) .m-todo__dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-todo__row > .m-todo__t { grid-area: t; min-width: 0; }

/* ---------- Ronda 2 (e): móvil y estrecho (pasada de humo a 390 y 320 px) ---------- */
/* Barra superior del móvil: el título se lee entero (dos líneas si hace falta); cifras de Dirección de 44 px */
@media (max-width: 960px) {
  :where(.m-rd) .m-ui .m-appbar__title--largo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--m-fs-16); line-height: 1.15; overflow-wrap: break-word; }
  :where(.m-rd) .m-ui .m-dash__total { display: inline-flex; align-items: center; min-height: var(--m-target); }
}
/* Cajón a pantalla completa: la cabecera no es fija, así que la nota del siguiente paso va entera */
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-drawer__note { display: block; -webkit-line-clamp: unset; overflow: visible; }
  :where(.m-rd) .m-ui .m-msgprev > summary, :where(.m-rd) .m-ui summary.m-link { min-height: var(--m-target); display: flex; align-items: center; }
}
/* Filas en estrecho: «Paso N» sin su nombre (va en el title y en el cajón) y el plazo no se come el nombre */
@container pagina (max-width: 760px) { :where(.m-rd) .m-shell--cajon .m-ui .m-row .m-row__pasot, :where(.m-rd) .m-shell--cajon .m-row .m-row__pasot { display: none; } }
@container pagina (max-width: 520px) {
  :where(.m-rd) .m-ui .m-row .m-row__pasot { display: none; }
  :where(.m-rd) .m-ui .m-row:has(.m-row__check) { grid-template-columns: 44px minmax(0, 1fr) auto !important; grid-template-areas: "chk who due" "ic state cita" "ic next next" "ic marks marks" "ic act act" !important; column-gap: 8px; }
  :where(.m-rd) .m-ui .m-row:has(.m-row__check) > .m-row__checkwrap { align-self: start; }
}
@container pagina (max-width: 400px) {
  :where(.m-rd) .m-ui .m-row:has(.m-row__check) { grid-template-areas: "chk who who" "chk due due" "ic state cita" "ic next next" "ic marks marks" "ic act act" !important; }
  :where(.m-rd) .m-ui .m-row:has(.m-row__check) .m-row__due { max-width: none; justify-self: start; text-align: left; }
}
/* Cajón o ficha estrechos (móvil): el detalle de «Lo que falta» y el resumen de cada sección van enteros, en su línea.
   El cajón de escritorio (440 px) no entra: ahí el resumen va junto al título (O4: cada sección, una línea) */
@container cajon (max-width: 400px) {
  :where(.m-rd) .m-ui .m-todo__row > .m-todo__d { display: block; white-space: normal; overflow: visible; }
  :where(.m-rd) .m-ui .m-todo__dt { white-space: normal; overflow: visible; }
  :where(.m-rd) .m-ui .m-sec__sum { flex-wrap: wrap; row-gap: 2px; }
  :where(.m-rd) .m-ui .m-sec__r { flex: 1 0 100%; padding-left: 15px; display: block; -webkit-line-clamp: unset; overflow: visible; }
}
@container pagina (max-width: 520px) {
  :where(.m-rd) .m-ui .m-todo__row > .m-todo__d { display: block; white-space: normal; overflow: visible; }
  :where(.m-rd) .m-ui .m-todo__dt { white-space: normal; overflow: visible; }
  :where(.m-rd) .m-ui .m-sec__sum { flex-wrap: wrap; row-gap: 2px; }
  :where(.m-rd) .m-ui .m-sec__r { flex: 1 0 100%; padding-left: 15px; display: block; -webkit-line-clamp: unset; overflow: visible; }
}
/* Ficha grande: referencias, etiquetas y avisos a todo el ancho; una sola columna si es estrecha */
:where(.m-rd) .m-drawer__inner--grande .m-drawer__body > .m-drawer__refs, :where(.m-rd) .m-drawer__inner--grande .m-drawer__body > .m-drawer__tags, :where(.m-rd) .m-drawer__inner--grande .m-drawer__body > .m-drawer__risk { grid-column: 1 / -1; }
@container cajon (max-width: 760px) { :where(.m-rd) .m-drawer__inner--grande .m-drawer__body { grid-template-columns: minmax(0, 1fr); } }
/* Lotes (ronda) en estrecho: el título en dos líneas, entero */
@container pagina (max-width: 520px) { :where(.m-rd) .m-ui .m-row__open--lote { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; } }
/* Agenda en el móvil: una sola fila de herramientas (‹ Hoy › · buscar hueco · programar); la semana va por días */
@media (max-width: 720px) {
  :where(.m-rd) .m-toolbar--agenda .m-seg { display: none; }
  :where(.m-rd) .m-toolbar--agenda .m-btn-row { flex-wrap: nowrap; flex: none; }
  :where(.m-rd) .m-toolbar--agenda { gap: 6px; }
}
/* Móvil: en las listas con importe, el chip de fase basta (la etapa ya es el título del grupo) */
@container pagina (max-width: 520px) { :where(.m-rd) .m-ui .m-row--con-importe .m-row__paso { display: none; } }
/* Móvil: la población y las etiquetas, en su propia línea a todo el ancho (ronda 1: «Monday: sin traduci…» cortado) */
@container pagina (max-width: 520px) {
  :where(.m-rd) .m-ui .m-list > .m-row > .m-row__who { display: contents; overflow: visible; }
  :where(.m-rd) .m-ui .m-list > .m-row > .m-row__who > .m-row__open { grid-area: who; min-width: 0; align-self: center; }
  :where(.m-rd) .m-ui .m-list > .m-row > .m-row__who > .m-row__sub { grid-area: sub; min-width: 0; }
  :where(.m-rd) .m-ui .m-list > .m-row { grid-template-areas: "ic who due" "ic sub sub" "ic state cita" "ic next next" "ic marks marks" "ic act act" !important; }
  :where(.m-rd) .m-ui .m-list > .m-row:has(.m-row__check) { grid-template-areas: "chk who due" "ic sub sub" "ic state cita" "ic next next" "ic marks marks" "ic act act" !important; }
}
@container pagina (max-width: 400px) {
  :where(.m-rd) .m-ui .m-list > .m-row:has(.m-row__check) { grid-template-areas: "chk who who" "chk due due" "ic sub sub" "ic state cita" "ic next next" "ic marks marks" "ic act act" !important; }
}
@container pagina (max-width: 520px) {
  /* sin cita ni importe, el chip y el paso ocupan toda la línea */
  :where(.m-rd) .m-ui .m-list > .m-row:not(.m-row--con-cita):not(.m-row--con-importe):not(:has(.m-row__check)) { grid-template-areas: "ic who due" "ic sub sub" "ic state state" "ic next next" "ic marks marks" "ic act act" !important; }
  :where(.m-rd) .m-ui .m-list > .m-row:not(.m-row--con-cita):not(.m-row--con-importe):has(.m-row__check) { grid-template-areas: "chk who due" "ic sub sub" "ic state state" "ic next next" "ic marks marks" "ic act act" !important; }
}
@container pagina (max-width: 400px) {
  :where(.m-rd) .m-ui .m-list > .m-row:not(.m-row--con-cita):not(.m-row--con-importe):has(.m-row__check) { grid-template-areas: "chk who who" "chk due due" "ic sub sub" "ic state state" "ic next next" "ic marks marks" "ic act act" !important; }
}
/* Incidencia abierta en cualquier paso: aviso con su botón en el cajón */
:where(.m-rd) .m-drawer__risk--inc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
:where(.m-rd) .m-drawer__risk--inc > span { flex: 1 1 220px; min-width: 0; }
/* «Lo que falta»: la vista previa del documento va debajo, a todo el ancho (no en la columna de acciones), y con tres
   acciones o más (Validar · Rechazar · Deshacer) las acciones bajan a su línea y el título no se recorta (ronda 2) */
:where(.m-rd) .m-ui .m-todo__row:has(> .m-todo__pv) { grid-template-areas: "ic t act" "ic d d" "ic pv pv"; }
:where(.m-rd) .m-ui .m-todo__row:has(> .m-todo__act > :nth-child(3)) { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "ic t" "ic d" "ic act"; }
:where(.m-rd) .m-ui .m-todo__row:has(> .m-todo__act > :nth-child(3)):has(> .m-todo__pv) { grid-template-areas: "ic t" "ic d" "ic act" "ic pv"; }
:where(.m-rd) .m-ui .m-todo__row:has(> .m-todo__act > :nth-child(3)) > .m-todo__act { justify-content: flex-start; flex-wrap: wrap; margin-top: 4px; }
:where(.m-rd) .m-todo__pv { grid-area: pv; min-width: 0; }
:where(.m-rd) .m-ui .m-todo__pv > .m-docprev { display: block; }
:where(.m-rd) .m-ui .m-todo__pv > .m-docprev > summary { min-height: var(--m-target-dense); padding: 0; }
:where(.m-rd) .m-ui .m-todo__pv .m-preview { max-width: 100%; }
@media (max-width: 720px) { :where(.m-rd) .m-ui .m-todo__pv > .m-docprev > summary { min-height: var(--m-target); } }
/* Ctrl K, línea 2: la fecha de la cita y el plazo, aparte y sin recortar; se recorta población · CL · quién (6.6.3) */
:where(.m-rd) .m-palette__l2k { flex: none; white-space: nowrap; color: var(--m-text-2); }
/* Ctrl K: la línea 2 tiene una parte que se recorta (población · CL · quién) y otra que no (fecha, plazo y duplicado) */
:where(.m-rd) .m-palette__l3 { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 78%; min-width: 0; }
:where(.m-rd) .m-palette__l2k { display: inline-flex; align-items: center; gap: 4px; }
:where(.m-rd) .m-palette__l3::before { content: "·"; flex: none; }
:where(.m-rd) .m-palette__l3 > .m-tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-tag__corto { display: none; }
/* En el móvil, tres líneas de alto fijo (78 px): nombre y fase · población, CL y quién · fecha, plazo y «¿Duplicado?».
   Así la población (lo que distingue a los dos Adrián) no se pierde ni el duplicado se come nada (ronda 2) */
@media (max-width: 520px) {
  :where(.m-rd) .m-ui .m-palette__opt { grid-template-rows: 26px 50px; height: 82px; }
  :where(.m-rd) .m-ui .m-palette__l2 { display: grid; grid-template-rows: 22px 28px; align-items: center; overflow: visible; white-space: normal; }
  :where(.m-rd) .m-ui .m-palette__l2t { display: block; font-size: var(--m-fs-14); color: var(--m-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  :where(.m-rd) .m-ui .m-palette__l3 { font-size: var(--m-fs-14); color: var(--m-text-2); max-width: none; min-width: 0; }
  :where(.m-rd) .m-ui .m-palette__l3::before { content: none; }
  /* el duplicado, como icono (su texto entero va en el nombre accesible del resultado y en el cajón) */
  :where(.m-rd) .m-ui .m-palette__l3 .m-tag__largo, :where(.m-rd) .m-ui .m-palette__l3 .m-tag__corto { display: none; }
  :where(.m-rd) .m-ui .m-palette__l3 > .m-tag { flex: none; padding: 0 5px; min-height: 24px; }
}
/* Recorrido: la rejilla nunca es más ancha que el cajón (ronda 2: a 390 px la fase medía 386 px dentro de 300) */
:where(.m-rd) .m-ui .m-journey2, :where(.m-rd) .m-ui .m-journey2__pasos { grid-template-columns: minmax(0, 1fr); }
:where(.m-rd) .m-ui .m-journey2__fase { min-width: 0; }
:where(.m-rd) .m-ui .m-journey2__paso { min-width: 0; }
:where(.m-rd) .m-ui .m-journey2__paso > :not(.m-journey2__n) { min-width: 0; overflow-wrap: break-word; }
:where(.m-rd) .m-ui .m-journey2__head { min-width: 0; flex-wrap: wrap; }
:where(.m-rd) .m-ui .m-journey2__head .m-phase { max-width: 100%; white-space: normal; height: auto; min-height: 24px; text-align: left; }
:where(.m-rd) .m-ui .m-drawer__fase .m-phase { max-width: 100%; white-space: normal; height: auto; min-height: 24px; text-align: left; }
/* Embudo en el móvil: las cifras bajan de línea en vez de montarse sobre el chip de la fase (ronda 1: «Comer…196 en curso») */
@container pagina (max-width: 640px) {
  :where(.m-rd) .m-ui .m-funnel__nums { flex-wrap: wrap; justify-content: flex-end; column-gap: 8px; row-gap: 0; min-width: 0; white-space: normal; }
  :where(.m-rd) .m-ui .m-funnel__nums > * { white-space: nowrap; }
  :where(.m-rd) .m-ui .m-funnel__row .m-phase { max-width: 100%; }
}
/* O4 (alto del cajón): en el escritorio, las referencias en una línea (el texto entero en el title) y las secciones
   plegadas de 40 px; en el móvil siguen enteras */
@media (min-width: 721px) {
  :where(.m-rd) .m-ui .m-drawer__refs--una { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(.m-rd) .m-ui .m-sec__sum { min-height: 40px; padding: 8px 0; }
}
/* «Pedir por correo lo que falta» y «Ver el mensaje» en la misma línea; el mensaje, al abrirlo, debajo a todo el ancho */
:where(.m-rd) .m-ui .m-falta__send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
:where(.m-rd) .m-ui .m-falta__send > details { flex: 0 1 auto; }
:where(.m-rd) .m-ui .m-falta__send > details[open] { flex: 1 1 100%; }
/* Separadores dibujados (no forman parte del texto): «Paso 6 · ahora», «1 factura con error · Héctor…» */
:where(.m-rd) .m-journey2__ahora::before, :where(.m-rd) .m-sep-antes::before { content: "· "; font-weight: var(--m-fw-regular); }
:where(.m-rd) .m-sep-antes::before { content: " · "; }
:where(.m-rd) [data-testid="cobrar-vencido"] .m-money__label { padding-left: 12px; }
/* El selector de archivo ocupa su botón (invisible): el clic y el foco caen dentro del botón, nunca en otro sitio */
:where(.m-rd) .m-btn--file { position: relative; }
:where(.m-rd) .m-ui .m-btn--file > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; clip: auto; overflow: hidden; opacity: 0; cursor: pointer; margin: 0; }

/* =====================================================================
   RONDA 3 · 22/10/2026 (arreglos tras las pruebas de la ronda 2)
   Sin colores nuevos: todo sale de tokens.css. Va al final para ganar a lo anterior sin tocarlo.
   ===================================================================== */
/* R2-02: el portal del técnico, a pantalla completa también a ≥ 961 px (la barra lateral vacía lo tapaba en negro) */
:where(.m-rd) .m-shell--sin-barra > .m-side { display: none !important; }

/* Un solo relleno por grupo: el resto de las filas, «tonal» (fondo de «Te toca», tinta): se lee como acción sin competir */
:where(.m-rd) .m-btn--tonal { background: var(--m-todo-bg); color: var(--m-todo-ink); border-color: transparent; }
:where(.m-rd) .m-btn--tonal:hover { background: var(--m-selected); border-color: var(--m-control); color: var(--m-text); }

/* El tiempo nunca se parte en dos líneas (R2-11: «Atascado · 24 / días») */
:where(.m-rd) .m-ui .m-due, :where(.m-rd) .m-ui .m-row .m-due { white-space: nowrap; }
:where(.m-rd) .m-ui .m-row__due { max-width: none; }
:where(.m-rd) .m-due .m-due__t { white-space: nowrap; }

/* La fila entera se pulsa; el texto de cada celda queda por encima del enlace estirado para que su title (el texto
   entero) se vea al pasar el ratón (ronda 2: solo salía el nombre) */
:where(.m-rd) .m-ui .m-row { cursor: pointer; }
:where(.m-rd) .m-ui .m-row__next, :where(.m-rd) .m-ui .m-row__state, :where(.m-rd) .m-ui .m-row__due, :where(.m-rd) .m-ui .m-row__cita, :where(.m-rd) .m-ui .m-row__sub { position: relative; z-index: 1; }
:where(.m-rd) .m-row--ghost .m-row__txt { color: var(--m-done-ink); }
:where(.m-rd) .m-row__ahora { color: var(--m-muted); font-weight: var(--m-fw-regular); }
:where(.m-rd) .m-group__sub--hecho { color: var(--m-done-ink); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-tag--recoger { flex: none; }
/* Etiquetas de las filas: dicen lo que ponía Monday; recortadas con el texto entero en su title y en el nombre accesible */
:where(.m-rd) .m-ui .m-tags .m-tag, :where(.m-rd) .m-ui .m-row__who .m-tag, :where(.m-rd) .m-ui .m-row__next .m-tag { max-width: 22em; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-row__next .m-tags { flex: 0 1 auto; min-width: 0; }
/* Sin responsable: la población (lo que distingue a dos homónimos) no baja de 12 caracteres */
:where(.m-rd) .m-ui .m-row__place--entera { flex: 0 0 auto; min-width: 12ch; max-width: 100%; }

/* Filtros en una sola línea (ronda 2: 2-3 líneas a 1440 px con el cajón abierto); lo que no cabe se desplaza dentro */
:where(.m-rd) .m-page > .m-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
:where(.m-rd) .m-page > .m-chips .m-chip { flex: none; }

/* El riesgo de mañana es un AVISO (amarillo, triángulo): lo que falta no bloquea (ronda 2: rojo con «no bloquea») */
:where(.m-rd) .m-ui .m-drawer__risk--warn, :where(.m-rd) .m-ui .m-dash__risk { background: var(--m-warn-bg); color: var(--m-warn-ink); box-shadow: inset 4px 0 0 var(--m-warn-line); }
:where(.m-rd) .m-ui .m-dash__risk a { color: var(--m-warn-ink); }

/* Cabecera del cajón: las notas se leen enteras (una fecha recortada no vale, aunque esté en el title) */
:where(.m-rd) .m-ui .m-drawer__note { display: block; -webkit-line-clamp: unset; white-space: normal; overflow: visible; }
:where(.m-rd) .m-ui .m-drawer__why { display: flex; align-items: flex-start; min-width: 0; }
:where(.m-rd) .m-ui .m-drawer__why > span { min-width: 0; }
:where(.m-rd) .m-ui .m-drawer__nextline .m-due { white-space: nowrap; }
/* «Hecho» en la cabecera: se queda (no desaparece ni cambia de alto solo); el texto (hasta dos líneas) y su único
   «Deshacer» en la misma fila */
:where(.m-rd) .m-ui .m-drawer__fixed > .m-nextup { margin: 0 var(--m-sp-5) var(--m-sp-2); padding: 4px var(--m-sp-3); gap: 2px; }
:where(.m-rd) .m-ui .m-nextup p { flex-wrap: nowrap; align-items: center; min-height: 32px; }
:where(.m-rd) .m-ui .m-nextup__t { flex: 1 1 0; min-width: 0; line-height: 1.3; }
:where(.m-rd) .m-ui .m-nextup p > .m-i { flex: none; }
:where(.m-rd) .m-nextup__sig { color: var(--m-text); }
:where(.m-rd) .m-ui .m-nextup .m-btn { flex: none; }
/* Sin cobertura, también dentro del cajón */
:where(.m-rd) .m-drawer__offline { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px var(--m-sp-5); background: var(--m-band); color: var(--m-on-dark); font-size: var(--m-fs-14); }
:where(.m-rd) .m-drawer__offline .m-i { color: var(--m-brand-accent); }
/* Lo de otra persona: plegado y en solo lectura */
:where(.m-rd) .m-falta--ajena .m-falta__fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-height: var(--m-target); padding: 6px 0; cursor: pointer; list-style: none; }
:where(.m-rd) .m-falta--ajena .m-falta__fold > summary::-webkit-details-marker { display: none; }
:where(.m-rd) .m-falta--ajena .m-falta__t { margin-right: 0; }
:where(.m-rd) .m-falta--ajena .m-btn-row { margin-top: 6px; }
/* Corregir el correo o el teléfono aquí mismo */
:where(.m-rd) .m-corregir { width: 100%; margin-top: 6px; padding: var(--m-sp-2); border: 1px solid var(--m-line-strong); border-radius: var(--m-r-md); background: var(--m-bg); }

/* Legalización: las 7 comprobaciones en filas de 36 px (> 24 px de WCAG 2.5.8) y la tasa en una línea (O4: alto del cajón) */
@media (min-width: 721px) {
  :where(.m-rd) .m-ui .m-todo--checks .m-todo__row { min-height: 36px; padding-top: 0; padding-bottom: 0; }
  :where(.m-rd) .m-ui .m-todo--checks .m-check3 { min-height: 36px; }
  :where(.m-rd) .m-ui .m-form__row--tasa { grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); align-items: end; }
  :where(.m-rd) .m-ui .m-quick--tasa { padding: var(--m-sp-2) var(--m-sp-3); gap: 6px; }
  :where(.m-rd) .m-ui .m-quick--tasa .m-mini-h { margin: 0; }
  :where(.m-rd) .m-ui .m-sec__sum { min-height: 36px; padding: 6px 0; }
  :where(.m-rd) .m-ui .m-drawer__body { padding-bottom: var(--m-sp-6); }
}
/* Formularios: una caja de error no estira la de al lado (ronda 2: «Importe» crecía de 70 a 94 px) */
:where(.m-rd) .m-ui .m-form__row { align-items: start; }
/* El tipo de instalación (radio): el control ocupa su botón entero, así tocarlo no desplaza la página (ronda 2: 99 px) */
:where(.m-rd) .m-ui .m-seg__opt--radio > input.m-sr { inset: 0; width: 100%; height: 100%; clip: auto; margin: 0; opacity: 0; overflow: hidden; cursor: pointer; }
:where(.m-rd) .m-field__usar { margin-left: 6px; }

/* Avisos: el texto entero, sin recortar (2-4 líneas), y sin repetir lo que ya se ve junto al botón */
:where(.m-rd) .m-ui .m-toast__text { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Tableros (R2-07): columnas que caben (180 px como mínimo, vacías a 48), y el número con el importe nunca se parte */
:where(.m-rd) .m-ui .m-board__col { flex: 1 1 180px; min-width: 180px; }
:where(.m-rd) .m-ui .m-board__col--empty { flex: 0 0 48px; min-width: 48px; }
:where(.m-rd) .m-ui .m-board__n, :where(.m-rd) .m-ui .m-tab__fig { white-space: nowrap; }

/* Dirección: «de ello, vencido» es un subtexto de su línea (no un sumando) y cada línea dice cuánto hay por revisar */
:where(.m-rd) .m-money__li { display: grid; }
:where(.m-rd) .m-money__sub, :where(.m-rd) .m-money__rev { display: inline-flex; align-items: center; min-height: 24px; padding: 0 4px 0 16px; font-size: var(--m-fs-14); color: var(--m-text-2); text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 3px; }
:where(.m-rd) .m-money__rev { color: var(--m-warn-ink); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-dir-nada { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--m-sp-4); padding: var(--m-sp-2) var(--m-sp-3); color: var(--m-text-2); font-size: var(--m-fs-15); }
:where(.m-rd) .m-dir-nada .m-i { color: var(--m-done-line); }
:where(.m-rd) .m-decide__que { color: var(--m-text-2); }
@container pagina (max-width: 560px) {
  /* una columna: los importes alineados a la derecha; lo vencido debajo de su línea */
  :where(.m-rd) .m-ui .m-moneys { grid-template-columns: minmax(0, 1fr); }
  :where(.m-rd) .m-ui .m-money { flex-direction: row; align-items: center; justify-content: space-between; min-height: 36px !important; }
  :where(.m-rd) .m-ui .m-money__sub, :where(.m-rd) .m-ui .m-money__rev { min-height: 28px; }
  :where(.m-rd) .m-ui .m-bar { min-height: 36px !important; }
  :where(.m-rd) .m-ui .m-decide__row { min-height: var(--m-target); padding: 0; }
  :where(.m-rd) .m-ui .m-decide__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(.m-rd) .m-ui .m-dash__hint { display: none; }
}

/* Agenda (R2-16): bloque en rejilla de 4 filas fijas (hora · estado · nombre · aviso): el aviso no monta sobre el nombre */
:where(.m-rd) .m-agenda .m-appt { height: auto; min-height: 96px; display: grid; grid-template-rows: auto auto auto 18px; align-content: start; gap: 2px; }
:where(.m-rd) .m-appt__note--warn { color: var(--m-warn-ink); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-appt__note { display: flex; align-items: center; gap: 4px; min-height: 18px; font-size: var(--m-fs-12); white-space: nowrap; overflow: hidden; }
:where(.m-rd) .m-appt__time--mal { color: var(--m-warn-ink); }
:where(.m-rd) .m-appt--revisar { box-shadow: inset 3px 0 0 var(--m-warn-line), inset 0 0 0 1px var(--m-warn-line); background: var(--m-warn-bg); }
:where(.m-rd) .m-agenda__sin th { background: var(--m-warn-bg); color: var(--m-warn-ink); }

/* Clientes y Presupuestos: el nombre manda (≥ 40 %) y nada se recorta sin su texto entero (R2-09) */
:where(.m-rd) .m-table--clientes col.m-col-cli { width: 44%; }
:where(.m-rd) .m-table--clientes col.m-col-tel { width: 20%; }
:where(.m-rd) .m-table--clientes col.m-col-dni { width: 18%; }
:where(.m-rd) .m-table--clientes col.m-col-exps { width: 18%; }
:where(.m-rd) .m-table--pres col.m-col-cli { width: 32%; }
:where(.m-rd) .m-table--pres col.m-col-ref { width: 17%; }
:where(.m-rd) .m-table--pres col.m-col-tot { width: 13%; }
:where(.m-rd) .m-table--pres col.m-col-est { width: 12%; }
:where(.m-rd) .m-table--pres col.m-col-fec { width: 11%; }
:where(.m-rd) .m-table--pres col.m-col-acc { width: 15%; }
:where(.m-rd) .m-table--clientes .m-tag { margin-top: 2px; max-width: 100%; }
:where(.m-rd) .m-sug--revisar { background: var(--m-warn-bg); border-color: var(--m-warn-line); color: var(--m-warn-ink); }

/* ≤ 960 px (R2-03): el cajón es una página entera, como en el móvil: nada queda debajo ni recibe el foco detrás */
@media (max-width: 960px) {
  :where(.m-rd) .m-shell--cajon > .m-drawer { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 90; }
  :where(.m-rd) .m-ui .m-drawer__back { display: inline-flex !important; }
  :where(.m-rd) .m-shell--cajon > .m-tabbar--fixed, :where(.m-rd) .m-shell--cajon > .m-appbar { visibility: hidden; }
  :where(.m-rd) .m-shell--cajon:not(.m-shell--tecnico):not(.m-shell--sin-barra) { padding-bottom: 0; }
}
/* Móvil: el botón flotante se aparta al bajar y vuelve al subir (Material): no tapa la pastilla de una tarjeta */
:where(.m-rd) .m-fab { transition: transform var(--m-dur) var(--m-ease), opacity var(--m-dur) var(--m-ease); }
:where(.m-rd) .m-fab.is-oculto { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }

/* Dirección en el móvil (O5, ronda 3): las cifras de cada bloque son texto en filas de 24 px (el total de cada bloque es
   el enlace, de 44 px); el riesgo en dos líneas: los tres bloques caben en la primera pantalla también con datos sucios */
@container pagina (max-width: 560px) {
  :where(.m-rd) .m-ui .m-dash { gap: 6px; }
  :where(.m-rd) .m-ui .m-dash__block { padding: 4px var(--m-sp-3) 6px; }
  :where(.m-rd) .m-ui .m-bar.m-bar--txt { min-height: 26px !important; padding: 0 2px; }
  :where(.m-rd) .m-ui .m-bar--txt .m-phase { min-height: 22px; padding: 1px 6px 1px 2px; }
  :where(.m-rd) .m-ui .m-money.m-money--txt { min-height: 26px !important; padding: 0 2px; font-size: var(--m-fs-14); }
  :where(.m-rd) .m-ui .m-money__sub, :where(.m-rd) .m-ui .m-money__rev { min-height: 20px; padding-left: 12px; font-size: var(--m-fs-12); text-decoration: none; }
  :where(.m-rd) .m-ui .m-dash__risk { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; padding: 4px 8px; }
  :where(.m-rd) .m-ui .m-dash__rev { min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-moneys--aparte { margin-top: 2px; padding-top: 2px; }
  :where(.m-rd) .m-ui .m-decide { gap: 0; }
}
:where(.m-rd) .m-bar--txt { cursor: default; }
:where(.m-rd) .m-bar--txt:hover, :where(.m-rd) .m-money--txt:hover { background: none; }

/* Ronda 3 (2) · cabecera y secciones del cajón, revisadas con capturas a 1366 × 768 */
/* Títulos de sección en frase normal (en mayúsculas se leían peor y no cabían) y la cuenta en texto normal */
:where(.m-rd) .m-ui .m-drawer .m-falta__t { font-size: var(--m-fs-15); letter-spacing: 0; text-transform: none; color: var(--m-text); }
:where(.m-rd) .m-falta__n { font-weight: var(--m-fw-regular); color: var(--m-text-2); }
/* La pista en la línea de la etiqueta («Número de factura · como en A3: 2026/0155»): una línea menos por campo (O4) */
:where(.m-rd) .m-field__pista { font-size: var(--m-fs-14); font-weight: var(--m-fw-regular); color: var(--m-muted); }
/* Comprobaciones de la legalización a 14 px, como el resto del cuerpo del cajón */
:where(.m-rd) .m-ui .m-todo--checks .m-check3__t { font-size: var(--m-fs-14); }
/* Filas: la población nunca baja de 8 caracteres (ronda 3: «M.» con la etiqueta de riesgo al lado) */
:where(.m-rd) .m-ui .m-row__sub .m-row__place { flex: 0 1 auto; min-width: min(8ch, 100%); }
:where(.m-rd) .m-ui .m-row__sub .m-tags { min-width: 0; }
/* (O4, ronda 3) el cajón cabe en ≤ 1,3 pantallas a 1366 × 768: filas plegadas de 32 px (> 24 px de WCAG 2.5.8; la fila
   entera es el objetivo), datos fiscales en línea y lo hecho en una línea que se abre */
@media (min-width: 721px) {
  :where(.m-rd) .m-ui .m-sec__sum { min-height: 32px; padding: 4px 0; }
  :where(.m-rd) .m-ui .m-todo--checks .m-todo__row, :where(.m-rd) .m-ui .m-todo--checks .m-check3 { min-height: 32px; }
  :where(.m-rd) .m-ui .m-todo__fold > summary { min-height: 36px; padding: 2px 10px; }
}
:where(.m-rd) .m-ui .m-todo__fold > summary > span:last-child { white-space: nowrap; overflow: visible; display: inline; }
:where(.m-rd) .m-todo__pleg-ver { margin-left: auto; color: var(--m-text-2); text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 3px; }
:where(.m-rd) .m-todo__fold[open] .m-todo__pleg-ver { visibility: hidden; }
:where(.m-rd) .m-fis { display: flex; flex-wrap: wrap; gap: 2px var(--m-sp-4); margin: 0 0 var(--m-sp-3); padding: var(--m-sp-2) var(--m-sp-3); border: 1px solid var(--m-line); border-radius: var(--m-r-md); }
:where(.m-rd) .m-fis__i { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; min-height: 24px; }
:where(.m-rd) .m-fis__i--ancho { flex-basis: 100%; }
:where(.m-rd) .m-fis dt { font-size: var(--m-fs-14); color: var(--m-text-2); }
:where(.m-rd) .m-fis dd { margin: 0; font-size: var(--m-fs-15); color: var(--m-text); font-variant-numeric: tabular-nums; }
/* (cabecera) paso · quién · días en un párrafo; el raíl, con la fase */
:where(.m-rd) .m-ui .m-drawer__paso .m-drawer__pasotxt { display: inline; white-space: normal; overflow: visible; color: var(--m-text-2); }
:where(.m-rd) .m-falta__motivo { margin: 0 0 var(--m-sp-2); color: var(--m-block-ink); font-size: var(--m-fs-15); }
:where(.m-rd) .m-check3__tasa { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; color: var(--m-text-2); }
:where(.m-rd) .m-ui .m-quick--tasa .m-form__row--tasa { margin-top: 0; }
/* Con ratón, las filas plegadas a 28 px (≥ 24 px de WCAG 2.5.8); al tacto se quedan en 32-44 */
@media (min-width: 721px) and (pointer: fine) {
  :where(.m-rd) .m-ui .m-sec__sum { min-height: 28px; padding: 3px 0; }
}
/* «Lo que falta»: el detalle se lee entero (pasa a dos líneas si hace falta): una fecha recortada no vale (6.6.3) */
:where(.m-rd) .m-ui .m-todo__row > .m-todo__d { display: block; white-space: normal; overflow: visible; }
:where(.m-rd) .m-ui .m-todo__dt { white-space: normal; overflow: visible; }
:where(.m-rd) .m-ui .m-todo__d .m-todo__nb { margin-left: 6px; vertical-align: 1px; }
/* El raíl del cajón, más corto (72 px): cabe junto a la fase más larga («Contratos y documentación») sin bajar de línea */
:where(.m-rd) .m-ui .m-drawer__fase { flex-wrap: wrap; }
:where(.m-rd) .m-ui .m-drawer__fase .m-rail { width: 72px; flex: none; }
/* «No impiden instalar»: un subtítulo de grupo en lugar de una marca en cada fila */
:where(.m-rd) .m-todo__sub { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px 2px; border-bottom: 1px solid var(--m-line); background: var(--m-subtle); color: var(--m-text-2); font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-todo__sub .m-i { color: var(--m-text-2); }
:where(.m-rd) .m-ui .m-todo__sub { flex-wrap: wrap; justify-content: space-between; column-gap: 8px; row-gap: 2px; padding: 2px 6px 2px 10px; }
:where(.m-rd) .m-todo__subt { display: inline-flex; align-items: center; gap: 6px; }
:where(.m-rd) .m-ui .m-todo__sub .m-falta__send { margin: 0; gap: 2px 8px; }
@media (min-width: 721px) {
  :where(.m-rd) .m-ui .m-todo__sub .m-falta__send .m-btn { min-height: 32px; padding: 0 10px; font-size: var(--m-fs-14); }
  :where(.m-rd) .m-ui .m-todo__sub .m-msgprev > summary { min-height: 32px; }
}
:where(.m-rd) .m-ui .m-todo__sub .m-msgprev > summary { font-weight: var(--m-fw-regular); }
:where(.m-rd) .m-ui .m-todo__sub .m-msgprev[open] { flex: 1 1 100%; }
/* En el subtítulo, «Ver el mensaje» es el ojo (con su texto para el lector de pantalla y en el title): cabe en una línea */
@media (min-width: 721px) {
  :where(.m-rd) .m-ui .m-todo__sub .m-msgprev > summary { min-width: 32px; justify-content: center; text-decoration: none; }
  :where(.m-rd) .m-ui .m-todo__sub .m-msgprev__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :where(.m-rd) .m-ui .m-todo__sub .m-msgprev[open] .m-msgprev__t { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-left: 4px; }
}
:where(.m-rd) .m-msgprev > summary .m-i { margin-right: 4px; }
:where(.m-rd) .m-ui .m-todo__sub .m-msgprev > summary .m-i { margin-right: 0; }
@media (min-width: 721px) {
  :where(.m-rd) .m-ui .m-drawer__body { padding-bottom: var(--m-sp-3); }
  :where(.m-rd) .m-ui .m-drawer__body > .m-falta { margin-bottom: var(--m-sp-3); }
}
:where(.m-rd) .m-nowrap { white-space: nowrap; }
:where(.m-rd) .m-chip--cero { gap: 4px; }
/* «Usar 600 12 34 56»: botón secundario junto al error (44 px en el móvil, 36 con ratón) */
:where(.m-rd) .m-field__usar { justify-self: start; margin: 4px 0 0; min-height: 36px; }
@media (max-width: 720px), (pointer: coarse) { :where(.m-rd) .m-field__usar { min-height: 44px; } }
/* «Te toca» no se parte */
:where(.m-rd) .m-ui .m-drawer__paso b { white-space: nowrap; }
/* Móvil (≤ 720 px): la barra de acciones es el pie del cajón (app.js la pone detrás de lo que se desplaza): el contenido
   no pasa por debajo de ella y no hace falta el relleno de 200 px; el botón flotante no sale sobre el cajón */
@media (max-width: 720px) {
  :where(.m-rd) .m-shell--cajon > .m-drawer > .m-drawer__inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  :where(.m-rd) .m-ui .m-drawer > .m-drawer__actions--pie { position: static; flex: none; }
  :where(.m-rd) .m-ui .m-drawer__body { padding-bottom: var(--m-sp-6); }
}
@media (max-width: 960px) { :where(.m-rd) .m-shell--cajon .m-fab { display: none; } }
@media (max-width: 720px) { :where(.m-rd) .m-ui .m-drawer > .m-drawer__actions--pie { margin: 0; } }
/* Técnico: «Hecho» en el pie fijo, encima de «Cerrar la visita» */
:where(.m-rd) .m-dock__hecho { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--m-sp-2); color: var(--m-done-ink); font-size: var(--m-fs-15); line-height: 1.3; }
:where(.m-rd) .m-dock__hecho > span { flex: 1 1 0; min-width: 0; }
:where(.m-rd) .m-dock__hecho .m-btn { flex: none; min-height: 44px; }
/* Avisos en el móvil: el texto a todo lo ancho y «Deshacer» debajo, a la derecha (ronda 3: el texto entero en una columna
   de 140 px medía 5 líneas) */
@media (max-width: 480px) {
  :where(.m-rd) .m-ui .m-toast { flex-wrap: wrap; row-gap: 0; padding-bottom: 6px; }
  :where(.m-rd) .m-ui .m-toast > .m-i { order: 0; }
  :where(.m-rd) .m-ui .m-toast__text { order: 1; flex: 1 1 0; min-width: 0; }
  :where(.m-rd) .m-ui .m-toast__close { order: 2; }
  :where(.m-rd) .m-ui .m-toast [data-toast-accion] { order: 3; margin-left: auto; }
  :where(.m-rd) .m-ui .m-toast:has([data-toast-accion]) .m-toast__text { flex-basis: calc(100% - 100px); }
}
/* Un texto oculto (.m-sr) dentro de una tira que se desplaza no ensancha la página: el chip es su caja (ronda 3: 967 px a 768) */
:where(.m-rd) .m-chips .m-chip, :where(.m-rd) .m-summary .m-summary__item { position: relative; }
/* El total de cada bloque de Dirección es el enlace: 44 × 44 como mínimo también cuando es un número corto («13») */
:where(.m-rd) .m-dash__total { display: inline-flex; align-items: center; justify-content: center; min-width: var(--m-target); min-height: var(--m-target); }
/* Dirección: lo que se pulsa se ve pulsable sin pasar el ratón (ronda 2: «Facturado sin cobrar» no parecía un enlace y
   «Lo facturado sin cobrar…» sí lo parecía): la etiqueta de cada línea, subrayada fina; el texto de ayuda, sin subrayar */
:where(.m-rd) a.m-money .m-money__label { text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 3px; }
:where(.m-rd) a.m-money:hover .m-money__label { text-decoration-color: currentColor; }
/* Buscador: si la segunda línea dice un estado o una fecha, baja de línea en vez de recortarse (6.6.3) */
:where(.m-rd) .m-ui .m-palette__l2t.m-palette__l2t--entero { white-space: normal; overflow: visible; text-overflow: clip; display: block; }
/* … y su fila crece en lugar de montarse sobre la siguiente (F01): alto mínimo el de siempre, filas de la rejilla a su
   contenido */
:where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) { height: auto; min-height: 56px; grid-template-rows: 26px auto; padding-top: 4px; padding-bottom: 4px; overflow: visible; }
:where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) .m-palette__l2 { overflow: visible; white-space: normal; flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) { min-height: 82px; }
  :where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) .m-palette__l2 { grid-template-rows: auto auto; }
}
:where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) .m-palette__l2t { flex: 1 1 100%; }
:where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) .m-palette__l3 { max-width: 100%; }
:where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) .m-palette__l3::before { content: none; }
:where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) .m-palette__l3 { flex: 1 1 100%; }
:where(.m-rd) .m-ui .m-palette__opt:has(.m-palette__l2t--entero) .m-palette__l3 > .m-tag { max-width: none; }
/* Al abrir la ficha (≥ 1280 px): un fotograma con el cajón encima de la lista, que se estrecha justo después (O10: el clic
   no espera a volver a maquetar la lista entera) */
@media (min-width: 1280px) {
  :where(.m-rd) .m-shell--cajon.m-shell--entrando { grid-template-columns: var(--m-sidebar-w) minmax(0, 1fr) 0; }
  :where(.m-rd) .m-shell--cajon.m-shell--entrando > .m-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: var(--m-drawer-w-md); height: 100vh; }
}
@media (min-width: 1440px) { :where(.m-rd) .m-shell--cajon.m-shell--entrando > .m-drawer { width: var(--m-drawer-w); } }

/* =====================================================================
   RONDA 4 · 22/10/2026 (arreglos tras las pruebas de la ronda 3)
   O1 (una fila por expediente, «Atascados» aparte), O7 (nada se mueve solo; objetivos de 24 px con ratón y 44 px
   al tacto), O11 (datos sucios) y el móvil. Sin colores nuevos: todo sale de tokens.css. Va al final para ganar a lo
   anterior sin tocarlo.
   ===================================================================== */

/* --- O7 · El rastro: lo que se va de un grupo por lo que has hecho deja una línea de su mismo alto (el alto medido de
   la fila va en su style), con «Hecho 09:01 · qué · nombre · ahora en «X»: …» y «Deshacer». No cuenta en el número del
   grupo y no es una fila (no tiene data-exp): el expediente vivo está una sola vez, en su grupo. */
:where(.m-rd) .m-rastro { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; box-sizing: border-box; min-height: 40px; margin: 0; padding: 2px var(--m-sp-5); border-bottom: 1px solid var(--m-line); background: var(--m-bg); color: var(--m-text-2); font-size: var(--m-fs-14); line-height: 18px; list-style: none; overflow: hidden; }
:where(.m-rd) .m-list > .m-rastro:last-child, :where(.m-rd) .m-decide > .m-rastro:last-child { border-bottom: 0; }
:where(.m-rd) .m-rastro__ic { display: inline-flex; color: var(--m-done-line); }
/* dos líneas: «Hecho 09:01 · qué» y «Nombre · ahora en «X»: lo siguiente»; cada una recortada (el texto entero, en el title) */
:where(.m-rd) .m-rastro__t { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
:where(.m-rd) .m-rastro__que { color: var(--m-done-ink); font-weight: var(--m-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-rastro__que b { font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-rastro__quien { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-rastro__quien .m-link { position: relative; z-index: 1; font-weight: var(--m-fw-semibold); color: var(--m-text); }
:where(.m-rd) .m-rastro__ahora { color: var(--m-text-2); }
:where(.m-rd) .m-rastro__act { display: flex; justify-content: flex-end; }
:where(.m-rd) .m-rastro--log { min-height: 40px; }
:where(.m-rd) .m-decide > .m-rastro { padding: 4px 0; background: transparent; }
/* En los tableros y en las tarjetas: una tarjeta punteada (no es una tarjeta más: no se cuenta ni se arrastra) */
:where(.m-rd) .m-rastro--card { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 8px 10px; border: 1px dashed var(--m-line-strong); border-radius: var(--m-r-md); background: var(--m-bg); }
:where(.m-rd) .m-rastro--card .m-rastro__name { font-weight: var(--m-fw-semibold); color: var(--m-text); }
:where(.m-rd) .m-rastro--card .m-rastro__donde { color: var(--m-text-2); }
:where(.m-rd) .m-rastro--card .m-rastro__act { justify-content: flex-start; }
:where(.m-rd) .m-rastro--card { overflow: hidden; }
:where(.m-rd) .m-rastro--card .m-rastro__name, :where(.m-rd) .m-rastro--card .m-rastro__que, :where(.m-rd) .m-rastro--card .m-rastro__donde { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  /* en el móvil la tarjeta mide más: el estado actual puede ir en dos líneas */
  :where(.m-rd) .m-rastro { padding: 4px var(--m-sp-3); }
  :where(.m-rd) .m-rastro__que { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  :where(.m-rd) .m-rastro__quien { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  :where(.m-rd) .m-rastro__act .m-btn { min-height: var(--m-target); }
}

/* --- O7 · La cabecera del cajón mide siempre lo mismo: los botones y, debajo, UNA línea de alto fijo con lo último
   hecho aquí («Hecho 09:01: Técnicos asignados · Deshacer»), la nota de la acción o un error. Antes eran la línea verde
   y la caja «Hecho» (ronda 3: la cabecera pasaba de 266 a 432 px y «Comprobado» bajaba 103 px). */
:where(.m-rd) .m-ui .m-drawer__hecho { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
:where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions, :where(.m-rd) .m-ui .m-drawer__hecho > .m-nextup, :where(.m-rd) .m-ui .m-drawer__hecho > .m-quick { min-width: 0; }
:where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions > .m-btn { max-width: 100%; }
/* «Siguiente» en una línea: el verbo se recorta (el texto entero, en el title) y el plazo siempre se ve; así la cabecera
   mide lo mismo antes y después de cambiar de paso (ronda 3: 266 → 432 px) */
:where(.m-rd) .m-ui .m-drawer__nextline { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
:where(.m-rd) .m-ui .m-drawer__nextline > .m-label { flex: none; }
:where(.m-rd) .m-ui .m-drawer__nextline > .m-drawer__verb { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-drawer__nextline > .m-due { flex: none; }
/* «Lo que falta para Instalación · faltan 2 de 9»: en una línea de alto fijo (el recuento cambia al marcar y antes partía
   el título en dos líneas: el cuerpo subía 22 px); el texto entero, en el title. En el móvil, el recuento debajo. */
:where(.m-rd) .m-ui .m-drawer .m-falta__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-drawer .m-falta__t .m-falta__n { font-size: var(--m-fs-14); }
:where(.m-rd) .m-ui .m-drawer .m-falta__t .m-falta__n::before { content: " · "; color: var(--m-muted); }
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-drawer .m-falta__t { white-space: normal; }
  :where(.m-rd) .m-ui .m-drawer .m-falta__t .m-falta__n { display: block; }
  :where(.m-rd) .m-ui .m-drawer .m-falta__t .m-falta__n::before { content: none; }
}
/* O4 (ronda 4): el cajón cabe en 1,3 pantallas con los subgrupos con título: subtítulos de 24-28 px, filas de 48 px y
   secciones plegadas de 26 px con ratón (todo ≥ 24 px, WCAG 2.5.8) */
@media (min-width: 721px) {
  :where(.m-rd) .m-ui .m-todo__sub { min-height: 24px; padding-top: 0; padding-bottom: 0; }
  :where(.m-rd) .m-ui .m-todo__sub .m-falta__send .m-btn, :where(.m-rd) .m-ui .m-todo__sub .m-msgprev > summary { min-height: 28px; }
  :where(.m-rd) .m-ui .m-todo__row { min-height: 48px; padding-top: 3px; padding-bottom: 3px; }
  :where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions .m-btn { min-height: 40px; }
}
@media (min-width: 721px) and (pointer: fine) {
  :where(.m-rd) .m-ui .m-sec__sum { min-height: 26px; padding: 1px 0; }
}
:where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions { margin-top: 6px; }
:where(.m-rd) .m-ui .m-drawer__hecho > .m-nextup { display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; margin: 0; padding: 0 4px 0 8px; border-radius: var(--m-r-md); background: var(--m-done-bg); color: var(--m-done-ink); font-size: var(--m-fs-14); line-height: 1.25; overflow: hidden; }
:where(.m-rd) .m-ui .m-drawer__hecho > .m-nextup--vacia { background: transparent; }
:where(.m-rd) .m-ui .m-drawer__hecho > .m-nextup--nota { background: transparent; color: var(--m-text-2); padding-left: 0; }
:where(.m-rd) .m-ui .m-drawer__hecho > .m-nextup--error { background: var(--m-block-bg); color: var(--m-block-ink); }
:where(.m-rd) .m-ui .m-drawer__hecho .m-nextup__t { display: block; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-drawer__hecho .m-nextup__t > .m-i { vertical-align: -3px; margin-right: 4px; }
:where(.m-rd) .m-ui .m-drawer__hecho .m-nextup .m-btn { flex: none; min-height: 28px; padding: 0 8px; }
:where(.m-rd) .m-drawer__nada { display: inline-flex; align-items: center; min-height: 40px; color: var(--m-text-2); font-size: var(--m-fs-15); }
:where(.m-rd) .m-ui .m-btn--siguiente { max-width: 100%; min-width: 0; }
:where(.m-rd) .m-ui .m-btn--siguiente .m-btn__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La cabecera: «Paso 6 de 19 · Programación · Te toca · 3 días»: los separadores no cuelgan al final de una línea */
:where(.m-rd) .m-sep-txt { color: var(--m-muted); }
/* paso en una línea y quién · días en la siguiente: siempre dos líneas, ningún separador al principio de una línea */
:where(.m-rd) .m-ui .m-drawer__paso .m-drawer__pasotxt, :where(.m-rd) .m-ui .m-drawer__paso .m-drawer__quien { display: block; }
:where(.m-rd) .m-ui .m-drawer__paso .m-drawer__pasotxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-drawer__quien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-drawer__nextline { flex-wrap: wrap; white-space: normal; }
  :where(.m-rd) .m-ui .m-drawer__nextline > .m-drawer__verb { overflow: visible; }
  :where(.m-rd) .m-ui .m-drawer__hecho > .m-nextup { height: 48px; }
  :where(.m-rd) .m-ui .m-drawer__hecho .m-nextup__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  :where(.m-rd) .m-ui .m-drawer__hecho .m-nextup .m-btn { min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-drawer__quien { white-space: normal; }
}

/* --- «Lo que falta»: tres subgrupos con título (Impide instalar · No impide · En espera) y el material en dos líneas */
:where(.m-rd) .m-todo__sub--ok { background: var(--m-done-bg); color: var(--m-done-ink); }
:where(.m-rd) .m-todo__sub--ok .m-i { color: var(--m-done-line); }
:where(.m-rd) .m-todo__sub--impide { background: var(--m-block-bg); color: var(--m-block-ink); }
:where(.m-rd) .m-todo__sub--impide .m-i { color: var(--m-block-ink); }
:where(.m-rd) .m-todo__sub--espera { background: var(--m-subtle); color: var(--m-text-2); }
:where(.m-rd) .m-ui .m-todo__row--2l > .m-todo__t, :where(.m-rd) .m-ui .m-todo__row--2l .m-todo__t { white-space: normal; overflow: visible; text-overflow: clip; display: block; }
:where(.m-rd) .m-falta__pedido { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: var(--m-done-ink); font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); white-space: nowrap; }
:where(.m-rd) .m-falta__pedido .m-i { color: var(--m-done-line); }

/* --- Comprobaciones de la legalización: una línea de alto fijo; «Brayan · 09:02» en una columna reservada desde el
   principio (ronda 3: al marcar, cada fila pasaba a 2 líneas y la tasa bajaba 78 px) */
:where(.m-rd) .m-ui .m-todo--checks .m-todo__row { grid-template-columns: minmax(0, 1fr) 7.5rem; }
:where(.m-rd) .m-ui .m-todo--checks .m-check3 { min-width: 0; }
:where(.m-rd) .m-ui .m-todo--checks .m-check3__t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-todo--checks .m-check3__who { min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-todo--checks .m-todo__row { grid-template-columns: minmax(0, 1fr) 6.5rem; min-height: var(--m-target); }
}

/* --- Formularios cortos: un hueco de alto fijo debajo de los botones para la pista, el error o la pregunta
   «¿Es correcto?» con su «Sí, es correcto» (O2, O7: nada se mueve al validar) */
:where(.m-rd) .m-form__aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; box-sizing: border-box; min-height: 44px; margin: 4px 0 0; padding: 4px 0; color: var(--m-muted); font-size: var(--m-fs-14); line-height: 18px; }
:where(.m-rd) .m-form__aviso--error { color: var(--m-block-ink); font-weight: var(--m-fw-medium); }
:where(.m-rd) .m-form__aviso--pregunta { padding: 4px 8px; border-radius: var(--m-r-md); background: var(--m-warn-bg); color: var(--m-warn-ink); font-weight: var(--m-fw-medium); box-shadow: inset 3px 0 0 var(--m-warn-line); }
@media (max-width: 720px) { :where(.m-rd) .m-form__aviso { min-height: 62px; } }
:where(.m-rd) .m-form__avisot { flex: 1 1 14rem; min-width: 0; }
:where(.m-rd) .m-form__avisot > .m-i { vertical-align: -3px; margin-right: 4px; }
:where(.m-rd) .m-ui .m-form__confirmar { flex: none; min-height: 32px; }
/* Campo con hueco: la pista y el error comparten una línea de alto fijo; «Usar …» va DENTRO del campo, a la derecha */
:where(.m-rd) .m-field--slot .m-field__control { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
:where(.m-rd) .m-field--slot .m-field__control > .m-input { flex: 1 1 auto; min-width: 0; }
:where(.m-rd) .m-ui .m-field--slot .m-field__usar { flex: none; margin: 0; min-height: 0; align-self: stretch; padding: 0 10px; }
:where(.m-rd) .m-field__hueco { display: block; position: relative; box-sizing: border-box; height: 20px; margin-top: 2px; font-size: var(--m-fs-14); line-height: 20px; overflow: hidden; }
:where(.m-rd) .m-field__hueco > .m-field__hint { display: block; margin: 0; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-field__hueco > .m-field__error { display: block; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-field__hueco > .m-field__error:not([hidden]) ~ .m-field__hint, :where(.m-rd) .m-field--error .m-field__hueco > .m-field__hint { display: none; }
:where(.m-rd) .m-field--error .m-field__hueco > .m-field__error:not([hidden]) { display: block; }
:where(.m-rd) .m-ui .m-field__usar { min-height: 36px; }
@media (max-width: 720px), (pointer: coarse) {
  :where(.m-rd) .m-ui .m-form__confirmar { min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-field--slot .m-field__usar { min-height: var(--m-target); }
  :where(.m-rd) .m-field__hueco { min-height: 36px; line-height: 18px; }
  :where(.m-rd) .m-field__hueco > .m-field__hint, :where(.m-rd) .m-field__hueco > .m-field__error, :where(.m-rd) .m-field--error .m-field__hueco > .m-field__error:not([hidden]) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  :where(.m-rd) .m-field__hueco { height: 36px; }
}
/* Datos fiscales junto al formulario de la factura: el NIF que no valida, en rojo, con «Corregir el NIF» en línea */
:where(.m-rd) .m-fis__mal { color: var(--m-block-ink); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-fis__i .m-btn { min-height: 28px; padding: 0 8px; }

/* --- Cierres (cancelada, retirada…): el motivo, aparte y plegado si es largo */
:where(.m-rd) .m-terminal__mot { margin: 2px 0 0; font-size: var(--m-fs-15); color: var(--m-text-2); overflow-wrap: anywhere; }
:where(.m-rd) details.m-terminal__mot > summary { cursor: pointer; list-style: none; min-height: 24px; }
:where(.m-rd) details.m-terminal__mot > summary::-webkit-details-marker { display: none; }
:where(.m-rd) details.m-terminal__mot[open] .m-terminal__motc { display: none; }
:where(.m-rd) .m-terminal__motc, :where(.m-rd) .m-terminal__ver { display: block; }
:where(.m-rd) .m-terminal__ver { margin-top: 2px; width: max-content; }
:where(.m-rd) .m-terminal__motl { margin: 4px 0 0; max-height: 40vh; overflow: auto; white-space: pre-wrap; }

/* --- Dirección: el riesgo es una lista (una línea por expediente, por urgencia: hoy primero); nunca line-clamp, que
   escondía a Teresa (se instala hoy sin contrato firmado) en el móvil */
:where(.m-rd) .m-ui .m-dash__risk { display: flex; align-items: flex-start; gap: 6px; -webkit-line-clamp: unset; overflow: visible; }
:where(.m-rd) .m-ui .m-dash__risk > .m-i { flex: none; margin-top: 4px; }
:where(.m-rd) .m-dash__risklist { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; }
/* Cada riesgo en texto corrido: «Hoy · Teresa Aguado Ramos · sin contrato firmado» (dos líneas como mucho en una
   columna estrecha): el nombre entero y lo que falta, sin columnas que recorten los dos */
:where(.m-rd) .m-ui .m-dash__riskline { display: block; min-height: 24px; padding: 2px 0; box-sizing: border-box; color: var(--m-warn-ink); text-decoration: none; font-size: var(--m-fs-14); line-height: 18px; white-space: normal; }
:where(.m-rd) .m-ui .m-dash__riskwhen { font-weight: var(--m-fw-bold); }
:where(.m-rd) .m-ui .m-dash__riskwho { font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-ui .m-dash__riskline:hover .m-dash__riskwho { text-decoration: underline; }
:where(.m-rd) .m-ui .m-dash__riskline--mas { text-decoration: underline; text-underline-offset: 3px; font-weight: var(--m-fw-semibold); }
@container pagina (max-width: 560px) {
  :where(.m-rd) .m-ui .m-dash__risk { display: flex; -webkit-line-clamp: unset; overflow: visible; padding: 2px 8px; }
  :where(.m-rd) .m-ui .m-dash__riskline { min-height: var(--m-target); padding: 4px 0; }
}
@media (max-width: 720px) { :where(.m-rd) .m-ui .m-dash__riskline { min-height: var(--m-target); } }
/* «Decides tú»: el nombre y qué se decide son UN enlace de dos líneas (44 px en el móvil) */
:where(.m-rd) .m-ui .m-decide__txt > a.m-decide__open { display: grid; justify-items: start; min-width: 0; text-decoration: none; }
:where(.m-rd) .m-ui .m-decide__open .m-decide__nom, :where(.m-rd) .m-ui .m-decide__open .m-decide__que { max-width: 100%; }
:where(.m-rd) .m-ui .m-decide__open .m-decide__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 3px; }
:where(.m-rd) .m-ui .m-decide__open:hover .m-decide__nom { text-decoration-color: currentColor; }
@container pagina (max-width: 560px) {
  :where(.m-rd) .m-ui .m-decide__txt .m-link.m-decide__open { min-height: var(--m-target); align-content: center; }
  :where(.m-rd) .m-ui .m-decide__row { padding: 2px 0; }
}
/* Una barra a 0 es una barra vacía (no un trozo de color) y los bloques no se estiran al alto del vecino */
:where(.m-rd) .m-ui .m-bar__fill--cero { min-width: 0 !important; width: 0 !important; }
:where(.m-rd) .m-ui .m-dash { align-items: start; }
/* «Decides tú»: el nombre y, debajo, qué se decide (en el móvil se recortaba «contrato FV»); el número del bloque, aparte */
:where(.m-rd) .m-ui .m-decide__txt { display: grid; min-width: 0; white-space: normal; overflow: visible; }
:where(.m-rd) .m-ui .m-decide__txt > .m-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-ui .m-decide__que { display: block; font-size: var(--m-fs-14); color: var(--m-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container pagina (max-width: 560px) { :where(.m-rd) .m-ui .m-decide__txt { white-space: normal; } }
/* Con el cajón abierto (portada estrecha), «Decides tú», desde donde se decide, va primero */
:where(.m-rd) .m-shell--cajon .m-dash__block--decide { order: -1; }
/* Seguimiento: «15 · máx. 7» en la columna Días y «Sin recoger · 13 días» en Quién */
:where(.m-rd) .m-dias-max { white-space: nowrap; }
:where(.m-rd) .m-dias-max b { color: var(--m-stale-ink, var(--m-warn-ink)); }
:where(.m-rd) .m-dias-max__u { color: var(--m-text-2); font-size: var(--m-fs-14); }
:where(.m-rd) .m-dias-max__u::before { content: "· "; }
/* Seguimiento: columnas con sitio para «15 · máx. 7» y «Sin recoger · 13 días» (ronda 4: se montaban sobre el importe) */
:where(.m-rd) .m-table--sheet col.m-col-dias { width: 96px; }
:where(.m-rd) .m-table--sheet col.m-col-quien { width: 132px; }
:where(.m-rd) .m-table--sheet col.m-col-cliente { width: 22%; }
:where(.m-rd) .m-table--sheet col.m-col-fase { width: 112px; }
:where(.m-rd) .m-table--sheet td.m-col-quien .m-cell-sub { white-space: normal; overflow-wrap: anywhere; }

/* --- Filas: columnas fijas en toda la página (el chip de fase siempre en la misma x; se leen como una hoja, P10).
   app.js mide el tiempo, la acción, el importe y la cita más anchos de la página y los reserva en todas las filas. */
@container pagina (min-width: 761px) {
  :where(.m-rd) .m-ui .m-row > .m-row__due { min-width: var(--m-col-due, 0); }
  :where(.m-rd) .m-ui .m-row > .m-row__act { min-width: var(--m-col-act, 0); max-width: var(--m-col-act, none); }
  :where(.m-rd) .m-ui .m-row > .m-row__act > .m-btn { min-width: 0; max-width: 100%; }
  :where(.m-rd) .m-ui .m-row__act .m-btn__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(.m-rd) .m-ui .m-row > .m-row__amount { min-width: var(--m-col-amount, 0); }
  :where(.m-rd) .m-ui .m-row > .m-row__cita { min-width: var(--m-col-cita, 6.5em); }
}
@container pagina (min-width: 761px) and (max-width: 1100px) {
  :where(.m-rd) .m-ui .m-row > .m-row__state { min-width: var(--m-col-state, 0); }
}

/* --- Etiquetas: el valor primero («Monday: «Sin tramitar»»), recortado con «…» y sin cambiar de tamaño al pasar el
   ratón (ronda 3: «Sin tra» cortado a lo bruto y, al pasar el ratón, tapaba nombre y población) */
:where(.m-rd) .m-ui .m-tag { min-width: 0; max-width: 100%; }
:where(.m-rd) .m-tag__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-ui .m-tag > .m-i { flex: none; }
:where(.m-rd) .m-ui .m-tags, :where(.m-rd) .m-ui .m-row__sub .m-tags, :where(.m-rd) .m-ui .m-card2 .m-tags { flex: 0 1 auto; min-width: 0; max-width: 100%; }
:where(.m-rd) .m-ui .m-tags .m-tag:first-child { flex: 0 1 auto; }
:where(.m-rd) .m-ui .m-tags .m-tag--quiet { flex: none; }
:where(.m-rd) .m-ui .m-tags .m-tag, :where(.m-rd) .m-ui .m-row__who .m-tag, :where(.m-rd) .m-ui .m-row__next .m-tag { max-width: min(22em, 100%); }
:where(.m-rd) .m-ui .m-drawer__tags .m-tag__t { white-space: normal; overflow: visible; }
/* Tablero a 768 px: la etiqueta no sobresale de la tarjeta y el nombre se recorta con «…» */
:where(.m-rd) .m-ui .m-card2 { overflow: hidden; }
:where(.m-rd) .m-ui .m-card2__tags { min-width: 0; max-width: 100%; }
:where(.m-rd) .m-ui .m-card2__open { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- El resumen de arriba en una línea (con el cajón abierto se partía en dos y todo bajaba); lo que no cabe se
   desplaza dentro de su tira */
:where(.m-rd) .m-shell--cajon .m-page > .m-summary { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
:where(.m-rd) .m-shell--cajon .m-page > .m-summary > .m-summary__item { flex: none; }
/* Los números de la barra lateral reservan su ancho: al vaciarse un número la entrada no pasa de 2 líneas a 1 */
:where(.m-rd) .m-ui .m-nav__count { min-width: 28px; box-sizing: border-box; text-align: center; font-variant-numeric: tabular-nums; }

/* --- Comercial: «Sin firmar · subir el firmado» se toca (abre el selector); «Nuevo presupuesto» como primera fila */
:where(.m-rd) .m-ui .m-tick--subir { position: relative; z-index: 2; min-height: 24px; padding: 0 6px; border-radius: var(--m-r-sm, 4px); box-shadow: inset 0 0 0 1px var(--m-line-strong); background: var(--m-surface); color: var(--m-text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--m-line-strong); text-underline-offset: 3px; }
:where(.m-rd) .m-ui .m-tick--subir:hover { background: var(--m-hover); }
:where(.m-rd) .m-ui .m-tick--subir:focus-within { outline: 2px solid var(--m-ring, var(--m-text)); outline-offset: 2px; }
:where(.m-rd) .m-nuevo-pres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--m-sp-3); }
@media (max-width: 720px), (pointer: coarse) {
  :where(.m-rd) .m-ui .m-tick--subir { min-height: var(--m-target); padding: 0 10px; }
  :where(.m-rd) .m-nuevo-pres .m-btn { min-height: var(--m-target); flex: 1 1 auto; }
}

/* --- Móvil: la ficha «Abrir en grande» se desplaza con el dedo (ronda 3: el contenedor sin alto se tragaba el gesto) */
:where(.m-rd) .m-ui .m-page--ficha .m-drawer__inner, :where(.m-rd) .m-ui .m-page--ficha .m-drawer__inner--grande { height: auto; overflow: visible; overscroll-behavior: auto; }
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-page--ficha .m-drawer__inner { overflow: visible !important; overscroll-behavior: auto !important; height: auto !important; }
  :where(.m-rd) .m-ui .m-page--ficha .m-drawer__scroll { overflow: visible; }
  /* Llamar · WhatsApp · Mapa también en el móvil (ronda 3: en el DOM pero ocultos): iconos de 44 px en la barra */
  :where(.m-rd) .m-ui .m-drawer__bar .m-contact { display: inline-flex !important; width: auto; margin: 0; gap: 0; }
  :where(.m-rd) .m-ui .m-drawer__bar .m-contact .m-btn { width: var(--m-target); min-width: var(--m-target); min-height: var(--m-target); padding: 0; justify-content: center; }
  :where(.m-rd) .m-ui .m-drawer__bar .m-contact .m-contact__t { display: none; }
}

/* --- Sin cobertura: la banda va fija bajo la barra de arriba, encima del contenido: al irse no sube la lista 103 px */
:where(.m-rd) .m-page-wrap { position: relative; }
@media (max-width: 960px) { :where(.m-rd) .m-ui .m-page-wrap > .m-offline { position: sticky; top: var(--m-appbar-h, 56px); z-index: 20; } }

/* --- Técnico: «Metros extra» y «Guardar» no quedan debajo del pie fijo */
:where(.m-rd) .m-shell--tecnico, :where(.m-rd) .m-shell--tecnico .m-tec { scroll-padding-bottom: 220px; }
:where(.m-rd) .m-tec { padding-bottom: 220px; }

/* --- Agenda: nombres en 2 líneas como mucho (no 1 con «…»); la pastilla de estado no ocupa todo el ancho */
:where(.m-rd) .m-ui .m-appt__who { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.m-rd) .m-ui .m-agday .m-status { justify-self: start; width: auto; max-width: 100%; }

/* --- Reseña: «No procede» separado del borde derecho del cajón */
:where(.m-rd) .m-ui .m-todo__act { padding-right: 2px; }

/* --- Buscador: «8 de 81 · Ver los 81» arriba y a la vista; filas de alto fijo; el CL y la fecha nunca se recortan */
:where(.m-rd) .m-palette__cuenta { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin: 0; padding: 4px 12px; background: var(--m-surface); border-bottom: 1px solid var(--m-line); color: var(--m-text-2); font-size: var(--m-fs-14); }
:where(.m-rd) .m-palette__cuenta .m-btn { min-height: 28px; }
@media (max-width: 720px), (pointer: coarse) { :where(.m-rd) .m-palette__cuenta .m-btn { min-height: var(--m-target); } }
:where(.m-rd) .m-ui .m-palette__opt { height: 56px; min-height: 0; grid-template-rows: 26px 22px; overflow: hidden; }
:where(.m-rd) .m-ui .m-palette__l2 { display: flex; align-items: center; gap: 0; min-width: 0; overflow: hidden; white-space: nowrap; }
:where(.m-rd) .m-ui .m-palette__lugar, :where(.m-rd) .m-ui .m-palette__cl, :where(.m-rd) .m-ui .m-palette__l2t, :where(.m-rd) .m-ui .m-palette__l2k { white-space: nowrap; }
:where(.m-rd) .m-ui .m-palette__lugar { flex: 0 1 auto; min-width: 4ch; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-palette__cl { flex: none; }
:where(.m-rd) .m-ui .m-palette__l2t { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-palette__l2k { flex: none; margin-left: 6px; }
:where(.m-rd) .m-ui .m-palette__l2 > .m-tag--dup { flex: none; max-width: none; margin-left: 6px; }
:where(.m-rd) .m-ui .m-palette__cl::before, :where(.m-rd) .m-ui .m-palette__l2t::before { content: "·"; margin: 0 5px; color: var(--m-muted); }
:where(.m-rd) .m-ui .m-palette__l2t:empty { display: none; }
@media (max-width: 720px) {
  /* móvil: 82 px fijos; línea 2, lugar · CL · quién; línea 3, la cita o el plazo y el duplicado */
  :where(.m-rd) .m-ui .m-palette__opt { height: 82px; grid-template-rows: 26px 50px; }
  :where(.m-rd) .m-ui .m-palette__l2 { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 24px 26px; align-items: center; column-gap: 0; }
  :where(.m-rd) .m-ui .m-palette__lugar { max-width: 14ch; }
  :where(.m-rd) .m-ui .m-palette__l2k { grid-row: 2; grid-column: 1 / -1; margin-left: 0; justify-self: start; }
  :where(.m-rd) .m-ui .m-palette__l2 > .m-tag--dup { grid-row: 2; grid-column: 1 / -1; justify-self: end; margin-left: 0; }
  :where(.m-rd) .m-ui .m-palette__l2 > .m-palette__l2k + .m-tag--dup { justify-self: end; }
}

/* La pregunta «¿Es correcto?» marca el campo en ámbar (no es un error: se puede guardar) */
:where(.m-rd) .m-ui .m-field--pregunta .m-input { border-color: var(--m-warn-line); box-shadow: inset 0 0 0 1px var(--m-warn-line); }
/* Con el cajón abierto, las pestañas de las etapas caben en el ancho (ronda 3: «12 Impagos» quedaba fuera, bajo el cajón) */
:where(.m-rd) .m-shell--cajon .m-tabs--etapas { overflow-x: visible; }
:where(.m-rd) .m-shell--cajon .m-tabs--etapas .m-tab--etapa { flex: 1 1 0; min-width: 0; }
:where(.m-rd) .m-shell--cajon .m-tabs--etapas .m-tab__name { white-space: normal; line-height: 1.2; }
:where(.m-rd) .m-shell--cajon .m-tabs--etapas .m-tab__mine { white-space: normal; line-height: 1.2; }
/* «Cobertura de nuevo»: la misma banda, en verde, en el mismo sitio y con el mismo alto (no sube nada al volver la red) */
:where(.m-rd) .m-ui .m-offline--vuelta { --m-ring: var(--m-focus); background: var(--m-done-bg); color: var(--m-done-ink); box-shadow: inset 0 -1px 0 var(--m-done-line); }
:where(.m-rd) .m-ui .m-offline--vuelta .m-i { color: var(--m-done-line); }
:where(.m-rd) .m-ui .m-offline--vuelta .m-offline__sub { color: var(--m-done-ink); }
:where(.m-rd) .m-ui .m-offline--vuelta .m-offline__txt { flex: 1 1 auto; min-width: 0; }
/* Buscador: «Ver los posibles duplicados en Sugerencias» con su objetivo de 24 px (44 al tacto) */
:where(.m-rd) .m-ui .m-palette__foot a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 720px), (pointer: coarse) { :where(.m-rd) .m-ui .m-palette__foot a { min-height: var(--m-target); } }
/* Recorrido: un paso pasado con pendientes, con el reloj y sin el verde de «hecho» */
:where(.m-rd) .m-journey2__paso--pendiente .m-journey2__n { background: var(--m-surface); border-color: var(--m-wait-line, var(--m-line-strong)); color: var(--m-text-2); }
:where(.m-rd) .m-journey2__pend { display: inline-flex; align-items: center; gap: 3px; color: var(--m-text-2); font-size: var(--m-fs-12); font-weight: var(--m-fw-medium); }
:where(.m-rd) .m-ui .m-todo__sub--ok { justify-content: flex-start; }
/* El archivo ya elegido se ve en su campo («… · ya elegido ✓»): no se pide otra vez tras un 409 o un error */
:where(.m-rd) .m-ui .m-file--elegido { border-color: var(--m-done-line); background: var(--m-done-bg); color: var(--m-done-ink); }
:where(.m-rd) .m-ui .m-file--elegido .m-i { color: var(--m-done-line); }
:where(.m-rd) .m-ui .m-file--elegido .m-file__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* «Lo que falta»: una fila con dos o más acciones las pone DEBAJO de su título (ronda 3: «Reseña: sin pedir» y la fila del
   envío se quedaban sin título y «No procede» se salía por la derecha del cajón) */
@container cajon (min-width: 401px) {
  :where(.m-rd) .m-ui .m-todo__row { grid-template-columns: 22px minmax(min(30%, 7.5rem), 1fr) auto; }
  :where(.m-rd) .m-ui .m-todo__row > .m-todo__act { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; min-width: 0; }
  :where(.m-rd) .m-ui .m-todo__row > .m-todo__act > .m-btn { max-width: 100%; min-width: 0; }
  :where(.m-rd) .m-ui .m-todo__act .m-btn__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
:where(.m-rd) .m-ui .m-todo__act { min-width: 0; max-width: 100%; }
/* Seguimiento en estrecho (tarjetas): cada celda mide lo que su texto; un nombre de cinco líneas ya no se monta sobre la
   fase y la siguiente acción (ronda 4: las celdas heredaban el alto fijo de la fila de escritorio) */
@container pagina (max-width: 860px) {
  :where(.m-rd) .m-ui .m-table--sheet tr, :where(.m-rd) .m-ui .m-table--sheet td { height: auto !important; min-height: 0; }
  :where(.m-rd) .m-ui .m-table--sheet tr { grid-template-rows: auto; grid-auto-rows: auto; }
}
/* «Desbloquear: la cita del mar 20 ya ha pasado»: el verbo en negrita y el motivo en texto normal (dos líneas como mucho) */
:where(.m-rd) .m-row__desb { color: var(--m-text); }
:where(.m-rd) .m-row__desb b { font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-nav__hueco { flex: none; display: inline-block; min-width: 28px; height: 1px; margin-left: auto; }
/* Separadores del CSS (ningún texto empieza por «·»): los días en la cabecera del cajón y la pista en la etiqueta */
:where(.m-rd) .m-drawer__dias::before, :where(.m-rd) .m-field__pista::before { content: "· "; color: var(--m-muted); }
/* Segunda línea de la fila: se recorta antes la etiqueta que la población (Fernando T2 sucio: «Valdemo…» y «DOC PARA SU»
   cortados a la vez); la población guarda unos 12 caracteres */
:where(.m-rd) .m-ui .m-row__sub .m-tags { flex: 0 4 auto; }
:where(.m-rd) .m-ui .m-row__sub .m-row__place { flex: 0 1 auto; min-width: min(12ch, 55%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Técnico: el «Hoy» de vuelta (objetivo de 44 px con margen negativo) no se monta sobre el nombre de la visita */
:where(.m-rd) .m-job > .m-crumbs { padding-bottom: 12px; }
/* «Paso 6 · Programación…»: el separador, del CSS (el nombre del paso no empieza por «·») */
:where(.m-rd) .m-row__pasot::before { content: " · "; }
/* Filas apiladas (lista estrecha sin el cajón) también en densidad cómoda y sin marcas: siguiente acción y botón en sus
   propias filas (ronda 4: en la Dirección de Brandon a 768 px, «Subir otra copia» se montaba sobre el texto) */
@container pagina (max-width: 760px) {
  :where(.m-rd) .m-shell.m-ui[data-densidad]:not(.m-shell--cajon) .m-row:not(.m-row--sel):not(.m-row--x) { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "ic who due" "ic state cita" "ic next next" "ic marks marks" "ic act act"; }
  :where(.m-rd) .m-shell.m-ui[data-densidad]:not(.m-shell--cajon) .m-row.m-row--sel.m-row--sel { grid-template-columns: 24px 20px minmax(0, 1fr) auto; grid-template-areas: "chk ic who due" "chk ic state state" "chk ic next next" "chk ic act act"; }
}
/* Clientes: el teléfono no se parte y su aviso («¿Teléfono?», «¿DNI?») va debajo, en su línea */
:where(.m-rd) .m-table--clientes td .m-tag { display: flex; width: max-content; max-width: 100%; margin-top: 2px; }
:where(.m-rd) .m-table--clientes td:nth-child(2), :where(.m-rd) .m-table--clientes td:nth-child(3) { white-space: nowrap; }
/* Sugerencias: cada nombre es una pieza (no se parte entre dos líneas montándose sobre el otro) */
:where(.m-rd) .m-ui .m-sug b { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* =====================================================================
   RONDA 5 · 22/10/2026 (arreglos tras las pruebas de la ronda 4)
   O7 (nada se mueve solo tras actuar), O11 (sin recortes por las columnas fijas) y O2 (la pregunta, en el sitio del
   botón). Sin colores nuevos: todo sale de tokens.css. Va al final para ganar a lo anterior sin tocarlo.
   ===================================================================== */

/* --- O7 · La cabecera fija del cajón no crece con dos botones («Enviar por WhatsApp» y «Registrar el cobro»: +46 px en la
   ronda 4): una sola línea; el primario no se encoge y los secundarios se recortan con «…» (su texto entero, en el title) */
@media (min-width: 721px) {
  :where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions { flex-wrap: nowrap; }
  :where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions > .m-btn { flex: 0 1 auto; min-width: 0; }
  :where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions > .m-btn--primary { flex: 0 0 auto; max-width: 72%; }
  :where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions .m-btn__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* La pregunta («¿registrar la factura igualmente?») en la línea fija, en ámbar (no es un error: se puede seguir) */
:where(.m-rd) .m-ui .m-drawer__hecho > .m-nextup--pregunta { background: var(--m-warn-bg); color: var(--m-warn-ink); box-shadow: inset 3px 0 0 var(--m-warn-line); }

/* --- O7 · La banda de cobertura del cajón mide siempre lo mismo (sin cobertura y «Cobertura de nuevo»): una línea */
:where(.m-rd) .m-ui .m-drawer__offline { box-sizing: border-box; height: 32px; padding-top: 0; padding-bottom: 0; overflow: hidden; }
:where(.m-rd) .m-ui .m-drawer__offline-t { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-drawer__offline-t > .m-i { vertical-align: -3px; margin-right: 6px; }
:where(.m-rd) .m-ui .m-drawer__offline--vuelta { background: var(--m-done-bg); color: var(--m-done-ink); }
:where(.m-rd) .m-ui .m-drawer__offline--vuelta .m-i { color: var(--m-done-line); }

/* --- O7 · Ronda de citas: la línea de los botones existe siempre y con el alto de un botón (al confirmar, «Confirmada») */
:where(.m-rd) .m-ui .m-ronda__act { min-height: var(--m-target-dense); align-items: center; }
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-ronda__act { min-height: var(--m-target); }
@media (max-width: 720px), (pointer: coarse) { :where(.m-rd) .m-ui .m-ronda__act { min-height: var(--m-target); } }
:where(.m-rd) .m-ronda__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--m-done-ink); font-size: var(--m-fs-14); font-weight: var(--m-fw-semibold); }
:where(.m-rd) .m-ronda__ok .m-i { color: var(--m-done-line); }
:where(.m-rd) .m-ronda__ok--falta { color: var(--m-muted); font-weight: var(--m-fw-medium); }

/* --- O11 · Seguimiento general: la columna Fase cabe el chip más largo («5 Legalización», 141 px; ronda 4: 112 px y se leía
   «Facturació») y la de Días, «41 · máx. 30» (105 px en 96) */
:where(.m-rd) .m-table--sheet col.m-col-fase { width: 148px; }
:where(.m-rd) .m-table--sheet col.m-col-dias { width: 112px; }
:where(.m-rd) .m-ui .m-table--sheet td.m-col-fase .m-phase { max-width: 100%; }

/* --- O11 · Botón de la fila: se encoge con «…» dentro de su columna en vez de salirse por la izquierda y montarse sobre la
   fecha (ronda 4: el de Carmen tapaba «Antes del vie 23» 24 px; el de Óscar, «Atascado · 9 días» 13 px). El «⋯» no se
   encoge; si aun así no cabe, lo que sobra sale por la derecha (safe), nunca encima de la columna de al lado */
@container pagina (min-width: 761px) {
  :where(.m-rd) .m-ui .m-row > .m-row__act { justify-content: safe flex-end; min-width: 0; }
  :where(.m-rd) .m-ui .m-row > .m-row__act > .m-btn { flex: 0 1 auto; min-width: 0; }
  :where(.m-rd) .m-ui .m-row > .m-row__act > .m-icon-btn { flex: none; }
  :where(.m-rd) .m-ui .m-row > .m-row__act .m-btn__t, :where(.m-rd) .m-ui .m-row > .m-row__act .m-btn > span:not(.m-sr) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 721px) { :where(.m-rd) .m-ui .m-drawer__hecho > .m-drawer__actions > .m-btn--primary { max-width: 100%; } }

/* --- O11 · «Lo que falta»: una fila con dos o más botones que no caben junto al título pone el título a todo el ancho y los
   botones debajo, en una línea (ronda 4: «Reseña: sin p…» con los botones apilados a la derecha). La fila no cambia de
   forma mientras el cajón está abierto (si después le queda un botón, la línea de botones se queda con su alto) */
:where(.m-rd) .m-ui .m-todo__row.m-todo__row--acc { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "ic t" "ic d" "ic act"; }
:where(.m-rd) .m-ui .m-todo__row.m-todo__row--acc.m-todo__row--pvacc { grid-template-areas: "ic t" "ic d" "ic act" "ic pv"; }
:where(.m-rd) .m-ui .m-todo__row.m-todo__row--acc > .m-todo__act { justify-content: flex-start; flex-wrap: nowrap; margin-top: 4px; min-height: var(--m-target-dense); }
:where(.m-rd) .m-ui .m-todo__row.m-todo__row--acc > .m-todo__act > .m-btn { flex: 0 1 auto; min-width: 0; }

/* --- O10 · Las filas que no se ven no se maquetan ni se pintan hasta que hacen falta (content-visibility): con 418 obras
   la primera maquetación de Mi día costaba 470 ms con la CPU ×4. Ocupan su alto previsto mientras tanto y, una vez
   pintadas, el navegador recuerda el de verdad («auto»); al repintar, cada fila nueva recibe el alto que tenía la de antes
   (app.js, recordarAltos/ponerAltos), si no, la página se movía (O7). Siguen en el árbol de accesibilidad y en Ctrl F;
   lo que lee su texto en las pruebas las pinta antes (proto.todoPintado). */
:where(.m-rd) .m-ui .m-list > li.m-row, :where(.m-rd) .m-ui .m-list > li.m-rastro { content-visibility: auto; contain-intrinsic-size: auto 52px; }
:where(.m-rd) .m-ui[data-densidad="comoda"] .m-list > li.m-row { contain-intrinsic-size: auto 80px; }
@container contenido (max-width: 760px) { :where(.m-rd) .m-ui .m-list > li.m-row { contain-intrinsic-size: auto 200px; } }
/* (ronda 6, O7, R5-08) con la mediana medida de las filas que se ven de esa lista (app.js, estimarAltos), si la hay */
:where(.m-rd) .m-ui .m-list.m-list--cis > li.m-row { contain-intrinsic-size: auto var(--m-cis); }

/* --- O7 · Hojas que hacen la operación con ellas abiertas («Reservar la cita»): el hueco del error (dos líneas), reservado
   desde que se abren (ronda 4: sin cobertura, la hoja crecía 36-67 px y las franjas se movían bajo el dedo). El aviso de
   cobertura cabe en dos líneas a 390 px («Sin cobertura: no se ha reservado. El hueco sigue marcado.») */
:where(.m-rd) .m-dialog.m-dialog--ejecuta .m-dialog__error { box-sizing: border-box; min-height: 72px; }
:where(.m-rd) .m-dialog.m-dialog--ejecuta .m-dialog__error:empty { display: flex; visibility: hidden; }
/* en la hoja inferior del móvil, lo que se desplaza es la lista de huecos: el título, el hueco del error y los botones
   quedan siempre a la vista (con el hueco reservado, «Reservar» quedaba por debajo y el toque desplazaba la hoja 119 px) */
@media (max-width: 600px) {
  :where(.m-rd) .m-dialog--adapt.m-dialog--ejecuta[open] { display: flex; flex-direction: column; overflow: hidden; }
  :where(.m-rd) .m-dialog--adapt.m-dialog--ejecuta > .m-dialog__head, :where(.m-rd) .m-dialog--adapt.m-dialog--ejecuta > .m-dialog__grip, :where(.m-rd) .m-dialog--adapt.m-dialog--ejecuta > .m-dialog__error, :where(.m-rd) .m-dialog--adapt.m-dialog--ejecuta > .m-dialog__actions { flex: none; }
  :where(.m-rd) .m-dialog--adapt.m-dialog--ejecuta > .m-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  :where(.m-rd) .m-dialog--adapt.m-dialog--ejecuta .m-slots { max-height: none; overflow: visible; }
}
/* --- O7 · En el móvil, «Siguiente …» de la cabecera del cajón ocupa siempre dos líneas (ronda 4: pasaba de una a dos al
   cambiar de paso y todo bajaba 27 px): arriba, «Siguiente (Brayan)» y el plazo; debajo, lo que hay que hacer. Lo que no
   cabe acaba en «…» y está entero en el title (el plazo nunca se corta) */
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-drawer__nextline { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label due" "verb verb"; align-items: baseline; column-gap: 8px; row-gap: 2px; box-sizing: border-box; height: calc(2 * 1.35em + 6px); line-height: 1.35; overflow: hidden; white-space: nowrap; }
  :where(.m-rd) .m-ui .m-drawer__nextline > .m-label { grid-area: label; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  :where(.m-rd) .m-ui .m-drawer__nextline > .m-drawer__verb { grid-area: verb; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  :where(.m-rd) .m-ui .m-drawer__nextline > .m-due { grid-area: due; }
}

/* --- O7 · ≤ 960 px el cajón es una página entera: mientras está abierto, la lista de detrás ni se pinta ni se maqueta. Antes
   se pasaba al «modo índice» (la página encogía de 3841 a 1933 px y el navegador recortaba el desplazamiento) y las filas sin
   pintar se quedaban con el alto encogido: al cerrar, la fila volvía hasta 219 px más abajo. Ya era inerte (R2-03). */
@media (max-width: 960px) {
  :where(.m-rd) .m-shell--cajon > .m-main { display: none; }
}

/* --- O1 (comercial, ronda 4): en el móvil, TODAS las cifras del resumen a la vista. Antes era una tira que se desplazaba
   sin pista y «Atascados 115» y «Esperando al cliente 113» quedaban fuera de la pantalla. Ahora, mosaicos: la cifra (y
   «2 vencidos») arriba y el nombre debajo, en dos líneas como mucho; la primera tarjeta sigue por encima de y = 300. */
@container pagina (max-width: 520px) {
  :where(.m-rd) .m-ui .m-page > .m-summary.m-summary--cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); align-items: stretch; gap: 4px; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  :where(.m-rd) .m-ui .m-summary--cifras > .m-summary__item { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "label" "late"; align-items: baseline; align-content: start; column-gap: 4px; row-gap: 0; min-width: 0; min-height: var(--m-target); padding: 4px 6px 5px; }
  :where(.m-rd) .m-ui .m-summary--cifras .m-summary__n { grid-area: n; line-height: 1.15; }
  :where(.m-rd) .m-ui .m-summary--cifras .m-summary__late { grid-area: late; min-width: 0; font-size: var(--m-fs-12); line-height: 1.2; }
  :where(.m-rd) .m-ui .m-summary--cifras .m-summary__label { grid-area: label; font-size: var(--m-fs-12); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
  :where(.m-rd) .m-ui .m-summary--cifras .m-summary__sep { display: none; }
}

/* --- O7/O11 (comercial T4 sucio): «Ver CL-01003 · nombre» en una línea, con «…» y el nombre entero en el title */
:where(.m-rd) .m-ui .m-drawer__tags .m-drawer__verotro { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* --- O11 · A 320 px (lista de ≤ 340 px), la fila dice «Antes de las 14:00» (la frase entera, en el title): con «Hoy antes
   de las 14:00» el nombre se quedaba en «Brun o…» y su enlace en 43 px de ancho */
:where(.m-rd) .m-due__corto { display: none; }
@container pagina (max-width: 340px) {
  :where(.m-rd) .m-ui .m-row .m-due__largo { display: none; }
  :where(.m-rd) .m-ui .m-row .m-due__corto { display: inline; }
}
/* --- O11 (regla 6.6.3) · El motivo de un bloqueo en la fila («Bloqueado: copia rechazada: falta la firma de la página 2») no
   se corta: hasta tres líneas */
:where(.m-rd) .m-ui .m-row .m-row__txt.m-row__why { -webkit-line-clamp: 3; }

/* --- O11 (regla 6.6.3) · Seguimiento general: con Fase y Días más anchas, «Siguiente» tiene 198 px a 1366; un estado largo
   («Bloqueado: copia rechazada: falta la firma de la página 2») cabe en tres líneas en vez de cortarse en la segunda */
:where(.m-rd) .m-ui .m-table--sheet td.m-col-sig .m-cell-2l { -webkit-line-clamp: 3; }

/* =====================================================================
   RONDA 6 · 22/10/2026 (arreglos tras las pruebas de la ronda 5)
   O7 (nada se mueve solo), O11 (etiquetas con 7 letras o enteras), O6 en el móvil y O1. Sin colores nuevos: todo sale de
   tokens.css. Va al final para ganar a lo anterior sin tocarlo.
   ===================================================================== */

/* --- O7 · Mientras el prototipo recoloca la página tras repintar, el navegador no corrige el desplazamiento por su cuenta
   (con las filas sin maquetar, tomaba otra fila de referencia y movía la página 75 px; R5-01) */
html.m-rediseno.m-ancla-propia, html.m-rediseno.m-ancla-propia body { overflow-anchor: none; }
/* --- O7 · En el móvil, con el cajón abierto, el aviso flotante va encima del pie de acciones, mida lo que mida */
@media (max-width: 720px) { html.m-rediseno.m-con-cajon .m-ui.m-toasts { bottom: calc(var(--m-pie-h, 76px) + 8px + env(safe-area-inset-bottom, 0px)); } }

/* --- O11 · Etiquetas de las filas (R5-05: «Sin re…», «Rie…», «¿…»). El texto es la pieza que recorta (un bloque con «…»,
   que se puede medir); una etiqueta corta (≤ 13 letras) va siempre entera y una larga enseña al menos 7 letras (9,5 ch).
   En la segunda línea de la fila lo que cede antes es la población (con su texto entero en el title) */
:where(.m-rd) .m-ui .m-tag { display: inline-flex; align-items: center; }
:where(.m-rd) .m-ui .m-tag > .m-tag__t { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.m-rd) .m-ui .m-tags { display: inline-flex; gap: 4px; min-width: 0; }
:where(.m-rd) .m-ui .m-tags .m-tag.m-tag--entera, :where(.m-rd) .m-ui .m-tag.m-tag--entera { flex: none; min-width: auto; max-width: none; }
:where(.m-rd) .m-ui .m-tag.m-tag--entera > .m-tag__t { overflow: visible; }
:where(.m-rd) .m-ui .m-tags .m-tag.m-tag--larga, :where(.m-rd) .m-ui .m-tag.m-tag--larga { flex: 0 1 auto; min-width: calc(9.5ch + 30px); max-width: 22em; }
:where(.m-rd) .m-ui .m-tags .m-tag.m-tag--mas { flex: none; min-width: auto; }
/* en la línea del lugar (y en la del motivo de «Sin responsable»), las etiquetas no se encogen más que su mínimo: cede el
   texto de al lado (con su texto entero en el title) */
:where(.m-rd) .m-ui .m-row__sub > .m-tags, :where(.m-rd) .m-ui .m-row__next > .m-tags { flex: 0 0 auto; max-width: calc(100% - 38px); }
:where(.m-rd) .m-ui .m-row__sub > .m-row__place { flex: 0 1 auto; min-width: 32px; }
:where(.m-rd) .m-ui .m-row__next > .m-row__txt { flex: 0 1 auto; min-width: 32px; }
:where(.m-rd) .m-ui .m-card2 .m-tags, :where(.m-rd) .m-ui td > .m-tags { max-width: 100%; }
/* La columna del nombre, más ancha que la de la siguiente acción entre 761 y 1.100 px (es donde van las etiquetas), y la de
   la fase reserva solo el chip (el paso no se ve a ese ancho: reservaba 56 px vacíos) */
@container pagina (min-width: 761px) and (max-width: 1100px) {
  :where(.m-rd) .m-ui .m-row { grid-template-columns: 20px minmax(200px, 1.6fr) auto minmax(140px, 1fr) auto auto; }
  :where(.m-rd) .m-ui .m-row.m-row--con-cita { grid-template-columns: 20px minmax(200px, 1.6fr) auto auto minmax(140px, 1fr) auto auto; }
  :where(.m-rd) .m-ui .m-row.m-row--con-importe { grid-template-columns: 20px minmax(200px, 1.6fr) auto minmax(140px, 1fr) auto auto auto; }
  :where(.m-rd) .m-ui .m-row:has(.m-row__check) { grid-template-columns: 24px 20px minmax(200px, 1.6fr) auto minmax(140px, 1fr) auto auto; }
  :where(.m-rd) .m-ui .m-row > .m-row__state { min-width: var(--m-col-chip, var(--m-col-state, 0)); }
}
:where(.m-rd) .m-ui .m-row__sub > .m-tags.m-tags--flex, :where(.m-rd) .m-ui .m-row__next > .m-tags.m-tags--flex { flex: 0 1 auto; min-width: calc(9.5ch + 34px); }
:where(.m-rd) .m-ui .m-row__sub > .m-tags.m-tags--flex.m-tags--mas, :where(.m-rd) .m-ui .m-row__next > .m-tags.m-tags--flex.m-tags--mas { min-width: calc(9.5ch + 64px); }
/* (la suma de factores tiene que llegar a 1: con un solo elemento a .15 solo cedía el 15 % de lo que sobraba) la población
   cede 1 por cada 6 de las etiquetas largas */
:where(.m-rd) .m-ui .m-row__sub > .m-row__place { flex-shrink: 1; }
:where(.m-rd) .m-ui .m-row__sub > .m-tags.m-tags--flex, :where(.m-rd) .m-ui .m-row__next > .m-tags.m-tags--flex { flex-shrink: 6; }

/* --- O7 · Las bandas del sistema (sin cobertura, cobertura de nuevo, cambios de otras personas) van al final del contenido
   y se pegan abajo: aparecen y se van sin mover lo de encima (ronda 5: «Vale» subía la lista 83 px). En el móvil, encima de
   la barra inferior; el aviso flotante, encima de la banda */
:where(.m-rd) .m-ui .m-page-wrap > .m-offline, :where(.m-rd) .m-ui .m-page-wrap > .m-novedades { position: fixed; top: auto; bottom: 16px; left: calc(var(--m-sidebar-w) + var(--m-sp-6)); right: var(--m-sp-6); z-index: 22; margin: 0; border-radius: var(--m-r-lg); box-shadow: 0 6px 18px -8px rgba(17, 21, 18, .45); }
html.m-rediseno.m-con-banda .m-ui .m-page-wrap { padding-bottom: 96px; }
@media (min-width: 961px) {
  html.m-rediseno.m-con-cajon .m-ui .m-page-wrap > .m-offline, html.m-rediseno.m-con-cajon .m-ui .m-page-wrap > .m-novedades { right: calc(var(--m-drawer-w-md) + var(--m-sp-4)); }
  html.m-rediseno.m-con-banda .m-ui.m-toasts { bottom: 104px; }
}
@media (min-width: 1440px) { html.m-rediseno.m-con-cajon .m-ui .m-page-wrap > .m-offline, html.m-rediseno.m-con-cajon .m-ui .m-page-wrap > .m-novedades { right: calc(var(--m-drawer-w) + var(--m-sp-4)); } }
@media (max-width: 960px) {
  :where(.m-rd) .m-ui .m-page-wrap > .m-offline, :where(.m-rd) .m-ui .m-page-wrap > .m-novedades { left: 8px; right: 8px; bottom: calc(var(--m-tabbar-h, 64px) + 8px + env(safe-area-inset-bottom, 0px)); }
  html.m-rediseno.m-con-banda .m-ui.m-toasts { bottom: calc(var(--m-tabbar-h, 64px) + 104px + env(safe-area-inset-bottom, 0px)); }
}
/* el botón flotante sube encima de la banda (no se montan) */
@media (max-width: 960px) { html.m-rediseno.m-con-banda .m-fab { bottom: calc(var(--m-tabbar-h) + 96px); } }

/* --- O11 · El rastro, dos líneas también en el móvil (qué y cuándo / quién y dónde está ahora): ronda 5, hasta cinco líneas
   cortadas; lo que espera a la cobertura, con su nube */
@media (max-width: 720px) { :where(.m-rd) .m-ui .m-rastro__quien { -webkit-line-clamp: 2; } }
:where(.m-rd) .m-ui .m-rastro--cola .m-rastro__ic { color: var(--m-text-2); }

/* --- O6 · Móvil: la primera fila por encima de y = 300 también con el relevo y con un filtro (ronda 5: 302, 381 y 315-335).
   Cuatro casillas por línea, como antes, pero: la cifra de dinero no parte el € («22.616 €» en una línea, algo más
   pequeña), «De relevo» y «Quitar el filtro» van como primeros chips de la tira de paneles (sin casilla ni línea propias) */
@container pagina (max-width: 520px) {
  :where(.m-rd) .m-ui .m-summary--cifras .m-summary__n { white-space: nowrap; }
  :where(.m-rd) .m-ui .m-summary--cifras > .m-summary__item--dinero .m-summary__n { font-size: var(--m-fs-16); }
  :where(.m-rd) .m-ui .m-summary--cifras > [data-testid="resumen-relevo"] { display: none; }
  :where(.m-rd) .m-ui .m-page--midia > .m-filtro-on { display: none; }
}
:where(.m-rd) .m-chip--movil { display: none; }
@container pagina (max-width: 520px) { :where(.m-rd) .m-ui .m-page--midia > .m-chips > .m-chip--movil { display: inline-flex; } :where(.m-rd) .m-ui .m-chip--quitar { border-color: var(--m-text); color: var(--m-text); } }
/* --- O8 · En la hoja de compartir, tocar «Por correo» sin correo válido resalta el aviso que ya lo dice (la hoja no crece) */
:where(.m-rd) .m-ui .m-field__warn--marca { outline: 2px solid var(--m-warn-line); outline-offset: 2px; border-radius: var(--m-r-sm); }
/* --- Accesibilidad (R5-06, axe target-size): «Ver todo», «Quitar el filtro» y «Ver toda la semana» son objetivos de 24 px
   (44 en el móvil), no enlaces de 21 px pegados al texto */
:where(.m-rd) .m-ui .m-filtro-on > a { display: inline-flex; align-items: center; min-height: 24px; padding: 0 6px; margin-left: 2px; border-radius: var(--m-r-sm); }
@media (max-width: 720px), (pointer: coarse) { :where(.m-rd) .m-ui .m-filtro-on > a { min-height: var(--m-target); } :where(.m-rd) .m-ui .m-filtro-on { margin-bottom: 4px; } }
/* --- O11 · «Siguiente: Teresa Aguado Ramos · Subir el contrato firmado» en el móvil: dos líneas (quién / qué), sin «…» */
:where(.m-rd) .m-sig__que::before { content: " · "; }
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-btn--siguiente { height: auto; min-height: var(--m-target); padding-top: 4px; padding-bottom: 4px; text-align: left; justify-content: flex-start; }
  :where(.m-rd) .m-ui .m-btn--siguiente .m-btn__t { white-space: normal; overflow: visible; display: flex; flex-direction: column; line-height: 1.25; }
  :where(.m-rd) .m-ui .m-btn--siguiente .m-sig__que::before { content: none; }
  :where(.m-rd) .m-ui .m-btn--siguiente .m-sig__que { font-weight: var(--m-fw-regular); }
}

/* --- O11 · Buscador en el móvil: el nombre entero (ronda 5: «Mª José Pérez-Ruiz d…»). La fase va como su número (el nombre
   de la fase, para el lector y en el title) y el paso, «15/19» */
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-palette__l1 .m-phase > span[aria-hidden="true"]:not(.m-phase__n) { display: none; }
  :where(.m-rd) .m-ui .m-palette__l1 .m-phase { padding-right: 3px; gap: 0; }
  :where(.m-rd) .m-ui .m-palette__pasop { display: none; }
}
/* --- O7 (Valeria S-T3f) · El campo con error no se corre a la derecha: la barra roja va por dentro (sombra), sin borde ni
   relleno que empujen la etiqueta y el campo 16 px */
:where(.m-rd) .m-ui .m-field.m-field--error { border-left: 0; padding-left: 0; box-shadow: -6px 0 0 -2px var(--m-block-line); }
@media (forced-colors: active) { :where(.m-rd) .m-ui .m-field.m-field--error { box-shadow: none; outline: 2px solid CanvasText; } }
/* (corrección) solo en «Sin responsable» el motivo cede menos que las etiquetas; en las demás filas, la siguiente acción se
   recorta en su columna como siempre */
:where(.m-rd) .m-ui .m-row__next > .m-row__txt { flex-shrink: 1; min-width: 0; }
:where(.m-rd) .m-ui .m-listwrap--razon .m-row__next > .m-row__txt { flex-shrink: 1; min-width: 32px; }
/* (ronda 6, comercial T3) en el móvil la fila mide 150-200 px y su rastro, lo mismo: el texto va arriba, donde estaba el
   nombre (ronda 5: centrado, con 60-100 px en blanco encima del texto) */
@media (max-width: 720px) { :where(.m-rd) .m-ui .m-list > .m-rastro { align-items: start; align-content: start; } }
/* (ronda 6, humo, 6.6.3) en «Sin responsable», a lo estrecho, el motivo con su fecha («Sin recoger desde el dom 4/10») no se
   recorta: si no cabe con las etiquetas, las etiquetas pasan a la línea de abajo (a 320 px el motivo se quedaba en 56 px) */
@container contenido (max-width: 760px) { :where(.m-rd) .m-ui .m-listwrap--razon .m-row__next { flex-wrap: wrap; row-gap: 4px; } }
/* (ronda 6, humo) las direcciones de ejemplo de «Acerca del prototipo» se parten en el móvil (se salían de la página) */
:where(.m-rd) .m-ui .m-page code { overflow-wrap: anywhere; }

/* ======================================================================== RONDA 7 (22/10/2026) ======================== */
/* --- O9 (Valeria T5) · La ronda de citas: cada cita lleva su «Deshacer» en la línea del estado, que mide lo mismo con botón
   o sin él (O7); de relevo, la barra lo dice */
:where(.m-rd) .m-ui .m-ronda__d { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; min-width: 0; line-height: 1.4; }
:where(.m-rd) .m-ui .m-ronda__dt { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
:where(.m-rd) .m-ui .m-ronda__d > .m-btn--undo { flex: none; }
/* en el móvil, la línea del estado (dos líneas de texto caben en 44 px) y la de los botones miden lo mismo en todos los
   estados: «Marcar como confirmada» parte su texto en dos líneas dentro del botón en vez de mandar «Sin respuesta» a otra
   línea (ronda 6: al enviar, la fila crecía 50 px y las de debajo bajaban) */
@media (max-width: 720px), (pointer: coarse) {
  :where(.m-rd) .m-ui .m-ronda__d { min-height: var(--m-target); line-height: 1.3; }
  :where(.m-rd) .m-ui .m-ronda__act { flex-wrap: nowrap; }
  :where(.m-rd) .m-ui .m-ronda__act > .m-btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.15; text-align: center; padding-left: 8px; padding-right: 8px; height: auto; min-height: var(--m-target); }
  :where(.m-rd) .m-ui .m-ronda__act > .m-btn > span { white-space: normal; overflow: visible; }
}
:where(.m-rd) .m-ui .m-drawer__relevo { font-weight: var(--m-fw-medium); color: var(--m-text-2); }
/* --- O9 (Valeria T3) · Las otras salidas del envío de la factura: botones con borde e icono, juntos */
:where(.m-rd) .m-ui .m-alts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
:where(.m-rd) .m-ui .m-alts > .m-btn .m-i { width: 16px; height: 16px; }

/* --- O7 (comercial, juez de la ronda 6) · El estado de la red y los cambios de otros van en el sitio de «Actualizado 09:00 ·
   Actualizar» (cabecera en el escritorio, barra superior en el móvil): una línea de alto fijo que no tapa nada y al cambiar
   no mueve nada (ronda 6: banda fija abajo de 185 px en el móvil que tapaba «Subir el firmado», más un aviso repetido) */
:where(.m-rd) .m-ui .m-netwrap { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 36px; flex: 0 1 auto; }
:where(.m-rd) .m-ui .m-netchip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--m-line-strong); background: var(--m-surface); color: var(--m-text-2); font-size: var(--m-fs-14); font-weight: var(--m-fw-medium); white-space: nowrap; }
:where(.m-rd) .m-ui .m-netchip__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:where(.m-rd) .m-ui .m-netchip .m-i { flex: none; }
:where(.m-rd) .m-ui .m-netchip--off { background: var(--m-warn-bg); color: var(--m-warn-ink); border-color: var(--m-warn-line); }
:where(.m-rd) .m-ui .m-netchip--ok { background: var(--m-done-bg); color: var(--m-done-ink); border-color: var(--m-done-line); }
:where(.m-rd) .m-ui .m-netchip-btn { display: inline-flex; align-items: center; min-height: var(--m-target, 44px); min-width: 44px; padding: 0 2px; margin: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; font: inherit; }
:where(.m-rd) .m-ui .m-netchip-btn:focus-visible { outline: 3px solid var(--m-ring, var(--m-focus)); outline-offset: -2px; }
:where(.m-rd) .m-ui .m-pagehead__tools > .m-netwrap .m-btn { white-space: nowrap; }
:where(.m-rd) .m-ui .m-appbar__red { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
:where(.m-rd) .m-ui .m-appbar .m-netwrap { height: var(--m-appbar-h, 56px); }
:where(.m-rd) .m-ui .m-appbar .m-netchip { max-width: 168px; }
:where(.m-rd) .m-ui .m-appbar .m-netwrap__ok { color: var(--m-on-chrome); min-height: 44px; }
:where(.m-rd) .m-ui .m-appbar .m-netwrap__ok:hover { background: var(--m-chrome-2); color: var(--m-on-dark); }
@media (max-width: 360px) { :where(.m-rd) .m-ui .m-appbar .m-netchip { max-width: 120px; } }
/* --- Buscador (ronda 7, O11): lo que toca se lee antes que la población y que el posible duplicado (ronda 6: «Te toca: ped…»
   con «Majadahonda», la fecha de la instalación y «¿Duplicado? CL-01001» enteros) */
:where(.m-rd) .m-ui .m-palette__l2t { min-width: min(24ch, 46%); }
:where(.m-rd) .m-ui .m-palette__lugar { max-width: 30%; }
:where(.m-rd) .m-ui .m-palette__l2k > span { display: inline-flex; align-items: center; gap: 4px; }
:where(.m-rd) .m-ui .m-palette__l2 > .m-tag--dup { flex: 0 1 auto; min-width: 0; overflow: hidden; }
:where(.m-rd) .m-ui .m-palette__l2 > .m-tag--dup > span[aria-hidden] { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { :where(.m-rd) .m-ui .m-palette__l2t { min-width: 0; } }
/* --- O6 (ronda 7, R6-04) · En el móvil y la tableta, Dirección cambia de panel desde el título de la barra superior; la
   línea «Ver el panel de» de la página desaparece (bajaba la primera fila a 338 px) */
:where(.m-rd) .m-ui .m-appbar__sel { position: relative; display: flex; align-items: center; min-width: 0; min-height: 44px; cursor: pointer; }
:where(.m-rd) .m-ui .m-appbar__select { appearance: none; -webkit-appearance: none; min-width: 0; max-width: 100%; min-height: 44px; margin: 0; padding: 0 24px 0 4px; border: 0; border-radius: var(--m-r-md); background: transparent; color: inherit; font: inherit; font-weight: var(--m-fw-bold); font-size: var(--m-fs-18); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
:where(.m-rd) .m-ui .m-appbar__select option { color: var(--m-text); background: var(--m-surface); font-size: var(--m-fs-16); font-weight: var(--m-fw-regular, 400); }
:where(.m-rd) .m-ui .m-appbar__select:focus-visible { outline: 3px solid var(--m-ring, var(--m-focus)); outline-offset: -3px; }
:where(.m-rd) .m-ui .m-appbar__sel > .m-i { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--m-on-chrome); }
@media (max-width: 960px) { :where(.m-rd) .m-ui [data-testid="ver-panel-de"] { display: none !important; } }/* (ronda 7, O6) en el móvil, el aviso de facturas con error ocupa una línea (ronda 6: la primera fila de Facturación en 308 px) */
@media (max-width: 720px) {
  :where(.m-rd) .m-ui [data-testid="aviso-error-factura"] { align-items: center; padding-top: 0; padding-bottom: 0; min-height: 48px; }
  :where(.m-rd) .m-ui [data-testid="aviso-error-factura"] .m-btn { min-height: 44px; margin-left: auto; }
}/* (ronda 7, O11 R6-03) en una página ancha, el botón de la fila no se encoge: la columna de la acción toma su ancho (hasta
   232 px) y ceden las columnas flexibles (ronda 6: «Marcar como confirmada» de Elena, 31 px sin letras; luego «Marcar como con…») */
@container pagina (min-width: 761px) { :where(.m-rd) .m-ui .m-row > .m-row__act--resp { min-width: min(var(--m-col-act, 0px), 232px); } }
/* (ronda 7, fuzzing) un nombre de 320 letras sin espacios se parte en Presupuestos por cliente (desplazaba la página 4.244 px) */
:where(.m-rd) .m-ui .m-presgroup__t, :where(.m-rd) .m-ui .m-presgroup__t a, :where(.m-rd) .m-ui .m-pres__ref, :where(.m-rd) .m-ui .m-pres__eq { overflow-wrap: anywhere; min-width: 0; }
/* ======================================================================== RONDA 7 · vuelta del juez ===================== */
/* Buscador: «8 de 292 · Ver 50» encima de los resultados y fuera del listbox (axe, aria-required-children) */
:where(.m-rd) .m-ui .m-palette__arriba { position: sticky; top: 0; z-index: 2; }
:where(.m-rd) .m-ui .m-palette__arriba:empty { display: none; }
/* «Ver CL-00050 · …» del cajón: objetivo de 44 px en el móvil (24 px) */
@media (max-width: 720px), (pointer: coarse) { :where(.m-rd) .m-ui .m-link--alto { display: inline-flex; align-items: center; min-height: var(--m-target, 44px); } }
/* El aviso flotante con el cajón abierto entre 961 y 1279 px: el hueco de la lista es estrecho (en 1024 quedaban 258 px y
   el texto salía letra a letra): va abajo a la derecha, sobre el pie del cajón, con un ancho legible */
@media (min-width: 961px) and (max-width: 1279px) {
  html.m-rediseno.m-con-cajon .m-ui.m-toasts { left: auto; right: 16px; transform: none; width: min(440px, calc(100vw - 32px)); max-width: none; }
}
/* Barra superior: el título (o el selector de panel) nunca baja de 7 letras; el estado de la red cede antes */
:where(.m-rd) .m-ui .m-appbar > .m-appbar__title, :where(.m-rd) .m-ui .m-appbar > .m-appbar__sel { flex: 1 1 96px; min-width: 96px; }
:where(.m-rd) .m-ui .m-appbar .m-netchip { max-width: 132px; }
@media (max-width: 360px) { :where(.m-rd) .m-ui .m-appbar .m-netchip { max-width: 100px; } :where(.m-rd) .m-ui .m-appbar > .m-appbar__title, :where(.m-rd) .m-ui .m-appbar > .m-appbar__sel { min-width: 84px; } }
/* Cabecera de escritorio: el estado de la red en corto entre 961 y 1180 px (el largo cortaba el título) */
:where(.m-rd) .m-ui .m-netchip__c { display: none; }
@media (max-width: 1180px) { :where(.m-rd) .m-ui .m-pagehead .m-netchip__l { display: none; } :where(.m-rd) .m-ui .m-pagehead .m-netchip__c { display: inline; } :where(.m-rd) .m-ui .m-pagehead .m-netwrap .m-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* (ronda 7, juez 2) durante un clic en «Ver N más» no hay content-visibility: un doble clic real tiraba la pestaña */
html.m-sin-cv :where(.m-rd) .m-ui *, html.m-sin-cv :where(.m-rd) .m-ui *::before { content-visibility: visible !important; }
/* (ronda 7, juez 2) entre 1.107 y 1.279 px de ventana la columna de la acción se quedaba en 68 px y «Revisar y aprobar» se veía como «R»:
   el nombre y la siguiente acción ceden (el texto entero va en su title) y la acción reserva lo que necesita su botón (hasta 184 px) */
@container pagina (min-width: 761px) and (max-width: 940px) {
  :where(.m-rd) .m-ui .m-row:not(.m-row--con-cita):not(.m-row--con-importe):not(:has(.m-row__check)) { grid-template-columns: 20px minmax(128px, 1.6fr) auto minmax(90px, 1fr) auto auto; }
  :where(.m-rd) .m-ui .m-row:not(.m-row--con-cita):not(.m-row--con-importe) > .m-row__act { min-width: min(var(--m-col-act, 0px), 184px); }
}
/* (ronda 7, juez 2) buscador en el móvil: la población se lee entera (hasta 18 letras) en la primera línea con el CL y la cita; lo que
   toca (y el posible duplicado) pasa a la segunda línea. Antes la población se quedaba en «Le…» o «Co…» (35 px) */
@media (max-width: 720px) {
  :where(.m-rd) .m-ui .m-palette__l2 { grid-template-columns: fit-content(18ch) auto minmax(0, 1fr); grid-template-rows: 24px 26px; }
  :where(.m-rd) .m-ui .m-palette__lugar { grid-row: 1; grid-column: 1; max-width: 18ch; min-width: 0; }
  :where(.m-rd) .m-ui .m-palette__cl { grid-row: 1; grid-column: 2; }
  :where(.m-rd) .m-ui .m-palette__l2k { grid-row: 1; grid-column: 3; margin-left: 8px; min-width: 0; overflow: hidden; justify-self: start; max-width: calc(100% - 8px); }
  :where(.m-rd) .m-ui .m-palette__l2k > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(.m-rd) .m-ui .m-palette__l2t { grid-row: 2; grid-column: 1 / -1; }
  :where(.m-rd) .m-ui .m-palette__l2t::before { content: none; }
  :where(.m-rd) .m-ui .m-palette__l2 > .m-tag--dup { grid-row: 2; grid-column: 1 / -1; justify-self: end; margin-left: 0; background: var(--m-surface); }
  :where(.m-rd) .m-ui .m-palette__l2:has(> .m-tag--dup) .m-palette__l2t { padding-right: 144px; }
}