/* =====================================================================
   DirectyNet — Custom layer over mode.css
   Structure speaks Mode (µ-grid · µ-table · natives · ARIA).
   Look lives here: tokens + our own µ-* attributes for pieces the base
   does not know. Nested-first: the block IS the component.
   ===================================================================== */

/* ---- 1. Tokens ---------------------------------------------------- */
:root {
  --color-bg: #fbfbf9;
  --color-text: #1c1f26;
  --color-muted: #5c6370;
  --color-border: #e3e4df;
  --color-accent: #0f4c81;        /* DirectyNet blue */
  --color-accent-text: #ffffff;
  --color-danger: #b42318;
  --color-danger-text: #ffffff;
  --color-ok: #1f7a4d;
  --color-warn: #b7791f;
  --font-main: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 6px;
  --max-width: 1120px;
  /* Operational tone: a working dashboard, not a landing page. */
  --size-h1: 1.45rem;
  --size-h2: 1.1rem;
  --size-h3: .95rem;
  --size-body: .9375rem;
  --size-small: .8rem;
  --line-height: 1.5;
  --spacing: 1rem;
}

body:has(#theme-toggle:checked) {
  --color-bg: #15181e;
  --color-text: #e7e9ee;
  --color-muted: #9aa3b2;
  --color-border: #2a2f3a;
  --color-accent: #6fa8dc;
  --color-accent-text: #0e1218;
  --color-danger: #f0857a;
  --color-danger-text: #1c0b09;
  --color-ok: #5cc28f;
  --color-warn: #e0b354;
}

body { background: var(--color-bg); }

main {
  /* Inline links must read as links, also inside running text and definition lists. */
  & :is(p, dd, li, small, footer, [µ-value]) a:not([role="button"]) { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  & h1 { letter-spacing: -.015em; margin-bottom: .35rem; }
  & h2 { margin-top: calc(var(--spacing) * 1.75); margin-bottom: .5rem; }
}

/* ---- 2. Header: base structure header > div > (b, label, nav > ul) ---- */
header {
  & [µ-brand] { text-decoration: none; color: var(--color-text); letter-spacing: -.01em; & small { color: var(--color-muted); font-weight: 500; } }
  & nav ul { align-items: center; }
  & nav a { text-decoration: none; color: var(--color-text); }
  & [µ-inline] { display: inline; margin: 0; }
}

/* ---- 3. Buttons: variants as attribute tokens ------------------- */
[µ-button~="ghost"] {
  /* Secondary actions stay quiet until hovered. */
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  &:hover { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
}
[µ-button~="danger"] {
  background: var(--color-danger);
  color: var(--color-danger-text);
}
[µ-button~="small"] {
  font-size: var(--size-small);
  padding: .3rem .7rem;
}

/* ---- 4. Flash / notices ---------------------------------------- */
[µ-flash] {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: var(--spacing);
  &[µ-flash="ok"]    { border-left-color: var(--color-ok); }
  &[µ-flash="error"] { border-left-color: var(--color-danger); }
}

/* ---- 5. Dashboard: status tiles -------------------------------- */
[µ-stat] {
  & h3 { font-size: var(--size-small); color: var(--color-muted); font-weight: 500; margin: 0 0 .25rem; }
  & [µ-value] { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; }
  & small { display: block; color: var(--color-muted); margin-top: .2rem; font-variant-numeric: tabular-nums; }
}

[µ-meter] {
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: .6rem;
  & > span {
    display: block;
    height: 100%;
    background: var(--color-accent);
    width: var(--pct, 0%);
    transition: width .3s ease;
  }
  &[data-level="warn"] > span { background: var(--color-warn); }
  &[data-level="danger"] > span { background: var(--color-danger); }
}

/* ---- 6. States and chips ---------------------------------------- */
[µ-badge] {
  display: inline-block;
  font-size: var(--size-small);
  padding: .1rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  &[µ-badge~="ok"]     { color: var(--color-ok);     border-color: color-mix(in srgb, var(--color-ok) 40%, transparent); }
  &[µ-badge~="warn"]   { color: var(--color-warn);   border-color: color-mix(in srgb, var(--color-warn) 40%, transparent); }
  &[µ-badge~="danger"] { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
  &:empty { display: none; } /* e.g. the password-strength badge before typing */
}

/* ---- 7. Tables: row actions ------------------------------------- */
[µ-table] {
  & table { font-variant-numeric: tabular-nums; }
  & th { font-size: var(--size-small); font-weight: 500; color: var(--color-muted); }
  & th, & td { padding-block: .45rem; }
  & td[data-label="Acciones"] { white-space: nowrap; }
  & tr[data-suspended="true"] td { color: var(--color-muted); }
}

/* ---- 8. Action page (short forms) ------------------------------- */
[µ-page~="narrow"] { max-width: 560px; }
[µ-page~="center"] { margin: 10vh auto 0; max-width: 420px; }

/* "(opcional)" next to its caption: wrap both in a span, since Mode lays label out as a column. */
form label > span small { font-weight: 400; color: var(--color-muted); }

form [µ-hint] { display: block; color: var(--color-muted); font-size: var(--size-small); margin-top: .25rem; }
[µ-actions] { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: var(--spacing); & form { margin: 0; } }

/* One-line form (or a row of fields inside a form): fields side by side, wrapping on narrow screens. */
[µ-row] {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end;
  & label { flex: 1 1 14rem; margin: 0; }
  & button { margin: 0; }
}

/* ---- 9. Dashboard call to action -------------------------------- */
[µ-cta] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  /* A plain row between rules, not a promo box. */
  border-block: 1px solid var(--color-border);
  padding-block: .6rem;
  margin-block: var(--spacing);
  & p { margin: 0; }
}

/* ---- 10. Plans: current one highlighted ------------------------- */
[µ-grid] > article[aria-current="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* ---- 11. Provisional site (body[µ-site]): public landing, roomier than the panel ---- */
body[µ-site] {
  --size-h1: 2.4rem;
  --size-h2: 1.6rem;
  --size-h3: 1.15rem;
  --size-body: 1.05rem;
  --line-height: 1.6;
  --spacing: 1.5rem;
}
[µ-site-mark] {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; margin-right: .4rem;
  border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-accent-text);
  font-size: .95rem;
}
[µ-site-hero] {
  padding-block: 3rem 2rem;
  & small { color: var(--color-accent); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  & h1 { margin-block: .25rem .75rem; letter-spacing: -.02em; }
  & > p { max-width: 38rem; color: var(--color-muted); }
}

/* ---- 12. Signup (Alta 1) ------------------------------------------ */
/* Honeypot: off-screen for people and assistive tech (the wrapper is aria-hidden), present for bots. */
[µ-honeypot] { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The big "your site is live" link on /alta/listo. */
[µ-site-link] { font-size: 1.25rem; font-weight: 600; word-break: break-all; }

/* ---- 13. «Usar este correo en el celular» (P-2) -------------------- */

/* 13a · µ-flash gets «warn» (a paused account). */
[µ-flash="warn"] { border-left-color: var(--color-warn); }

/* 13b · µ-steps: numbered steps to do on another device. The number comes from the list itself (respects start=). */
[µ-steps] {
  list-style: none; padding: 0; margin: var(--spacing) 0;
  & > li {
    position: relative; padding: .85rem 0 .85rem 2.6rem; border-top: 1px solid var(--color-border);
    &:last-child { border-bottom: 1px solid var(--color-border); }
    &::before {
      content: counter(list-item); position: absolute; left: 0; top: .85rem;
      display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
      background: var(--color-accent); color: var(--color-accent-text);
      font-size: var(--size-small); font-weight: 600; font-variant-numeric: tabular-nums;
    }
    & > p { margin: 0 0 .5rem; &:last-child { margin-bottom: 0; } }
    & b { padding: 0 .3em; border-radius: 3px; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); }
    & small { display: block; margin-top: .4rem; color: var(--color-muted); }
  }
}

/* 13c · µ-copyrow: a value the person has to type on another device, plus its Copiar button.
   Without JS the value is still selectable with one tap (user-select: all); the island adds the button. */
[µ-copyrow] {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
  margin-block: .5rem; padding: .6rem .75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg));
  & > span { flex: 1 0 100%; font-size: var(--size-small); color: var(--color-muted); }
  & > code { flex: 1 1 14rem; font-size: 1rem; overflow-wrap: anywhere; user-select: all; @media (max-width: 479.98px) { font-size: .9rem; } }
  & > button {
    flex: 0 0 auto; min-width: 7rem; margin: 0;
    color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    &.copied { background: var(--color-ok); border-color: var(--color-ok); color: var(--color-accent-text); }
    @media (max-width: 479.98px) { flex: 1 0 100%; }
  }
}

/* 13d · µ-send: «Mandame estos pasos» at the foot of the Android and iPhone tabs. */
[µ-send] {
  margin-top: calc(var(--spacing) * 1.5); padding-top: var(--spacing); border-top: 1px solid var(--color-border);
  & h3 { margin-bottom: .25rem; }
  & p { margin: 0 0 .75rem; color: var(--color-muted); }
  & [µ-row] { margin-top: .75rem; }
}

/* 13e · µ-tabs: tabs with a touch-size height (Mode leaves them at ~38 px). */
[µ-tabs] > label { display: flex; align-items: center; min-height: 44px; }

/* 13f · µ-page gets the token «phone»: on screens meant to be used with the phone in hand, every control is 44 px or taller. */
[µ-page~="phone"] :is(button, [role="button"], summary, input:not([type="checkbox"], [type="radio"])) { min-height: 44px; }

/* 13g · A long heading (the full e-mail address is the title of an account) breaks instead of overflowing at 390 px.
   The view adds a break opportunity after the «@»; this is the fallback for anything longer. */
main h1 { overflow-wrap: anywhere; }

/* ---- 14. «En activación» que se explica solo (P-1) ---------------- */
/* 14a · µ-track: «cómo viene tu activación», tres pasos con su estado (hecho / en curso / después).
   El paso en curso es aria-current="step"; hecho y después son class (estado, no diseño). */
[µ-track] {
  list-style: none; padding: 0; margin: var(--spacing) 0;
  & > li {
    position: relative; padding: .9rem 0 .9rem 2.8rem; border-top: 1px solid var(--color-border);
    &:last-child { border-bottom: 1px solid var(--color-border); }
    &::before {
      content: ""; position: absolute; left: 0; top: .95rem; box-sizing: border-box;
      display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
      border: 2px solid var(--color-border); background: var(--color-bg);
      font-size: var(--size-small); font-weight: 700; line-height: 1;
    }
    &.done::before { content: "✓"; background: var(--color-ok); border-color: var(--color-ok); color: var(--color-bg); }
    &[aria-current="step"]::before { content: "●"; border-color: var(--color-warn); color: var(--color-warn); }
    & > h3 { margin: 0 0 .2rem; font-size: 1rem; }
    & > p { margin: 0 0 .5rem; &:last-child { margin-bottom: 0; } }
    &.next { color: var(--color-muted); & > h3 { color: var(--color-muted); } }
  }
}

/* 14b · µ-cta gana «first»: el primer inicio activo (un bloque con título, no la fila de siempre). */
[µ-cta~="first"] {
  display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--color-accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
  & h2 { margin: 0 0 .25rem; }
  & p { margin-bottom: .9rem; }
}

/* 14c · µ-stat gana «warn»: la cifra que le pide algo a la agencia (clientes esperando activación).
   Con [µ-grid] > para ganarle en especificidad al borde de Mode. */
[µ-grid] > [µ-stat~="warn"] { border-top: 3px solid var(--color-warn); }

/* 14d · Un botón dentro de una tabla («Activar» en el admin): sin subrayado de link y con el texto centrado
   cuando 13f lo estira a 44 px. */
[µ-table] [role="button"] { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---- 15. «Cuenta creada» y los formularios de contraseña (P-3) ---- */
/* 15a · µ-flash gana «info»: una nota que no pide nada (la contraseña ya no se muestra). Antes dependía del borde por defecto. */
[µ-flash="info"] { border-left-color: var(--color-accent); }

/* 15b · El medidor de contraseña (isla mail-new): el nivel viaja en data-level y se pinta como un µ-badge. */
[data-strength] {
  &[data-level="danger"] { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
  &[data-level="warn"]   { color: var(--color-warn);   border-color: color-mix(in srgb, var(--color-warn) 40%, transparent); }
  &[data-level="ok"]     { color: var(--color-ok);     border-color: color-mix(in srgb, var(--color-ok) 40%, transparent); }
}

/* 15c · En las pantallas «phone», el link suelto de una fila de acciones («Ver todas las cuentas», «Cancelar») también mide 44 px. */
[µ-page~="phone"] [µ-actions] > a:not([role="button"]) { display: inline-flex; align-items: center; min-height: 44px; }

/* 15d · Un párrafo dentro de un aviso no deja aire debajo del último (la nota «ya no mostramos la contraseña» llevaba un renglón vacío). */
[µ-flash] > p:last-child { margin-bottom: 0; }

/* ---- 16. Pedidos de ayuda y el menú (T1) ----------------------------- */
/* 16a · µ-choice: una pregunta con pocas respuestas largas («¿sobre qué es?»). Cada opción es una tarjeta que se toca entera;
   la marcada se ve por borde y fondo, no solo por el círculo. El radio sigue siendo el nativo (teclado y lector de pantalla). */
[µ-choice] {
  border: 0; padding: 0; margin: 0 0 var(--spacing); min-width: 0;
  & > legend { padding: 0; margin-bottom: .5rem; font-weight: 600; }
  & > label {
    display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: start;
    min-height: 44px; margin: 0 0 .5rem; padding: .75rem 1rem; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    & > input { grid-row: 1 / span 2; align-self: start; margin: .2rem 0 0; }
    & > span { font-weight: 600; color: var(--color-text); }
    & > small { grid-column: 2; color: var(--color-muted); }
    &:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); box-shadow: 0 0 0 1px var(--color-accent); }
    &:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  }
  &[aria-invalid="true"] > label { border-color: var(--color-danger); }
}

/* 16b · µ-reply: lo que hizo la agencia, aparte de las palabras de la persona (acento a la izquierda, como un aviso que se queda). */
[µ-reply] {
  margin-block: var(--spacing); padding: .25rem 1rem .5rem; border-left: 4px solid var(--color-ok);
  background: color-mix(in srgb, var(--color-ok) 6%, var(--color-bg)); border-radius: 0 var(--radius) var(--radius) 0;
  & > h2 { margin-top: .5rem; font-size: 1.1rem; }
  & > p:last-child { margin-bottom: .25rem; }
}

/* 16c · El contador del pedido («123 / 1000»): una cifra, a la derecha de la pista. */
[data-count] { display: block; text-align: right; font-variant-numeric: tabular-nums; }

/* 16d · Menú en el celular: cada ítem mide 44 px y lo de ayuda y cuenta queda debajo de una línea (µ-nav="group" en el <li>). */
@media (max-width: 767.98px) {
  body > header nav {
    & ul { gap: 0; }
    & :is(a, button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    & li[µ-nav="group"] { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--color-border); }
  }
}

/* 16e · Entre 768 y 1023 px el menú de seis a ocho ítems ya no entra con el aire de Mode: se aprieta y no parte las etiquetas. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body > header b { white-space: nowrap; margin-right: .75rem; }
  body > header nav { & ul { gap: .75rem; } & a { white-space: nowrap; } }
}
@media (min-width: 768px) and (max-width: 859.98px) { body > header nav ul { gap: .5rem; } }

/* ---- 17 · «Tu plan», franja de vencimiento, /cuenta, reenvíos (P-6V, brief 033) ---------------------------------- */

/* 17a · Medidor: el color por nivel ya vive en §5 (data-level warn/danger); acá solo se afirma el piso de lectura. */
[µ-meter] { min-width: 4rem; }
[µ-meter][data-level="warn"] > span { background: var(--color-warn); }
[µ-meter][data-level="danger"] > span { background: var(--color-danger); }

/* 17b · «Tu plan»: la tarjeta de uso lleva medidores adentro; los µ-stat anidados dejan de ser tarjetas dentro de tarjetas. */
[µ-page~="phone"] [µ-grid] > article > article[µ-stat] {
  border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0;
  & + article[µ-stat] { border-top: 1px solid var(--color-border); margin-top: 1rem; padding-top: 1rem; }
}
[µ-page~="phone"] [µ-grid] > article > header { margin: 0 0 .5rem; padding: 0; }
[µ-page~="phone"] dl { margin: 0; }
[µ-page~="phone"] dt { color: var(--color-muted); font-size: var(--size-small); margin-top: .75rem; }
[µ-page~="phone"] dd { margin: 0; }

/* 17c · Fila de dos botones: «Cómo renovar» (primario) + «Consultanos» (ghost), mitad y mitad en teléfono. */
[µ-page~="phone"] [µ-actions] > a[role="button"] {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; min-height: 44px; margin: 0;
}
@media (max-width: 767.98px) {
  [µ-page~="phone"] > [µ-actions] > a[role="button"] { flex: 1 1 9rem; }
}

/* 17d · Línea de gracia: aviso sobrio junto a la insignia, no un grito. */
[µ-grace] {
  margin: .25rem 0 0; padding-left: .6rem; border-left: 3px solid var(--color-warn);
  & strong { font-weight: 600; }
}

/* 17e · Franja de vencimiento en el inicio: texto + botón «Cómo renovar» siempre a la vista, dentro de la franja. */
[µ-flash] > p { margin: 0; }
[µ-flash] > [µ-actions] { margin-top: .6rem; }
[µ-flash] [role="button"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; margin: 0;
}
@media (max-width: 767.98px) {
  [µ-flash] > [µ-actions] > [role="button"] { flex: 1 1 100%; }
}

/* 17f · /cuenta: «Modo avanzado» queda al pie, callado y claramente secundario. */
[µ-quiet] {
  margin-top: 2.5rem; padding: 0; padding-top: .25rem; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; box-shadow: none; color: var(--color-muted);
  & > summary { color: var(--color-muted); font-size: var(--size-small); font-weight: 400; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0; }
  & > p { font-size: var(--size-small); margin: .5rem 0 .75rem; }
}

/* 17g · Reenvíos en el detalle del buzón: filas con la dirección y «Quitar» a la derecha; 44 px en teléfono. */
[µ-fwd] {
  & ul { list-style: none; margin: 0 0 var(--spacing); padding: 0; }
  & li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem;
    padding: .4rem 0; border-bottom: 1px solid var(--color-border);
    & > span { min-width: 0; overflow-wrap: anywhere; }
    & form { margin: 0; }
  }
  & [µ-row] { margin-top: .5rem; }
}
@media (max-width: 767.98px) {
  [µ-fwd] :is(button, input:not([type="hidden"])) { min-height: 44px; }
}

/* ---- 18 · Aire bajo el último bloque (V-1, brief 036) ------------------------------------------------------------ */
/* Antes la página terminaba pegada al pie (0 a 16 px según el último margen). Ahora el último bloque no deja margen
   propio y el aire lo da `main`: igual en todas las páginas, a 390 y 1280, claro y oscuro. */
main { padding-bottom: 2.5rem; & > :last-child, & > :last-child > :last-child, & > :last-child > :last-child > :last-child { margin-bottom: 0; } }

/* ---- 19 · Detalle del buzón (µ-page="phone") y página de eliminar (P-45V, brief 037) ---------------------------- */
/* Los controles de 44 px y el ritmo de secciones vienen de §13f y §17; acá solo lo que estas dos páginas piden. */

/* 19a · «Estado»: una sola pieza (insignia + línea de pausa + acción). «Eliminar» aparte, callado, nunca al lado de «Pausar». */
[µ-state] > p { margin: 0 0 .75rem; }
[µ-apart] {
  margin: 1.25rem 0 0; padding-top: .5rem; border-top: 1px solid var(--color-border);
  & a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-danger); font-size: var(--size-small); text-decoration: underline; text-underline-offset: 2px; }
}

/* 19b · Eliminar: las consecuencias como lista de filas; lo irreversible primero y marcado. */
[µ-consequences] {
  list-style: none; margin: .5rem 0 var(--spacing); padding: 0;
  & > li { padding: .65rem 0 .65rem .9rem; border-left: 3px solid var(--color-border); margin-bottom: .5rem; overflow-wrap: anywhere; }
  & > li[µ-first] { border-left-color: var(--color-danger); font-weight: 600; }
  & ul { list-style: none; margin: .4rem 0 0; padding: 0; font-weight: 400; color: var(--color-muted); }
  & ul li { padding: .1rem 0; }
}
/* Acciones de eliminar: «Volver» (ghost) y el botón rojo; en teléfono en columna y a todo el ancho. */
[µ-consequences] ~ [µ-actions], [µ-flash] ~ [µ-actions] {
  & a[role="button"], & form { margin: 0; }
  & button { margin: 0; white-space: normal; overflow-wrap: anywhere; max-width: 100%; } /* la dirección larga baja de línea dentro del botón */
}
@media (max-width: 767.98px) {
  [µ-consequences] ~ [µ-actions], [µ-flash] ~ [µ-actions] {
    flex-direction: column; align-items: stretch;
    & a[role="button"], & form, & button { width: 100%; flex: 0 0 auto; } /* en columna el flex-basis de §17c sería alto, no ancho */
  }
}


/* ---- 20 · Navegación en dos niveles: barra de servicio, selector, franja del plan (P-7V, brief 043; maqueta 039) ------------ */
/* La barra de cuenta es el header de siempre (<nav><ul> con 4–5 ítems); en el celular es el ☰ y lleva solo ese nivel. */
/* 20a · Barra de servicio (segundo nivel): el dominio del servicio + Inicio · Correo · Sitio · Actividad. Vive dentro de <main>. */
main nav[µ-service] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; position: relative;
  margin: 0 0 var(--spacing); border-bottom: 1px solid var(--color-border);
  & > ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; }
  & > ul > li { margin: 0; }
  & > ul > li > a:not([role="button"]) { /* gana a «los enlaces dentro de main se leen como enlaces» (§1) */
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .85rem;
    color: var(--color-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    &:hover { color: var(--color-accent); }
    &[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600; }
  }
  @media (max-width: 767.98px) {
    & > ul { flex: 1 1 100%; gap: 0; }
    & > ul > li { flex: 1 1 0; min-width: 0; }
    & > ul > li > a:not([role="button"]) { width: 100%; padding: 0 .25rem; font-size: var(--size-small); }
  }
}
/* 20b · El dominio del servicio: texto fijo con un servicio, selector con dos o más. */
[µ-chip] {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; font-size: var(--size-small); color: var(--color-text);
  &::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-ok); flex: none; }
  &[data-only] { @media (min-width: 768px) { display: none; } }
}
main details[µ-switch] {
  position: static; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  & > summary {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--size-small); color: var(--color-text);
    &::-webkit-details-marker { display: none; }
    &::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-ok); flex: none; }
    &::after { content: "▾"; color: var(--color-accent); font-size: .8em; }
  }
  &[open] > summary::after { content: "▴"; }
  & > ul {
    list-style: none; margin: 0; padding: .25rem; display: grid; gap: 0;
    border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg);
    @media (min-width: 768px) { position: absolute; top: calc(100% - .25rem); left: 0; z-index: 20; min-width: 22rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 14%, transparent); }
    @media (max-width: 767.98px) { flex: 1 1 100%; margin: 0 0 .5rem; }
    & li { margin: 0; }
    & li > a:not([role="button"]) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .75rem; align-items: center; min-height: 44px; padding: .4rem .75rem; text-decoration: none; color: var(--color-text); border-radius: var(--radius); }
    & li > a:not([role="button"]):hover { background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg)); }
    & li > a[aria-current="true"] { font-weight: 600; background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)); }
    & small { color: var(--color-muted); font-weight: 400; }
    & li:last-child > a:not([role="button"]) { border-top: 1px solid var(--color-border); border-radius: 0; margin-top: .25rem; color: var(--color-accent); }
  }
}
/* 20c · Franja comercial dentro del servicio: una línea mientras todo está bien; cuando algo vence, la franja de §17e. */
[µ-planline] { margin: 0 0 var(--spacing); padding: .25rem 0 .75rem; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--size-small); & strong { color: var(--color-text); font-weight: 600; } & a { display: inline-flex; align-items: center; min-height: 44px; } }
/* 20d · «Mis servicios»: la fila dice su tipo. */
[µ-kinds] { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 767.98px) { [µ-table] a[role="button"] { min-height: 44px; } }

/* 20e · ☰ del celular: con un servicio, su nombre ya está sobre las pestañas; el ítem solo se muestra donde no hay pestañas (/plan, /cuenta, /ayuda). */
@media (max-width: 767.98px) {
  body:has(main nav[µ-service]) header nav li[µ-nav="service"] { display: none; }
}

/* 20f · Entre 768 y 1023 px la barra de cuenta del cliente ya no necesita el apretón de §16e (4 ítems + Salir, no 8): vuelve a respirar.
   El admin (7 ítems o más) conserva el apretón. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body > header nav ul:not(:has(> li:nth-child(7))) { gap: 1.5rem; }
}

/* ---- 21 · Lista de cuentas de correo como página de teléfono (V-2, brief 045) ------------------------------------ */
/* µ-page="phone" (§13f) ya pone los controles a 44 px y la fila de acciones (§17c) los parte bien. Faltaban dos cosas a 390 px:
   una dirección larga sin cortes empujaba la tarjeta fuera de la pantalla, y tres insignias en la celda de estado se pisaban. */
@media (max-width: 767.98px) { [µ-page~="phone"] [µ-table] td > a > strong { overflow-wrap: anywhere; } }  /* V-4: antes valía a todo ancho y a 768 partía «Panadería» letra por letra */
[µ-chips] { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  @media (max-width: 767.98px) { justify-content: flex-end; } }
[µ-page~="phone"] > [µ-actions] + [µ-table] { margin-top: var(--spacing); }

/* ---- 22 · El admin en el teléfono (V-3, brief 048) -------------------------------------------------------------- */
/* Silvio activa clientes y contesta pedidos desde el celular durante la migración. Las tablas ya se pliegan en tarjetas
   (Mode: µ-table="collapsed" + data-label); lo que faltaba es que midan como tarjetas de teléfono. */

/* 22a · Texto largo (dominios, mails, la dirección del link de invitación) corta en vez de empujar la página. */
[µ-page~="phone"] :is(dd, p, blockquote) { overflow-wrap: anywhere; }   /* V-4: `code` salió (a escritorio partía «mailbox.create» letra por letra); la celda µ-break lo cubre */

@media (max-width: 767.98px) {
  /* 22b · Las cuatro cifras del inicio en 2×2, con el link de cada una a 44 px. */
  [µ-page~="phone"] > [µ-grid="4-col"] { grid-template-columns: 1fr 1fr; gap: .75rem; }
  [µ-page~="phone"] > [µ-grid="4-col"] > article { padding: .75rem; min-width: 0; }
  [µ-page~="phone"] > [µ-grid="4-col"] [µ-stat] small a { display: inline-flex; align-items: center; min-height: 44px; }

  /* 22c · Tarjetas: la primera celda es el título (sin etiqueta), el resto, etiqueta a un lado y dato al otro. */
  [µ-page~="phone"] [µ-table="collapsed"] {
    & tr { padding: .5rem .75rem; }
    & td { padding-block: .15rem; min-width: 0; text-align: right; align-items: baseline; overflow-wrap: anywhere; }
    & td::before { flex: none; }   /* la etiqueta no se aprieta: es el dato el que corta */
    & td:first-child {
      display: block; text-align: left; font-weight: 600; margin-bottom: .25rem; padding-bottom: .25rem;
      border-bottom: 1px solid var(--color-border);
      &::before { display: none; }
    }
    /* Todo link suelto de una celda («Renovar», el sitio, el cliente, #102) es un blanco de 44 px. */
    & td > a:only-child:not([role="button"]) { display: inline-flex; align-items: center; min-height: 44px; }
    & td:first-child > a:only-child:not([role="button"]) { min-height: 44px; }
    /* La acción de la fila (Activar) ocupa el ancho entero. */
    & td > a[role="button"] { flex: 1 0 100%; }
    & td:has(> a[role="button"]:only-child) { display: block; &::before { display: none; } }
    & td:has(> a[role="button"]:only-child) > a { display: flex; width: 100%; }
    /* Estado + «Activar» en la misma celda: la insignia arriba, el botón abajo. */
    & td:has(> span + a[role="button"]) { flex-wrap: wrap; row-gap: .5rem; }
  }
  [µ-page~="phone"] > [µ-actions] + p, [µ-page~="phone"] > p + [µ-actions] { margin-top: 0; }

  /* 22d · Radios y casillas de los formularios: la etiqueta entera mide 44 px. */
  [µ-page~="phone"] label:has(> input:is([type="radio"], [type="checkbox"])) { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
}

/* ---- 23 · La fecha en dos líneas, «Vence» sin cortar y el detalle del cliente (V-4, brief 051) ---------------------- */
/* 23a · µ-stamp (DATE-1): <time µ-stamp><span>16 oct</span><small>18:50</small></time>. La fecha arriba, la hora abajo, cifras de
   ancho fijo; el <span> reserva el ancho de «12 oct 25» para que una columna de sellos se lea como columna. Hoy no trae <span>:
   la hora sola, en una línea. */
[µ-stamp] {
  display: inline-flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap;
  & > span { min-width: 9ch; }
  & > small { color: var(--color-muted); }
}
@media (max-width: 767.98px) {
  /* En una tarjeta cada celda es una fila: el sello va pegado al borde, como los demás datos. */
  [µ-page~="phone"] [µ-table="collapsed"] td:not(:first-child) [µ-stamp] { align-items: flex-end; & > span { min-width: 0; } }
}

/* 23b · Una fecha de tabla no se parte («12 feb 27» no puede quedar en dos renglones). */
[µ-nowrap] { white-space: nowrap; }
/* Lo contrario, para lo que no tiene dónde cortar (un dominio largo): corta en cualquier lado antes que ensanchar la tabla. */
[µ-break] { overflow-wrap: anywhere; }

/* 23c · «Copiar» dentro de una celda de tabla (el link de invitación): sin la caja de §13c, la etiqueta ya la pone la celda. */
[µ-table] [µ-copyrow] {
  margin: 0; padding: 0; border: 0; background: none; gap: .25rem .5rem;
  & > span { display: none; }
  & > code { flex: 1 1 12rem; font-size: var(--size-small); }
  & > button { min-width: 0; }
}

/* 23d · Detalle del cliente: las dos columnas pueden encogerse (un dominio largo no las ensancha) y las listas cortan como los párrafos. */
[µ-page~="phone"] [µ-grid] > * { min-width: 0; }
[µ-page~="phone"] li { overflow-wrap: anywhere; }

/* ---- 24 · Registro del cliente como tarjetas de teléfono (V-5, brief 053) ------------------------------------------ */
/* Lo demás sale de §13f, §22c y §23. Una sola cosa propia: en el título de una tarjeta, la hora sola («hoy», sin fecha) se lee como
   título, no como la letra chica de una fecha que no está. */
@media (max-width: 767.98px) {
  [µ-page~="phone"] [µ-table="collapsed"] td:first-child [µ-stamp] > small:only-child { color: inherit; font-size: inherit; }
}


/* ---- 25 · Personas en la cuenta (F5-M/F5-V, briefs 055/057) --------------------------------------------------------- */
/* Atributos: `table[µ-people]` (tabla de personas; `tr[data-inactive="true"]` = desactivada), `ul[µ-can]` / `ul[µ-can="no"]` (lo que puede / no
   puede), `div[µ-message]` (mensaje para pasar), `ul[µ-people-admin]` (lista del admin). Las acciones usan `[µ-actions]` de §17c. */
table[µ-people] {
  & td > small { display: block; font-weight: 400; color: var(--color-muted); overflow-wrap: anywhere; }
  & tr[data-inactive="true"] td { color: var(--color-muted); }
  & td:empty { display: none; }
  & td > strong + em { font-style: normal; font-weight: 400; font-size: var(--size-small); color: var(--color-muted); }
  @media (min-width: 768px) { & td:first-child { min-width: 17rem; } }
  & td > [µ-actions] { margin: 0; gap: .5rem; flex-wrap: wrap; justify-content: flex-start;
    & > form { margin: 0; } }
  @media (max-width: 767.98px) {
    & td:has(> [µ-actions]) { display: block; margin-top: .35rem; &::before { display: none; } }
    & td > [µ-actions] > * { flex: 1 1 9rem; }
    & td > [µ-actions] > form > button, & td > [µ-actions] > a { width: 100%; }
  }
}
/* 25b · Qué puede / qué no puede una persona: dos listas cortas, con la marca al principio (no solo con color). */
[µ-can] { list-style: none; padding: 0; margin: 0 0 var(--spacing);
  & > li { position: relative; padding-left: 1.6rem; margin: .25rem 0; }
  & > li::before { content: "✓"; position: absolute; left: 0; color: var(--color-ok); font-weight: 700; }
  &[µ-can="no"] > li::before { content: "–"; color: var(--color-muted); }
}
/* 25c · El mensaje que el dueño le pasa a la persona: una caja con el texto entero y un solo botón. */
[µ-message] { margin-block: var(--spacing); padding: .9rem 1rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent);
  border-radius: var(--radius); background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg));
  & > p { margin: 0 0 .75rem; overflow-wrap: anywhere; }
  & > button { margin: 0; } }
/* 25e · Lista de personas en la ficha del cliente (admin): una persona por fila, las acciones debajo. */
[µ-people-admin] { list-style: none; padding: 0; margin: 0 0 var(--spacing);
  & > li { padding: .65rem 0; border-top: 1px solid var(--color-border); overflow-wrap: anywhere; &:first-child { border-top: 0; }
    & > small { display: block; color: var(--color-muted); }
    & > [µ-actions] { margin: .5rem 0 0; gap: .5rem; flex-wrap: wrap; & > form { margin: 0; } }
    &[data-inactive="true"] > strong { color: var(--color-muted); } }
  @media (max-width: 767.98px) { & > li > [µ-actions] > * { flex: 1 1 9rem; } & > li > [µ-actions] button { width: 100%; } } }

/* 25f · Una página `div[µ-page]` cuyo primer elemento es el título (sin «← volver» arriba) queda pegada al encabezado: el aire que
   `section` trae de Mode (`padding-block`) acá no está. Solo en ese caso, para no mover las páginas que empiezan con el enlace. */
main > div[µ-page] > h1:first-child { margin-top: calc(var(--spacing) * 1.35); }