/* ═══ EL ESCRITORIO: un solo escalón, a partir de 1024 px ══════════════════
 *
 * Por qué existe esta hoja (auditoría del revisor de diseño, 2026-10-10;
 * Victor: «el escritorio se ha quedado pobre, muchos huecos»). Cada pantalla
 * se ponía su propio ancho —`.sol-wrap` 720, `.est-pagina` 1180, `.dir-wrap`
 * 1120…— y el escritorio se arreglaba con parches sueltos a 769, 900, 1200 y
 * 1339 px. No había un sistema, y por eso cada pantalla tenía huecos distintos.
 *
 * La regla, a partir de ahora:
 *   - Por debajo de 1024 px es móvil y tableta, y AQUÍ NO SE TOCA. Todo lo que
 *     cambia el aspecto vive dentro de `@media (min-width: 1024px)`. Lo poco que
 *     va fuera son elementos NUEVOS que en el móvil no existían (y que allí se
 *     esconden), para que el teléfono se quede exactamente como estaba.
 *   - Tres tipos de pantalla, con sus medidas en tokens:
 *       lectura o formulario → 720 px a la izquierda, con lateral opcional;
 *       lista                → el 100 % del contenedor, como una tabla;
 *       panel                → rejilla de hasta 1280 px.
 *     Una pantalla declara su tipo con `{% block pantalla %}` (base.html lo
 *     pone en la caja del contenido). En el bloque 1 solo lo declaran la cola y
 *     la ficha; las del local y del Área, en el bloque 2. Dentro de una
 *     pantalla con tipo, `.sol-wrap` (la columna de 720 CENTRADA del móvil)
 *     deja de mandar: a 1440 eran 196 px de margen por lado, y a 1920, 404.
 *   - Por encima de 1024 se puede acotar otro tramo (1200, donde caben dos
 *     columnas de verdad), pero nunca por debajo de 1024.
 *
 * Las piezas que reutilizan los bloques 3 y 4 (bloque 2, 2026-10-10):
 *
 *   TABLA-LISTA   `.tabla-lista` envuelve una o varias `.sol-lista` de
 *     tarjetas y las pinta como filas de una tabla; `.tl-cabecera` (con
 *     `solo-escritorio`) es la fila de títulos y `.tl-grupo` un subtítulo
 *     dentro de la tabla. La tarjeta del móvil NO cambia de HTML: sus cajas
 *     de cabecera y pie pasan a `display: contents` y cada pieza se coloca en
 *     su columna. Cada lista dice sus columnas en `--tl-columnas` y dónde va
 *     cada pieza (ver Mis incidencias, Equipos y Personal, abajo). Lo que el
 *     móvil no enseña y la tabla sí (el local de cada fila en un grupo por
 *     local, el número suelto) va en un `<span>` con `solo-escritorio`.
 *
 *   LECTURA CON LATERAL  `.con-lado` = `.pantalla-principal` + `.pantalla-lado`.
 *     A partir de 1200, 720 a la izquierda y el lateral a su derecha; de 1024
 *     a 1199, el lateral debajo. El lateral es ayuda para lo de la izquierda
 *     (qué pasa al enviar, a quién llamar, lo que ya está abierto), nunca
 *     relleno; en el móvil no existe (`solo-escritorio`). Dos hijos y no la
 *     rejilla de `.sol-dos`, que estira las filas de la izquierda cuando el
 *     lateral es más alto que ellas.
 *
 *   MAESTRO-DETALLE  `.maestro-detalle` = `.md-maestro` (la lista) +
 *     `.md-detalle` (lo abierto). A partir de 1200, en una sola pantalla: la
 *     lista a la izquierda, fija y con su propio scroll, y lo abierto a la
 *     derecha. Por debajo, cada cosa en su página como en el móvil (la lista
 *     de una página de detalle lleva `solo-escritorio`). Lo usa Mensajes.
 *
 *   REJILLA  `.rejilla-fichas` (o la de Ayuda, `.ayuda-fichas`): tarjetas
 *     en `auto-fill`, cada una de su alto (`align-items: start`, sin estirar
 *     la fila a la más alta) y sin una huérfana con cuatro.
 *   - La cabecera de página es la misma en todas: título de 28 px, sin el
 *     troquel de puntos, subtítulo compacto y acciones a la derecha, y entera
 *     por debajo de 90 px.
 *
 * Va la ÚLTIMA en el <head> (después de las hojas de cada página) para que, a
 * igualdad de selector, gane sin tener que subir la especificidad. */

:root {
  --pantalla-lectura: 720px;
  /* 360 y no los 320 del bloque 1: los datos de la ficha del local (proveedor
     «CONWAY THE CONVENIENCE COMPANY S.L.U», un pedido de Yurest) partían en
     tres líneas, y la ficha ya tenía 440 antes de este sistema. */
  --pantalla-lateral: 360px;
  --pantalla-panel: 1280px;
  --pantalla-hueco: 32px;
  --cabecera-titulo: 24px;   /* «titulo» de la guía: Epicene 24/30 */
  /* La lista de un maestro-detalle: cabe un título y dos líneas de extracto. */
  --pantalla-maestro: 380px;
}

/* ── Elementos nuevos que el móvil no tiene ──────────────────────────────── */

/* El botón de tema de la tarjeta de usuario y los botones de estado de la
   cabecera de la ficha solo existen en el escritorio; en el móvil siguen el
   selector de tres y la caja «Estado» del lateral, como siempre. */
.tema-ciclo,
.ficha-estado-cabecera { display: none; }

/* El rótulo de grupo del menú es ahora un botón (para plegar en el escritorio).
   En el móvil tiene que seguir pareciendo el rótulo de siempre: sin fondo, sin
   borde, sin flecha y sin cursor de mano. */
.app-nav .nav-grupo-boton {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  background: none; border: 0; margin: 0;
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: default;
}
.nav-grupo-boton .nav-grupo-flecha { display: none; }
/* Los dos envoltorios nuevos no cambian nada en el móvil: el grupo y su lista
   dejan el mismo hueco de 2 px que había entre rótulo y entradas, y el marco
   del menú hace de hijo flexible de la barra como antes hacía `.app-nav` (sin
   esto el menú dejaba de desplazarse dentro del cajón). */
.nav-grupo,
.nav-grupo-items { display: flex; flex-direction: column; gap: 2px; }
.app-nav-marco { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }


@media (min-width: 1024px) {

  /* ── Los tres tipos de pantalla ─────────────────────────────────────────── */
  .pantalla-lectura { max-width: var(--pantalla-lectura); margin-right: auto; }
  /* Con lateral, la pantalla se ensancha y la rejilla va DENTRO (`.con-lado`,
     abajo): en la caja del contenido también vive el «← Volver», que no es
     ni de una columna ni de la otra. */
  .pantalla-lectura.con-lateral {
    max-width: calc(var(--pantalla-lectura) + var(--pantalla-hueco) + var(--pantalla-lateral));
  }
  .pantalla-lista { width: 100%; max-width: none; }
  .pantalla-panel { max-width: var(--pantalla-panel); }
  /* La columna del móvil deja de mandar en cuanto la pantalla tiene tipo:
     manda el tipo. Sin esto, todo lo del local seguía en 720 centrado. */
  .aparece[class*="pantalla-"] .sol-wrap { max-width: none; margin: 0; }

  /* ── Lectura con lateral (ver arriba) ──────────────────────────────────── */
  .con-lado > .pantalla-lado { margin-top: var(--space-6); }
  .con-lado > .pantalla-principal,
  .con-lado > .pantalla-lado { min-width: 0; max-width: var(--pantalla-lectura); }
  .pantalla-lado { display: flex; flex-direction: column; gap: var(--space-4); }
  .lado-caja {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    font-size: var(--text-sm);
    color: var(--color-fg-secondary);
    line-height: 1.45;
  }
  .lado-caja > h2 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: var(--color-fg);
  }
  .lado-caja > h2 .icon { width: 16px; height: 16px; color: var(--color-fg-muted); flex: none; }
  .lado-caja p { margin: 0 0 var(--space-2); }
  .lado-caja p:last-child { margin-bottom: 0; }
  .lado-caja ol, .lado-caja ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
  /* Las filas que se pulsan (una incidencia, un teléfono): la fila entera, y
     con el mínimo del ratón. */
  .lado-lista { list-style: none; padding: 0 !important; gap: 0 !important; }
  .lado-lista li + li { border-top: 1px solid var(--color-border); }
  .lado-fila {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--toque-raton); padding: 6px 0;
    color: var(--color-fg); text-decoration: none; min-width: 0;
  }
  .lado-fila:hover { color: var(--color-accent); }
  .lado-fila > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lado-fila .lado-num { flex: none; min-width: 3.6em; font-family: var(--font-mono); color: var(--color-fg-tertiary); font-size: var(--text-xs); }
  .lado-fila .lado-tel { flex: none; margin-left: auto; font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--color-accent); }
  .lado-pie { margin-top: var(--space-2) !important; font-size: var(--text-xs); color: var(--color-fg-tertiary); }
  .lado-pie a { color: var(--color-accent); }

  /* ── Tabla-lista (ver arriba) ──────────────────────────────────────────── */
  .tabla-lista {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-strong);
    overflow: hidden;
    margin-bottom: var(--space-5);
  }
  .tabla-lista .tl-cabecera,
  .tabla-lista .sol-tarjeta {
    display: grid;
    grid-template-columns: var(--tl-columnas);
    column-gap: 16px;
    align-items: center;
  }
  .tabla-lista .tl-cabecera {
    padding: 8px 16px 8px 19px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-fg-tertiary);
  }
  .tabla-lista .sol-lista { gap: 0; }
  /* La tarjeta, de fila: sin radio, sin sombra y sin el «apretón» del dedo.
     La raya de color de la izquierda se queda: dice lo mismo que en el móvil
     (urgente, te piden algo). */
  .tabla-lista .sol-tarjeta {
    border: 0; border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    border-radius: 0; box-shadow: none;
    padding: 8px 16px;
    min-height: 52px;
    row-gap: 2px;
    /* Las filas de la rejilla, juntas y centradas en la fila de la tabla: si
       se estiran al alto mínimo, una pieza de una línea sube arriba y las que
       ocupan las dos se quedan en medio, desalineadas. */
    align-content: center;
  }
  .tabla-lista .sol-tarjeta.urgente { border-left-color: var(--color-danger); }
  .tabla-lista .sol-tarjeta.pide-respuesta { border-left-color: var(--aviso); }
  .tabla-lista .sol-lista > .sol-tarjeta:last-child { border-bottom: 0; }
  .tabla-lista .sol-lista + .tl-grupo,
  .tabla-lista .sol-lista + .sol-lista { border-top: 1px solid var(--color-border); margin-top: 0; }
  .tabla-lista .sol-tarjeta:hover { box-shadow: none; background: var(--color-surface-muted); }
  .tabla-lista .sol-tarjeta:active { transform: none; }
  .tabla-lista .sol-tarjeta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .tabla-lista .fila-alta,
  .tabla-lista .card-cabecera,
  .tabla-lista .card-pie { display: contents; }
  .tabla-lista .badge { justify-self: start; white-space: normal; }
  .tabla-lista .tl-sep { display: none; }
  .tabla-lista .tl-grupo {
    margin: 0;
    padding: 6px 16px 6px 19px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: var(--color-fg-secondary);
  }
  .tabla-lista .sol-tarjeta .asunto { font-size: var(--text-sm); }
  .tabla-lista .sol-tarjeta .pie { margin: 0; }
  .tabla-lista + .est-titulo,
  .tabla-lista + .mis-grupo { margin-top: var(--space-5); }
  .tabla-lista .est-titulo { margin: 0; }

  /* ── Maestro-detalle (ver arriba). Por debajo de 1200, la lista que va en
     una página de detalle no se pinta: como en el móvil. ── */
  .md-maestro.solo-escritorio { display: none; }
  .md-lista-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: var(--space-3);
  }
  .md-lista-cabecera .msj-resumen { margin: 0; }
  .md-lista-cabecera .btn { min-height: var(--toque-raton); }
  .md-vacio { display: none; }
  .md-lista-cabecera.md-solo-ancho { display: none; }

  /* ── Rejilla de fichas: cada una de su alto ───────────────────────────── */
  .rejilla-fichas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
  }

  /* ── La cabecera de página, igual en todas ───────────────────────────────
     Medida en la auditoría: a 1440 la cabecera de la ficha se comía 300 px
     (título de 42, troquel y subtítulo a 70 px de distancia) y la de la cola
     más de 200, antes de enseñar un solo ticket. */
  .page-header {
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 18px;
  }
  /* Sin los márgenes por defecto del navegador: 0,67 em arriba y abajo del
     <h1> y 12 px bajo el <p> eran 50 px de aire dentro de la cabecera. */
  .page-title {
    font-size: var(--cabecera-titulo);
    line-height: 30px;
    padding-bottom: 0;
    margin: 0;
    letter-spacing: 0;
    /* Dos líneas como mucho: un asunto largo (/mis/7) hacía tres y la
       cabecera pasaba de 120 px. Entero sigue en la pestaña del navegador. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* El bloque del título encoge (y su subtítulo parte línea) antes que echar
     las acciones a una fila nueva: a 1024 «Abrir para un equipo» y «Volver»
     bajaban debajo del subtítulo y la cabecera medía 103. */
  .page-header > :first-child { flex: 1 1 0; min-width: 0; }
  /* El troquel es la firma de la casa, pero en el escritorio son 20 px por
     pantalla para un adorno. En el móvil sigue donde estaba. */
  .page-title::after { display: none; }
  /* El saludo de Hoy es el «titulo-xl» de la guía: 32/38, una vez. */
  .hoy-persona .page-title { font-size: 32px; line-height: 38px; }
  .page-subtitle {
    font-size: var(--text-sm);
    line-height: 1.4;
    margin: 4px 0 0;
  }
  .volver-arriba { min-height: var(--toque-raton); margin-bottom: 4px; }

  /* ── La barra lateral ──────────────────────────────────────────────────── */

  /* Grupos plegables. Plegar solo pasa aquí: en el cajón del móvil el menú
     sigue entero, como siempre. */
  .app-nav .nav-grupo-boton {
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-height: 32px;
  }
  .app-nav .nav-grupo-boton:hover { color: var(--menu-texto); }
  .nav-grupo-boton .nav-grupo-flecha {
    display: inline-flex;
    margin-left: auto;
    width: 14px; height: 14px;
    transition: transform 0.15s;
  }
  .nav-grupo.plegado .nav-grupo-flecha { transform: rotate(-90deg); }
  .nav-grupo.plegado .nav-grupo-items { display: none; }

  /* El degradado que avisa de que hay más. A 1440×900 el menú del admin (19
     entradas) se cortaba sin decir nada: «Usuarios» y «Grupos» existían, pero
     no se veían. `hay-mas` lo pone base.html mientras quede algo por bajar. */
  .app-nav-marco::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 48px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--menu-fondo) 90%);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .app-nav-marco.hay-mas::after { opacity: 1; }

  /* El tema, dentro de la tarjeta de usuario: un botón que va pasando de claro
     a oscuro a «sistema». El selector de tres botones ocupaba su propia fila
     (44 px más el hueco) en una barra que ya no le cabía el menú. */
  .app-sidebar-footer > .theme-switcher { display: none; }
  .app-sidebar-footer { gap: 8px; padding-top: 10px; }
  .user-card { gap: 8px; padding: 6px 6px 6px 10px; }
  .user-card .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-card .logout-btn,
  .tema-ciclo {
    width: var(--toque-raton); height: var(--toque-raton);
  }
  .tema-ciclo {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 0; border-radius: var(--radius-sm);
    background: transparent;
    color: var(--menu-texto);
    cursor: pointer;
  }
  .tema-ciclo:hover { background: var(--menu-hover); color: var(--menu-texto); }
  .tema-ciclo .icon { width: 16px; height: 16px; }
  .tema-ciclo .tema-icono { display: none; }
  .tema-ciclo[data-actual="light"] .tema-icono-light,
  .tema-ciclo[data-actual="dark"] .tema-icono-dark,
  .tema-ciclo[data-actual="system"] .tema-icono-system { display: inline-flex; }

  /* ── La ficha del técnico: un solo scroll ────────────────────────────────
     Antes había dos: la página (la rejilla medía `100dvh - 200px` y encima iba
     una cabecera de 300) y las columnas por dentro. A 1440 la caja «Estado»
     quedaba debajo del pliegue de la página Y del lateral.

     Decisión: la PÁGINA no se mueve; la cabecera se queda fija arriba y lo que
     se desplaza son las columnas (la conversación y el lateral, cada una lo
     suyo). La rejilla ocupa exactamente lo que deja la cabecera, sin números
     mágicos: la caja del contenido es una columna flexible de la altura de la
     ventana. Si la ventana es tan baja que no cabe ni eso, se desplaza la
     página entera y las columnas dejan de hacerlo (`min-height`). */
  .app-main:has(> .aparece .ticket-layout) {
    height: calc(100dvh - var(--franja-alto, 0px));
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .app-main:has(> .aparece .ticket-layout) > .aparece {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .ticket-layout {
    flex: 1 1 auto;
    height: auto;
    min-height: 380px;
    align-items: start;
  }
  .ticket-summary { margin-bottom: 12px; padding: 8px 14px; }
  /* La conversación mide lo que ocupan los mensajes, con la ventana de tope.
     A 1920 la tarjeta se estiraba hasta abajo y dejaba ~580 px vacíos entre el
     último mensaje y la caja de respuesta; ahora la caja va pegada al último
     mensaje y, cuando la conversación es larga, se desplaza por dentro. */
  .ticket-main { max-height: 100%; }
  .ticket-side { align-self: stretch; }

  /* Las acciones de estado, siempre a la vista: en la cabecera, al lado de las
     flechas. La caja «Estado» del lateral sobra aquí (es la misma acción). */
  .ficha-estado-cabecera { display: flex; gap: 6px; margin: 0; }
  .ficha-estado-cabecera .btn .dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  }
  .ticket-side .side-estado { display: none; }
  /* Rejilla: título y acciones en la primera fila, y las insignias debajo a
     TODO el ancho. Con flex, a 1024 las insignias se apretaban en el hueco que
     dejaban los cuatro botones, partían en dos líneas y la cabecera medía 102. */
  .ficha-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
  }
  .ficha-cabecera .ficha-titulo { display: contents; }
  .ficha-cabecera .page-subtitle { grid-column: 1 / -1; grid-row: 2; }
  .ficha-cabecera .ficha-acciones { grid-column: 2; grid-row: 1; align-items: center; flex-wrap: nowrap; }
  /* El asunto, en UNA línea: con dos, la cabecera pasa de 90 px. Entero va en
     el `title` del titular y en el primer mensaje de la conversación. */
  .ficha-cabecera .page-title { margin-top: 0; flex-wrap: nowrap; min-width: 0; }
  .ficha-cabecera .ficha-asunto {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ficha-cabecera .ficha-id { flex: none; }
  .ficha-cabecera { row-gap: 4px; }
  .ficha-cabecera .page-subtitle { margin-top: 0; }
  /* Con ratón, el mínimo del ratón (como el menú): con 44 la fila de botones
     dejaba la cabecera en 94. El móvil no pasa por aquí. */
  .ficha-cabecera .ficha-acciones .btn,
  .ficha-cabecera #prevTicket,
  .ficha-cabecera #nextTicket {
    min-height: var(--toque-raton);
  }
  .ficha-cabecera #prevTicket,
  .ficha-cabecera #nextTicket { min-width: var(--toque-raton); }
  .ficha-cabecera .page-subtitle .btn-icon {
    min-height: var(--toque-raton); min-width: var(--toque-raton);
  }

  /* ── La cola ─────────────────────────────────────────────────────────────
     1ª respuesta y SLA, a 112 px como mínimo: «✓ Respondida» no cabía en 82,
     salía cortada y se montaba sobre la pastilla del SLA (a 1440 y peor a
     1280). Y el asunto ya no es la única columna elástica: a 1920 se llevaba
     ~700 px para un texto de 350 y dejaba el resto en blanco. Ahora local,
     departamento y categoría crecen un poco con él (`fr` con mínimo) y el
     asunto sigue siendo el que más se lleva. Las tres rejillas dicen lo mismo
     (cabecera, fila y esqueleto), como en style.css. */
  .inbox-thead,
  .ticket-row,
  .skel-row {
    grid-template-columns:
      32px 46px minmax(0, 1fr) minmax(100px, .35fr) minmax(86px, .2fr)
      minmax(108px, .35fr) 112px 112px 110px 40px;
  }
  .col-time, .col-sla { min-width: 0; }
  .ticket-row .sla-pill { max-width: 100%; }
  /* El punto y la marca dicen lo mismo en «✓ Respondida»: sobra uno. */
  .ticket-row .sla-pill.sla-done .dot { display: none; }
}

/* El portátil (1024–1339): las columnas tasadas se aprietan para que el asunto
   siga teniendo sitio, pero las dos de plazo no bajan de 108. */
@media (min-width: 1024px) and (max-width: 1339px) {
  .inbox-thead,
  .ticket-row,
  .skel-row {
    grid-template-columns: 28px 40px minmax(0, 1fr) 84px 60px 88px 108px 108px 96px 32px;
    gap: 6px;
  }
  .ticket-row .sla-pill { padding: 3px 7px; gap: 4px; }
}

/* 1024–1199: las nueve columnas no caben con un asunto legible (a 1024 la fila
   tiene 660 px y las fijas suman 700). Antes el sobrante se cortaba en silencio
   por el `overflow: hidden` de la tarjeta y la columna «Estado» desaparecía.
   Ahora la tabla se desplaza de lado dentro de su tarjeta, como una tabla, y
   la página no se ensancha. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .inbox-card { overflow-x: auto; }
  .inbox-card .inbox-thead,
  .inbox-card .ticket-row,
  .inbox-card .skel-row { min-width: 860px; }
}


/* ═══ Bloque 2: las pantallas del local y del Área (2026-10-10) ═══════════════
 *
 * Todo lo del local y del Área vivía en la columna del móvil, 720 centrados.
 * Cada pantalla declara ahora su tipo y usa las piezas de arriba. */
@media (min-width: 1024px) {

  /* ── Hoy: tipo panel ────────────────────────────────────────────────────
     Las herramientas eran cuatro tarjetas de 270×120 con una palabra dentro;
     aquí son botones de una línea, y a partir de 1200 se van al lateral. */
  .hoy-panel .hoy-accesos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
  .hoy-panel .hoy-acceso {
    flex-direction: row; align-items: center; gap: 10px;
    min-height: 48px; padding: 10px 14px;
  }
  .hoy-panel .hoy-acceso .icon { width: 18px; height: 18px; flex: none; }
  .hoy-panel .hoy-bloque { margin-top: 22px; padding-top: 16px; }
  .hoy-panel .hoy-persona { margin-bottom: var(--space-3); }

  /* ── Mis incidencias: tabla-lista ──────────────────────────────────────
     Nº · Asunto (y debajo categoría y canal) · [Local] · Estado · Última
     actividad. El SLA no va: a quien reporta no se le enseña plazo ninguno
     (ni en la tarjeta del móvil). */
  .mis-tabla { --tl-columnas: 64px minmax(0, 1fr) minmax(150px, .5fr) 110px; }
  .mis-tabla.con-local {
    --tl-columnas: 64px minmax(0, 1fr) minmax(110px, .4fr) minmax(150px, .5fr) 110px;
  }
  .mis-tabla .card-id { grid-column: 1; grid-row: 1 / span 2; }
  .mis-tabla .sol-tarjeta .asunto { grid-column: 2; grid-row: 1; -webkit-line-clamp: 1; }
  .mis-tabla .meta { grid-column: 2; grid-row: 2; margin: 0; }
  .mis-tabla .sol-tarjeta:not(:has(.meta .pieza)) .meta { display: none; }
  .mis-tabla .card-local { grid-column: 3; grid-row: 1 / span 2; white-space: normal; }
  .mis-tabla .card-cabecera .card-local::before { content: none; }
  .mis-tabla .card-cabecera .badge { grid-column: -3 / -2; grid-row: 1 / span 2; margin: 0; }
  .mis-tabla .card-cuando { grid-column: -2 / -1; grid-row: 1 / span 2; }
  .mis-tabla .tl-cabecera > :last-child { grid-column: -2 / -1; }
  .mis-calma .tabla-lista { margin: var(--space-3) 0 0; }

  /* ── Equipos: tabla-lista ──────────────────────────────────────────────
     Nº · Local · Equipo · Estado · Quién y cuándo. Lo que el Área le dijo al
     local, debajo del equipo. */
  .eq-tabla { --tl-columnas: 84px minmax(110px, .6fr) minmax(0, 1.6fr) minmax(110px, .5fr) minmax(150px, .9fr); }
  .eq-tabla .ref { display: contents; }
  .eq-tabla .tl-num { grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-fg-secondary); }
  .eq-tabla .tl-local { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-fg); font-weight: var(--weight-semibold); }
  .eq-tabla .sol-tarjeta .asunto { grid-column: 3; grid-row: 1; }
  .eq-tabla .badge { grid-column: 4; grid-row: 1 / span 2; }
  .eq-tabla .pie { grid-column: 5; grid-row: 1 / span 2; font-size: var(--text-xs); }
  .eq-tabla .pie + .pie { grid-column: 3; grid-row: 2; }

  /* ── Personal: tabla-lista ─────────────────────────────────────────────
     Puesto · Detalle (vacantes, motivo, y debajo el alta o lo que dijo el
     Área) · Estado. */
  .pers-tabla { --tl-columnas: minmax(150px, .7fr) minmax(0, 2fr) minmax(130px, .5fr); }
  .pers-tabla .sol-tarjeta { row-gap: 0; }
  .pers-tabla .ref { grid-column: 1; grid-row: 1 / span 4; font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-fg); }
  .pers-tabla .badge { grid-column: 3; grid-row: 1 / span 4; }
  .pers-tabla .sol-tarjeta .asunto,
  .pers-tabla .pie { grid-column: 2; }
  .pers-tabla .pie { margin-top: 2px; font-size: var(--text-xs); }

  /* ── Las fichas del local con lateral (incidencia, pedido, personal) ─────
     La rejilla de dos columnas de `.sol-dos` nació centrada; ahora va a la
     izquierda como todas, pegada al «← Volver», y con las medidas de los
     tokens. */
  .aparece[class*="pantalla-"] .sol-wrap.sol-dos { justify-content: start; }

  /* ── Ayuda y Manuales ──────────────────────────────────────────────────
     «Tu manual» y el buscador, del mismo ancho (antes 720 y 1112). */
  .ayuda-pantalla .ayuda-manual .manuales-fila { max-width: none; }
  /* Los teléfonos, cada uno de su alto: con la fila estirada a la ficha más
     alta, una de dos líneas se quedaba con 100 px vacíos debajo. */
  .ayuda-fichas { align-items: start; }
  /* Cuatro fichas en tres columnas dejaban una sola en la segunda fila: con
     cuatro, dos y dos (y cuatro en línea cuando caben, abajo). */
  .ayuda-fichas:has(> .ayuda-ficha:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  /* La lista de manuales, en rejilla: siete filas de 720 dejaban dos tercios
     de pantalla vacíos al administrador. */
  .manuales-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); max-width: none; align-items: start; }
  .manuales-generado { max-width: var(--pantalla-lectura); }

  /* ── Mensajes ─────────────────────────────────────────────────────────── */
  .maestro-detalle .msj-acciones { margin-bottom: var(--space-4); }
}

/* El portátil (1024–1279): con la columna «Local», al asunto de Mis
   incidencias le quedaban 160 px. Las columnas tasadas se aprietan. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mis-tabla.con-local { --tl-columnas: 52px minmax(0, 1fr) 96px 140px 84px; }
  .mis-tabla { --tl-columnas: 52px minmax(0, 1fr) 150px 96px; }
  .eq-tabla { --tl-columnas: 72px 96px minmax(0, 1fr) 110px 130px; }
}

/* ── 1200: donde caben dos columnas de verdad ────────────────────────────── */
@media (min-width: 1200px) {

  /* Lectura con lateral: 720 + lateral, lado a lado. */
  .con-lado {
    display: grid;
    grid-template-columns: minmax(0, var(--pantalla-lectura)) minmax(280px, var(--pantalla-lateral));
    column-gap: var(--pantalla-hueco);
    align-items: start;
  }
  .con-lado > .pantalla-lado { margin-top: 0; position: sticky; top: 16px; }
  /* Lo que va en la columna ancha de una ficha (la persona que se incorpora)
     vuelve a sus dos columnas de dato; el lateral, en una. */
  .aparece .sol-dos > .sol-ficha { grid-template-columns: 1fr 1fr; }
  .aparece[class*="pantalla-"] .sol-wrap.sol-dos {
    max-width: calc(var(--pantalla-lectura) + var(--pantalla-hueco) + var(--pantalla-lateral));
    grid-template-columns: minmax(0, var(--pantalla-lectura)) minmax(280px, var(--pantalla-lateral));
    column-gap: var(--pantalla-hueco);
  }

  /* Hoy: lo que espera de ti y los comunicados a la izquierda; las
     herramientas, al lateral. Lo que espera de ti, en dos columnas cuando
     caben (dos líneas cortas no piden 1112 px de fila). */
  .hoy-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    /* La última fila es flexible: el lateral se reparte en ella lo que mida
       de más, y no en las de la izquierda (que se abrían). */
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--pantalla-hueco);
    align-items: start;
  }
  .hoy-panel > * { grid-column: 1; }
  .hoy-panel > .hoy-persona { grid-column: 1 / -1; }
  .hoy-panel > .hoy-bloque-accesos { grid-column: 2; grid-row: 2 / span 4; }
  .hoy-panel .hoy-bloque-accesos .hoy-accesos { grid-template-columns: 1fr; }
  .hoy-panel .hoy-pendientes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  /* Maestro-detalle: la lista a la izquierda, fija y con su scroll; lo
     abierto a la derecha. */
  .maestro-detalle {
    display: grid;
    grid-template-columns: minmax(300px, var(--pantalla-maestro)) minmax(0, 1fr);
    column-gap: var(--pantalla-hueco);
    align-items: start;
  }
  .maestro-detalle > .md-maestro {
    grid-column: 1; grid-row: 1;
    /* Del alto de la ventana, menos el relleno de arriba y abajo de la caja
       del contenido (28 + 28): con 32 la página bajaba 24 px de más. */
    position: sticky; top: 28px;
    max-height: calc(100dvh - 56px - var(--franja-alto, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px;
  }
  /* Lo abierto, hasta 820: más ancho, una línea de mensaje no se lee de un
     tirón. (`.aparece …` para ganarle al «sin máximo» de `.sol-wrap`.) */
  .aparece .maestro-detalle > .md-detalle { grid-column: 2; grid-row: 1; min-width: 0; max-width: 820px; }
  /* Con la lista a la vista, «← Mensajes» sobra. */
  .aparece:has(> .maestro-detalle > .md-maestro) > .volver-arriba { display: none; }
  .md-maestro.solo-escritorio { display: block; }
  .md-vacio {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    padding: var(--space-7) var(--space-5);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    color: var(--color-fg-tertiary); text-align: center; font-size: var(--text-sm);
  }
  .md-vacio .icon { width: 28px; height: 28px; }
  .md-lista-cabecera.md-solo-ancho { display: flex; }
  .md-solo-estrecho { display: none; }
  /* La lista estrecha: tarjetas más prietas y la abierta marcada. */
  .md-maestro .sol-lista { gap: var(--space-2); }
  .md-maestro .sol-tarjeta { padding: var(--space-3); }
  .md-maestro .sol-tarjeta .fila-alta { margin-bottom: 4px; }
  .md-maestro .sol-tarjeta .pie { margin-top: 6px; }
  .md-maestro .sol-tarjeta[aria-current="page"] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
  }
  .md-maestro .msj-extracto {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  /* En la bandeja, la cabecera y los avisos van en la columna de la derecha,
     encima del hueco «elige una conversación»: así la lista empieza a la
     misma altura que en el hilo y no salta al abrir uno. */
  .md-bandeja > .md-detalle { grid-row: 1; }
}

/* Manuales y teléfonos: cuatro en línea cuando caben (a 1440, 266 por ficha). */
@media (min-width: 1440px) {
  .ayuda-fichas:has(> .ayuda-ficha:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ═══ Bloque 3: el panel de Dirección (2026-10-10) ════════════════════════════
 *
 * La red, un Área (o un formador) y un local: tipo panel (`dir-pantalla`).
 * Auditoría del 10-oct: a 1920 el panel iba en 1120 centrados (204 px en
 * blanco a la izquierda), «Por local» eran tarjetas de 44–77 px con 8 px de
 * aire entre ellas (1.645 px a 1440 para 25 locales) y las cifras de «Ahora»
 * dejaban un hueco en la segunda fila. Solo presentación: ni una consulta más. */
@media (min-width: 1024px) {

  .dir-pantalla .dir-wrap { max-width: none; margin: 0; }

  /* ── Las cifras de «Ahora»: dos filas LLENAS ───────────────────────────
     La plantilla dice cuántas salen (`--cifras`, `--cifras-media`): la
     primera fila lleva la mitad redondeada hacia arriba y la segunda se
     reparte el ancho entero, sin la casilla vacía al final. */
  .dir-pantalla .dir-resumen {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: var(--space-3);
  }
  .dir-pantalla .dir-resumen > .sol-dato {
    /* El píxel de menos: con el redondeo, la última de la primera fila
       bajaba a la segunda. */
    flex: 1 1 calc((100% - (var(--cifras-media, 5) - 1) * 8px) / var(--cifras-media, 5) - 1px);
    min-width: 0;
    padding: 10px 14px;
  }
  .dir-pantalla .dir-resumen > a.sol-dato.pulsable { padding-right: 28px; }
  .dir-pantalla .dir-resumen .sol-dato-flecha { top: 10px; right: 10px; }
  /* En frase y no en versalitas: «Personal por validar · la más antigua, 8 d»
     en mayúsculas espaciadas pedía cuatro líneas en una casilla de 120. */
  .dir-pantalla .dir-resumen .etiqueta {
    text-transform: none; letter-spacing: 0; line-height: 1.3;
    font-size: var(--text-xs); color: var(--color-fg-tertiary);
  }

  /* ── Necesita atención: la lista y, a su lado desde 1280, lo de validar ──
     Desde el 2026-10-10 es UNA lista de incidencias por gravedad (antes,
     urgentes y vencidas en dos columnas, con repetidas) y un bloque corto de
     lo que espera a un Área. En el portátil, uno debajo del otro. */
  .dir-pantalla .dir-atencion { display: block; }
  .dir-pantalla .dir-atencion-grupo { padding-bottom: var(--space-5); }
  .dir-pantalla .dir-atencion-grupo .est-pie { margin: var(--space-2) 0 0; }

  /* La lista priorizada, en tabla-lista: Nº · asunto (y debajo el local, la
     categoría y la edad) · pastillas. Las pastillas en una columna fija y
     alineadas a su izquierda, para leerlas de arriba abajo como una columna
     más; si no caben, parten en dos líneas antes que comerle el sitio al
     asunto. */
  .dir-lista { --tl-columnas: 52px minmax(0, 1fr) 280px; margin-bottom: 0; }
  .dir-lista .sol-tarjeta { padding: 6px 16px; min-height: 48px; }
  .dir-lista .dir-tarjeta-cabeza { display: contents; }
  .dir-lista .ref { grid-column: 1; grid-row: 1 / span 2; font-size: var(--text-xs); }
  .dir-lista .dir-tarjeta-local { display: none; }
  .dir-lista .sol-tarjeta .asunto { grid-column: 2; grid-row: 1; }
  .dir-lista .sol-tarjeta .pie { grid-column: 2; grid-row: 2; font-size: var(--text-xs); gap: 2px var(--space-2); }
  .dir-lista .dir-pie-local { font-weight: var(--weight-semibold); color: var(--color-fg-secondary); }
  .dir-lista .dir-marcas {
    grid-column: 3; grid-row: 1 / span 2; margin: 0;
    justify-content: flex-start; align-content: center;
  }
  .dir-lista .dir-marcas .badge { margin: 0; }
  /* La raya de la izquierda dice el escalón, como en el móvil. */
  .tabla-lista .sol-tarjeta.dir-g0,
  .tabla-lista .sol-tarjeta.dir-g2 { border-left-color: var(--color-danger); }
  .tabla-lista .sol-tarjeta.dir-g1 { border-left-color: var(--color-warning); }
  .tabla-lista .sol-tarjeta.dir-g3 { border-left-color: var(--color-border-strong); }

  /* Lo de validar: filas de una tabla, no tarjetas sueltas. */
  .dir-pantalla .dir-validar {
    gap: 0; overflow: hidden;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface-strong);
  }
  .dir-pantalla .dir-validar-fila {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
    min-height: 44px; padding: 6px 16px;
    border: 0; border-bottom: 1px solid var(--color-border);
    border-left: 3px solid var(--color-warning, var(--color-border-strong));
    border-radius: 0; background: transparent;
  }
  .dir-pantalla .dir-validar-fila:last-child { border-bottom: 0; }
  .dir-pantalla .dir-validar-fila .est-suave { font-size: var(--text-xs); text-align: right; }

  /* ── Por Área / Por formador: rejilla de fichas ────────────────────────
     `auto-fit` y no `auto-fill`: la Dirección de Formación tiene dos
     formadores, y dos fichas en una rejilla de tres dejaban una columna
     vacía. 340 px: menos y las cifras de cada Área partían en cuatro líneas. */
  .dir-pantalla .dir-areas.rejilla-fichas { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }

  /* ── Por local: una tabla densa ────────────────────────────────────────
     Buscador y orden en una sola barra encima. */
  .dir-pantalla .dir-herramientas {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
    margin-bottom: var(--space-3);
  }
  .dir-pantalla .dir-herramientas .dir-buscar { flex: 0 1 460px; margin: 0; }
  .dir-pantalla .dir-herramientas .dir-orden { margin: 0; }
  .dir-pantalla .dir-buscar .field-input,
  .dir-pantalla .dir-buscar .btn,
  .dir-pantalla .dir-quitar,
  .dir-pantalla .dir-orden a { min-height: var(--toque-raton); }
  .dir-pantalla .dir-buscar .field-input { font-size: var(--text-sm); }

  /* La tabla. Sin `overflow: hidden` en la caja, que rompería la cabecera
     pegajosa: el redondeo lo ponen la cabecera y la última fila. */
  .dir-pantalla .dir-tabla {
    gap: 0;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface-strong);
  }
  /* Local · Abiertas · Urgentes · SLA vencido · Más antigua · Por validar ·
     Personal · Entradas; en la red, además, el Área (o el formador) tras el
     local. Las cifras, en columnas tasadas para que se lean de arriba abajo. */
  .dir-pantalla .dir-fila {
    grid-template-columns: minmax(150px, 1.4fr) 64px 64px 72px 76px 72px minmax(150px, 1.4fr) 72px;
    column-gap: 10px;
    min-height: 44px; padding: 4px 16px 4px 13px;
    border: 0; border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    border-radius: 0; background: transparent;
  }
  .dir-pantalla .dir-tabla.con-grupo .dir-fila {
    grid-template-columns: minmax(130px, 1.1fr) minmax(110px, 1fr) 60px 64px 64px 72px 64px minmax(140px, 1.3fr) 64px;
  }
  .dir-pantalla .dir-fila:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .dir-pantalla a.dir-fila:hover { background: var(--color-surface-muted); border-color: var(--color-border); }
  .dir-pantalla a.dir-fila:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .dir-pantalla a.dir-fila.con-urgentes { border-left-color: var(--color-danger); }
  .dir-pantalla a.dir-fila.con-vencidas { border-left-color: var(--color-warning); }
  .dir-pantalla a.dir-fila:hover.con-urgentes { border-left-color: var(--color-danger); }
  .dir-pantalla a.dir-fila:hover.con-vencidas { border-left-color: var(--color-warning); }
  /* La cabecera se queda arriba al bajar por los setenta locales. */
  .dir-pantalla .dir-fila-cabeza {
    position: sticky; top: 0; z-index: 2;
    min-height: 0; padding-top: 8px; padding-bottom: 8px;
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    line-height: 1.25;
    /* «URGENTES» con el espaciado de siempre medía 66 en una columna de 64. */
    letter-spacing: .02em;
  }
  .dir-pantalla .dir-local { flex-wrap: nowrap; align-items: center; }
  .dir-pantalla .dir-local strong {
    font-size: var(--text-sm); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal;
  }
  .dir-pantalla .dir-local .badge { flex: none; }
  /* El Área tiene su columna: debajo del nombre sobraba. */
  .dir-pantalla .dir-tabla.con-grupo .dir-de { display: none; }
  .dir-pantalla .dir-grupo {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-fg-tertiary);
  }
  .dir-pantalla .dir-vencidas.venc { color: var(--color-warning-fg, var(--color-fg)); font-weight: var(--weight-semibold); }
  .dir-pantalla .dir-personal { line-height: 1.3; }
}

/* El portátil (1024–1279): las nueve columnas no caben en 696 px (la página se
   salía por la derecha). El Área vuelve debajo del nombre, como en la tarjeta,
   y las cifras se aprietan a 60–64 (lo que mide «URGENTES»). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .dir-pantalla .dir-fila,
  .dir-pantalla .dir-tabla.con-grupo .dir-fila {
    grid-template-columns: minmax(0, 1.3fr) 60px 64px 60px 64px 60px minmax(0, 1.2fr) 64px;
    column-gap: 8px;
  }
  .dir-pantalla .dir-tabla.con-grupo .dir-grupo,
  .dir-pantalla .dir-grupo-titulo { display: none; }
  .dir-pantalla .dir-local { flex-wrap: wrap; }
  .dir-pantalla .dir-tabla.con-grupo .dir-de {
    display: block; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* A partir de 1280, las cifras de «Ahora» en UNA fila, y el buscador y el
   orden en la misma barra (a 1280 el orden bajaba solo a la línea de abajo:
   el buscador no encogía antes de partir). */
@media (min-width: 1280px) {
  .dir-pantalla .dir-resumen { flex-wrap: nowrap; }
  .dir-pantalla .dir-resumen > .sol-dato { flex: 1 1 0; }
  .dir-pantalla .dir-herramientas { flex-wrap: nowrap; }
  .dir-pantalla .dir-herramientas .dir-buscar { flex: 1 1 260px; max-width: 460px; }
  .dir-pantalla .dir-herramientas .dir-orden { flex: none; }
  /* La lista se lleva dos tercios: con sus pastillas, en media pantalla el
     asunto partía en tres líneas. Lo de validar, el tercio de al lado, con
     el número y los días debajo y no a la derecha. */
  .dir-pantalla .dir-atencion {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 24px; align-items: start;
  }
  .dir-pantalla .dir-atencion:has(> .dir-atencion-grupo:only-child) { grid-template-columns: minmax(0, 1fr); }
  .dir-pantalla .dir-atencion:not(:has(> .dir-atencion-grupo:only-child)) .dir-validar-fila { grid-template-columns: minmax(0, 1fr); }
  .dir-pantalla .dir-atencion:not(:has(> .dir-atencion-grupo:only-child)) .dir-validar-fila .est-suave { text-align: left; }
}


/* ═══ Bloque 4: administración (2026-10-10) ═══════════════════════════════════
 *
 * Auditoría del 10-oct: Usuarios eran 84 tarjetas plegables (4.000 px a 1440,
 * 7.000 con una ficha abierta), Correos de los locales y Avisos por correo,
 * 7.400 y 6.100 px de acordeones o tarjetas de 720 centradas, y el catálogo
 * de averías, 11.700 px. Cada pantalla usa la pieza que le toca de arriba;
 * por debajo de 1024 nada cambia: lo que es solo del escritorio va con
 * `solo-escritorio` y lo que es solo del móvil, con `no-escritorio`. */
@media (min-width: 1024px) {

  .no-escritorio { display: none !important; }

  /* ── Usuarios: tabla-lista ─────────────────────────────────────────────
     Nombre · Usuario · Rol (y perfil) · Ámbito · Última entrada · Estado ·
     Editar. La fila entera es el enlace a la ficha. */
  .usr-filtros {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: var(--space-3);
  }
  .usr-filtros .field-input { min-height: var(--toque-raton); font-size: var(--text-sm); }
  .usr-filtros [data-usr-buscar] { flex: 0 1 380px; }
  .usr-filtros select.field-input { flex: none; width: auto; }
  .usr-cuenta { margin-left: auto; font-size: var(--text-xs); color: var(--color-fg-tertiary); font-weight: var(--weight-regular, 400); }
  /* Una <table> de verdad (accesibilidad, 2026-10-10): cada dato tiene su
     columna para un lector de pantalla. El aspecto es el de antes: filas de
     40, bordes finos y la fila entera abre la ficha (el enlace del nombre se
     estira sobre la fila con `::after`). Lo que sirve para decidir —el
     usuario y la última entrada— va a 13 px y no a los 11 de antes. */
  .usr-tabla-marco {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-strong);
    overflow: hidden;
  }
  .usr-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
  .usr-tabla thead th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: 14px; font-weight: var(--weight-semibold);
    color: var(--color-fg-secondary); text-align: left; white-space: nowrap;
  }
  .usr-tabla th:nth-child(1) { width: 20%; }
  .usr-tabla th:nth-child(2) { width: 15%; }
  .usr-tabla th:nth-child(3) { width: 17%; }
  .usr-tabla th:nth-child(5) { width: 136px; }
  .usr-tabla th:nth-child(6) { width: 150px; }
  .usr-tabla th:nth-child(7) { width: 64px; }
  .usr-tabla tbody tr { position: relative; }
  .usr-tabla tbody tr[hidden] { display: none; }
  .usr-tabla tbody tr + tr { border-top: 1px solid var(--color-border); }
  .usr-tabla tbody tr:hover { background: var(--color-surface-muted); }
  .usr-tabla tbody th,
  .usr-tabla tbody td {
    height: var(--toque-raton); padding: 4px 12px;
    text-align: left; font-weight: normal; vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .usr-tabla .usr-enlace { color: var(--color-fg); font-weight: var(--weight-semibold); text-decoration: none; }
  .usr-tabla .usr-enlace::after { content: ""; position: absolute; inset: 0; }
  .usr-tabla .usr-enlace:focus-visible { outline: none; }
  .usr-tabla tbody tr:has(.usr-enlace:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .usr-tabla .usr-usuario { font-size: 14px; color: var(--color-fg-secondary); }
  .usr-tabla .usr-usuario-bajo { display: none; }
  .usr-tabla .badge { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  .usr-tabla .usr-ambito { color: var(--color-fg-secondary); }
  /* Un encargado o un técnico sin ámbito no ve nada: que se note en la lista. */
  .usr-tabla .usr-sin-ambito { color: var(--color-warning-fg, var(--color-fg)); font-weight: var(--weight-semibold); }
  .usr-tabla .usr-login { font-size: 14px; color: var(--color-fg-secondary); font-variant-numeric: tabular-nums; }
  /* «Activa» y «Prueba» bajan de línea antes que cortarse en «Activa …». */
  .usr-tabla tbody .usr-estado { white-space: normal; }
  .usr-tabla .usr-estado .badge + .badge { margin-left: 4px; }
  .usr-tabla .usr-editar { text-align: right; color: var(--color-accent); font-weight: var(--weight-semibold); }
  .usr-tabla tbody tr:hover .usr-editar { text-decoration: underline; }
  .usr-inactiva .usr-enlace { color: var(--color-fg-tertiary); font-weight: var(--weight-medium, 500); }
  .usr-oculto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .usr-nada { margin: 0; padding: var(--space-4); font-size: var(--text-sm); color: var(--color-fg-tertiary); }
  .usr-nada[hidden] { display: none; }

  /* La ficha en su página: por debajo de 1200, sola y de lectura ancha. */
  .usr-ficha .page-subtitle .badge { vertical-align: 1px; }
  .usr-ficha-caja .cuenta-form { margin-top: 0; }
}

@media (min-width: 1200px) {
  /* ── Usuarios: maestro-detalle ─────────────────────────────────────────
     Las cuentas, a la izquierda (más estrecha que la de Mensajes: aquí es
     un nombre y una línea); la ficha a la derecha, sin el tope de 820, que
     el formulario tiene su propio resumen al lado. */
  .maestro-detalle.usr-md { grid-template-columns: 280px minmax(0, 1fr); }
  .aparece .maestro-detalle.usr-md > .md-detalle { max-width: 1180px; }
  /* La cabecera y el buscador se quedan arriba: lo que se desplaza es solo
     la lista de cuentas. */
  .md-maestro.solo-escritorio.usr-maestro { display: flex; flex-direction: column; overflow: hidden; }
  .usr-maestro .md-lista-cabecera { margin-bottom: var(--space-2); flex: none; }
  .usr-mlista { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .usr-maestro-titulo {
    display: flex; align-items: baseline; gap: 8px;
    font-weight: var(--weight-semibold); color: var(--color-fg); text-decoration: none;
  }
  .usr-maestro-titulo .usr-cuenta { margin-left: 0; }
  .usr-maestro-buscar { width: 100%; box-sizing: border-box; min-height: var(--toque-raton); font-size: var(--text-sm); margin-bottom: var(--space-2); }
  .usr-mlista { list-style: none; margin: 0; padding: 0; }
  .usr-mlista li[hidden] { display: none; }
  .usr-mfila {
    display: flex; flex-direction: column; gap: 1px;
    min-height: var(--toque-raton); padding: 5px 10px;
    border-radius: var(--radius-md);
    color: var(--color-fg); text-decoration: none;
  }
  .usr-mfila:hover { background: var(--color-surface-muted); }
  .usr-mfila[aria-current="page"] { background: var(--color-accent-soft); }
  .usr-mnombre { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .usr-mdato { font-size: var(--text-xs); color: var(--color-fg-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .usr-mfila.usr-inactiva .usr-mnombre { color: var(--color-fg-tertiary); }
}

/* 1024–1199: siete columnas no caben en 696 px (la fila se salía 78 px). El
   usuario baja debajo del nombre, como en la tarjeta del móvil, y su columna
   no se pinta. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .usr-tabla .usr-col-usuario { display: none; }
  .usr-tabla th:nth-child(1) { width: 26%; }
  .usr-tabla tbody .usr-nombre { padding-top: 6px; padding-bottom: 6px; }
  .usr-tabla .usr-nombre .usr-enlace,
  .usr-tabla .usr-usuario-bajo { display: block; overflow: hidden; text-overflow: ellipsis; }
  .usr-tabla .usr-usuario-bajo { font-weight: normal; }
  /* Lo justo para «29/09/2026 09:41» a 13 px sin cortar, y relleno más
     prieto: a 1024 la fecha y el rol salían con puntos suspensivos. */
  .usr-tabla thead th, .usr-tabla tbody th, .usr-tabla tbody td { padding-left: 8px; padding-right: 8px; }
  .usr-tabla th:nth-child(5) { width: 128px; }
  .usr-tabla th:nth-child(6) { width: 112px; }
  .usr-tabla th:nth-child(7) { width: 56px; }
}

/* De 1200 a 1599 la ficha mide 650–970 px: el resumen de 340 al lado dejaba
   los pasos en 300. Va debajo, como en el portátil. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .usr-ficha .cuenta-form { display: flex; }
  .usr-ficha .cuenta-campos,
  .usr-ficha .cuenta-roles { grid-template-columns: 1fr 1fr; }
}

/* ── Roles y Grupos: rejilla de fichas ──────────────────────────────────────
   Eran acordeones de 1.112 px con dos líneas dentro. Ahora, tarjetas en
   rejilla, cada una de su alto; la que se abre ocupa la fila entera, que es
   donde caben sus casillas en columnas. El texto de ayuda, a 72 caracteres:
   a todo el ancho era una línea de 180. */
@media (min-width: 1024px) {
  .roles-explica p,
  .roles-explica + .roles-rejilla .campo-nota,
  .grupos-rejilla .grupo-alcance { max-width: 72ch; }
  .aparece:has(.roles-rejilla) .page-subtitle,
  .aparece:has(.grupos-rejilla) .page-subtitle { max-width: 72ch; }

  .roles-explica { margin-bottom: var(--space-4); }
  .roles-rejilla,
  .grupos-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    align-items: start;
    /* La abierta baja a una fila propia; `dense` rellena el hueco que deja
       arriba con las siguientes, en vez de dejar media fila en blanco. */
    grid-auto-flow: row dense;
    margin-bottom: var(--space-5);
  }
  .roles-rejilla > .grupo-tarjeta,
  .grupos-rejilla > .grupo-tarjeta { margin: 0; }
  .roles-rejilla > .grupo-tarjeta[open],
  .grupos-rejilla > .grupo-tarjeta[open],
  .grupos-rejilla > .t-empty { grid-column: 1 / -1; }

  /* Las casillas del paquete: cada grupo de permisos es una columna. */
  .roles-rejilla .rol-editor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
  }
  .roles-rejilla .rol-editor > .campo-nota,
  .roles-rejilla .rol-editor > .rol-editor-botones { grid-column: 1 / -1; max-width: 72ch; }
  /* «Guardar el paquete de Dirección de Operaciones» no cabía en la tarjeta
     abierta a 1024 y se salía 19 px (medido el 2026-10-10): que parta. */
  .roles-rejilla .rol-editor-botones .btn { max-width: 100%; white-space: normal; text-align: center; }
  .roles-rejilla .rol-editor .permiso-grupo { margin: 0; }
  .roles-rejilla .rol-editor .permiso-lista { flex-direction: column; }

  /* Con ratón, cada casilla del alto del ratón: setenta locales a 44 px eran
     una caja de 700. */
  .grupos-rejilla .casillas-legibles > label { min-height: var(--toque-raton); padding: 4px 8px; align-items: center; }
  .grupos-rejilla .casillas-legibles > label > input { margin: 0; }
  /* Los locales del grupo, en pastillas en la tarjeta cerrada. */
  .grupo-pastillas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .grupo-pastilla {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    font-size: var(--text-xs); color: var(--color-fg-secondary);
    white-space: nowrap;
  }
  .grupo-pastilla-mas { background: transparent; border-style: dashed; }
  /* Abierta, las pastillas sobran: debajo están las casillas, marcadas
     arriba del todo. */
  .grupo-tarjeta[open] .grupo-pastillas { display: none; }
}

/* ── Comunicados: la lista y el histórico, en tabla ─────────────────────────
   Eran filas de 1.112 px con cinco iconos a la derecha y ~500 px en blanco en
   medio (la lista), y tarjetas de 100 px en dos columnas (el histórico). Aquí
   cada comunicado es una fila: título y estado · consultas y público ·
   acciones en la última columna. Mismo HTML que el móvil: la caja del cuerpo
   pasa a `display: contents` y cada pieza va a su columna. */
@media (min-width: 1024px) {
  .com-tabla-cabecera,
  .com-fila,
  .hist-cabecera,
  .hist-lista > .hist-tarjeta {
    display: grid;
    column-gap: 16px;
    align-items: center;
  }
  /* Las acciones, de ancho fijo y no `auto`: cada fila es su propia rejilla,
     y un borrador (tres botones) descolocaba las columnas de las demás. */
  .com-tabla-cabecera,
  .com-fila { grid-template-columns: minmax(0, 1fr) 140px 170px 300px; }
  .com-tabla-cabecera,
  .hist-cabecera {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface-muted);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-fg-tertiary);
  }
  .com-tabla-cabecera > :last-child,
  .hist-cabecera > :last-child { text-align: right; }

  .com-fila {
    padding: 8px 16px;
    border: 1px solid var(--color-border); border-top: 0;
    background: var(--color-surface-strong);
    row-gap: 2px;
  }
  .com-fila:last-of-type { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .com-fila:hover { background: var(--color-surface-muted); }
  .com-fila .com-fila-cuerpo { display: contents; }
  .com-fila h2 { grid-column: 1; grid-row: 1; margin: 0; }
  .com-fila .com-estado { grid-column: 1; grid-row: 2; }
  /* Consultas y público, cada uno en su columna y a la altura de las dos
     líneas del título: uno encima del otro, con su alto de ratón, hacían
     filas de 100 px. */
  .com-fila .com-consultas { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .com-fila .com-audiencia { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .com-fila .com-audiencia > summary { min-height: var(--toque-raton); }
  /* Abierto, el público ocupa la fila entera debajo: en 170 px la lista de
     nombres era una columna de cincuenta líneas. */
  .com-fila .com-audiencia[open] { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .com-fila .com-audiencia[open] .com-lista-gente { columns: 260px; column-gap: 24px; }
  /* «quién lo ha leído», del alto del ratón y en línea: con el alto del dedo
     cada línea del estado medía 44 px y la fila, 100. */
  .com-fila .com-estado .lec-enlace { display: inline; min-height: 0; }
  .com-fila .com-estado { line-height: 1.5; }
  .com-fila .com-fila-acciones { grid-column: 4; grid-row: 1 / span 2; justify-content: flex-end; align-items: center; gap: 6px; }
  .com-fila .com-accion,
  .com-fila .com-fila-acciones .btn { width: auto; min-width: var(--toque-raton); height: var(--toque-raton); min-height: var(--toque-raton); }
  /* El borrador sigue atenuado, pero la fila de la tabla no: solo su texto. */
  .com-fila.com-borrador { opacity: 1; }
  .com-fila.com-borrador > .com-fila-cuerpo > * { opacity: .62; }

  /* El histórico: qué es · título y extracto · archivado o caducado, y la
     fecha · acciones. Una sola columna de filas, sin la rejilla de dos. La
     cabecera de la tarjeta pasa a `display: contents` y cada pastilla va a
     su columna: apiladas en una, la fila medía 73 px. */
  .hist-lista { columns: auto; }
  .hist-cabecera,
  .hist-lista > .hist-tarjeta { grid-template-columns: 150px minmax(0, 1fr) 200px 340px; }
  .hist-lista > .hist-tarjeta {
    display: grid; width: auto;
    margin: 0; padding: 6px 16px;
    border-radius: 0; border-top: 0;
    background: var(--color-surface-strong);
    row-gap: 2px;
  }
  .hist-lista > .hist-tarjeta:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .hist-lista > .hist-tarjeta:hover { background: var(--color-surface-muted); }
  .hist-tarjeta > .com-cabeza { display: contents; }
  .hist-tarjeta > .com-cabeza > .com-tipo { grid-column: 1; grid-row: 1 / span 3; justify-self: start; }
  .hist-tarjeta > .com-cabeza > .com-marca { grid-column: 3; grid-row: 1; justify-self: start; }
  .hist-tarjeta > .com-cabeza > .com-cola { grid-column: 3; grid-row: 2; margin-left: 0; }
  .hist-tarjeta h2 { grid-column: 2; grid-row: 1; font-size: var(--text-sm); }
  .hist-tarjeta .hist-abrir { min-height: 0; }
  .hist-tarjeta .com-avance {
    grid-column: 2; grid-row: 2; margin: 0; font-size: var(--text-xs);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hist-tarjeta .hist-pie { grid-column: 2; grid-row: 3; margin: 0; font-size: var(--text-xs); }
  .hist-tarjeta .hist-acciones {
    grid-column: 4; grid-row: 1 / span 3;
    margin: 0; flex-wrap: nowrap; justify-content: flex-end; gap: 6px;
  }
  .hist-tarjeta .hist-acciones .btn { min-height: var(--toque-raton); padding-top: 0; padding-bottom: 0; }
}

/* El portátil: consultas y público, uno encima de otro en una columna, y los
   botones al ancho del ratón, para que el título no se quede en 50 px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .com-tabla-cabecera,
  .com-fila { grid-template-columns: minmax(0, 1fr) 150px 260px; }
  .com-tabla-cabecera > :nth-child(3) { display: none; }
  .com-fila .com-consultas { grid-column: 2; grid-row: 1; }
  .com-fila .com-audiencia { grid-column: 2; grid-row: 2; }
  .com-fila:not(:has(.com-consultas)) .com-audiencia { grid-row: 1 / span 2; }
  .com-fila .com-fila-acciones { grid-column: 3; gap: 4px; }
  .com-fila .com-accion { min-width: 36px; width: 36px; height: 36px; min-height: 36px; }
  /* En el histórico, los botones bajan debajo del extracto: al lado, el
     título se quedaba en 150 px. */
  .hist-cabecera,
  .hist-lista > .hist-tarjeta { grid-template-columns: 140px minmax(0, 1fr) 170px; }
  .hist-cabecera > :last-child { display: none; }
  .hist-tarjeta .hist-acciones { grid-column: 2 / -1; grid-row: 4; justify-content: flex-start; margin-top: 4px; }
}

/* ── «Nuevo comunicado»: qué es | a quién va, y la vista previa pegajosa ──
   El formulario medía 2.300 px. A partir de 1440 caben dos columnas al lado
   de la vista previa: lo que se cuenta a la izquierda, el público a la
   derecha; guardar y la plantilla, debajo de las dos. Por debajo de 1440 la
   columna sería de 300 px y sigue siendo una. */
@media (min-width: 1440px) {
  .com-editor { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
  .com-editor .pub-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .com-editor .pub-form > * { grid-column: 1 / -1; }
  .com-editor .pub-form > .pub-que { grid-column: 1; }
  .com-editor .pub-form > .pub-quien {
    grid-column: 2;
    padding-left: 24px;
    border-left: 1px solid var(--color-border);
  }
  .com-editor .pub-form > input[type="hidden"] { display: none; }
}

/* ── Correos de los locales: tabla editable en línea ────────────────────────
   Eran 7.400 px de acordeones cerrados de 47 px, uno por local, en 720
   centrados. Aquí cada local es una fila abierta (el JS de la página los abre
   en el escritorio y no deja plegarlos): el local y lo que tiene, a la
   izquierda; sus correos, uno al lado de otro con sus dos usos; «Añadir otro
   correo» y «Guardar», al final de la fila. Cada fila guarda lo suyo, como
   antes cada plegable. Las mismas funciones: buscar, añadir, quitar
   (vaciando el correo) y los dos usos. */
@media (min-width: 1024px) {
  .corloc-pantalla .avsel-texto,
  .corloc-pantalla .page-subtitle { max-width: 72ch; }
  /* Plegar y desplegar no tienen sentido con todo abierto. */
  .corloc-pantalla .grupos-barra-acciones { display: none; }
  .corloc-pantalla .grupos-barra .field-input { max-width: 420px; }

  .corloc-grupo {
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-strong);
    overflow: hidden;
  }
  .corloc-grupo > .est-titulo {
    justify-content: flex-start;
    margin: 0; padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
  }
  .corloc-grupo > .grupo-tarjeta {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    margin: 0; padding: 8px 16px;
    border: 0; border-bottom: 1px solid var(--color-border);
    border-radius: 0; box-shadow: none;
    background: transparent;
    scroll-margin-top: 16px;
  }
  .corloc-grupo > .grupo-tarjeta:last-child { border-bottom: 0; }
  .corloc-grupo > .grupo-tarjeta:target,
  .corloc-grupo > .grupo-tarjeta:focus-within { background: var(--color-surface-muted); }
  .corloc-grupo .grupo-resumen,
  .corloc-grupo .grupo-tarjeta[open] > .grupo-resumen {
    min-height: var(--toque-raton);
    margin: 0; padding: 0; border: 0;
    cursor: default;
  }
  .corloc-grupo .grupo-flecha { display: none; }
  .corloc-grupo .grupo-nombre { font-size: var(--text-sm); }
  .corloc-grupo .grupo-meta { font-size: var(--text-xs); color: var(--color-fg-tertiary); }
  .corloc-grupo .grupo-editor {
    display: flex; align-items: flex-start; gap: 8px 16px;
  }
  .corloc-grupo .corloc-lista {
    flex: 1 1 auto;
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin: 0; padding: 0; border: 0; background: transparent;
  }
  .corloc-grupo .corloc-fila {
    flex: 1 1 300px; max-width: 480px;
    flex-wrap: nowrap; gap: 10px;
    padding: 0; min-height: 0; border: 0;
  }
  .corloc-grupo .corloc-fila + .corloc-fila { border-top: 0; }
  /* El hueco en blanco del final, escondido si el local ya tiene correo: el
     «+» lo enseña (copia la última fila, que pasa a ser la escondida, y la
     de antes queda a la vista). Sin esto, a 1280 cada local ocupaba dos
     líneas para enseñar una casilla vacía. Un local sin correo sí lo ve. */
  .corloc-grupo .corloc-lista:has(> .corloc-fila:nth-child(2)) > .corloc-fila:last-child:has(.corloc-correo:placeholder-shown) { display: none; }
  .corloc-grupo .corloc-correo { flex: 1 1 150px; min-width: 0; min-height: var(--toque-raton); font-size: var(--text-sm); }
  .corloc-grupo .corloc-usos { flex: none; flex-wrap: nowrap; gap: 10px; }
  .corloc-grupo .corloc-uso { min-height: var(--toque-raton); font-size: var(--text-xs); }
  .corloc-grupo .corloc-acciones { flex: none; flex-wrap: nowrap; gap: 6px; }
  .corloc-grupo .corloc-acciones .btn { min-height: var(--toque-raton); }
  /* «Añadir otro correo», solo con su «+» (el texto va en el `title` y en
     `aria-label`): con la palabra, dos correos no cabían en la fila a 1440. */
  .corloc-grupo [data-corloc-anadir] { font-size: 0; gap: 0; width: var(--toque-raton); padding: 0; justify-content: center; }
  .corloc-grupo [data-corloc-anadir] .icon { width: 16px; height: 16px; }
}

/* ── Avisos por correo: una fila por aviso, sus ajustes en columnas ─────────
   Eran 6.100 px: once tarjetas de 720 centradas con Para, Copia, Responder a
   y el PDF uno debajo de otro. Aquí van uno al lado de otro (lo que se
   compara al configurar un aviso es justo eso: a quién va y quién contesta),
   y debajo, a todo el ancho, quién lo cambió y los botones. */
@media (min-width: 1024px) {
  .avc-pantalla .page-subtitle,
  .avc-pantalla .avc-frase,
  .avc-pantalla .avsel-texto { max-width: 72ch; }
  .avc-pantalla .avc-tarjeta { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
  .avc-pantalla .avc-tarjeta .est-titulo { margin-bottom: 2px; }
  .avc-pantalla .avc-frase { margin-bottom: var(--space-3); font-size: var(--text-sm); }
  .avc-pantalla .avc-tarjeta form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 28px;
    align-items: start;
  }
  .avc-pantalla .avc-tarjeta form > :not(fieldset) { grid-column: 1 / -1; }
  .avc-pantalla .avc-grupo { margin-bottom: var(--space-3); }
  .avc-pantalla .avc-fijo { font-size: var(--text-sm); }
  .avc-pantalla .avc-grupo + .avc-grupo { padding-left: 0; }
  .avc-pantalla .avc-opcion { min-height: var(--toque-raton); font-size: var(--text-sm); }
  .avc-pantalla .avc-quien { margin-top: var(--space-1); }
  .avc-pantalla .avc-acciones .btn { min-height: var(--toque-raton); }
  /* Los correos que no se configuran aquí: fichas en rejilla. */
  .avc-pantalla .avc-info .avsel-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  .avc-pantalla .avc-info .avsel-fila + .avsel-fila { border-top: 0; }
  .avc-pantalla .avc-info .avsel-fila { border-bottom: 1px solid var(--color-border); }
}

/* ── Catálogo de averías: las familias en rejilla ───────────────────────────
   11.700 px en 720 centrados: cada departamento, una columna de familias y
   cada familia, sus averías una debajo de otra. Aquí cada departamento
   reparte sus familias en columnas, cada una de su alto; la avería que se
   abre se edita dentro de su familia, como antes. A partir de 1200, el
   maestro-detalle de abajo. */
@media (min-width: 1024px) {
  .cat-pantalla .page-subtitle,
  .cat-pantalla .cat-resumen,
  .cat-pantalla .cat-pestana-ayuda { max-width: 72ch; }
  .cat-pantalla .cat-filtro { max-width: 460px; }
  .cat-pantalla .cat-nueva { max-width: var(--pantalla-lectura); }
  .cat-pantalla .cat-dep {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 4px 20px;
    align-items: start;
  }
  /* La rejilla le gana a `[hidden]` (trampa ya pagada): sin esto, al buscar,
     un departamento sin nada que coincida seguía enseñando su título. */
  .cat-pantalla .cat-dep[hidden] { display: none; }
  .cat-pantalla .cat-dep-titulo { grid-column: 1 / -1; }
  .cat-pantalla .cat-familia { min-width: 0; margin-bottom: var(--space-2); }
  .cat-pantalla .cat-resumen-fila { min-height: var(--toque-raton); padding: 6px 12px; }
}

/* ── Catálogo de averías: maestro-detalle (1200 en adelante) ─────────────────
   Con las familias en rejilla seguían siendo 5.600 px a 1440: todo el
   catálogo de una vez. Aquí, el árbol departamento → categoría →
   subcategoría a la izquierda y, a la derecha, solo lo elegido (lo que el
   servidor marca `md-fuera` se esconde). Mientras se busca (`cat-buscando`),
   la derecha enseña lo que coincide en todo el catálogo. Por debajo de 1200
   no hay árbol y no se esconde nada: la página entera, como antes. */
@media (min-width: 1200px) {
  .maestro-detalle.cat-md { grid-template-columns: 300px minmax(0, 1fr); }
  .aparece .maestro-detalle.cat-md > .md-detalle { max-width: 860px; }
  /* El buscador de la página sobra: el del árbol hace lo mismo. */
  .cat-md > .md-detalle > .cat-filtro { display: none; }
  /* Lo elegido es una familia o unas pocas: una debajo de otra, a lo ancho
     de la columna, que es donde cabe el formulario al abrir una fila. */
  .cat-pantalla .cat-md .cat-dep { grid-template-columns: minmax(0, 1fr); }
  .cat-pantalla .cat-md .cat-dep-titulo { margin-top: 0; }
  .cat-pantalla .cat-md .cat-nueva { max-width: none; }

  .md-maestro.solo-escritorio.cat-arbol { display: flex; flex-direction: column; overflow: hidden; }
  .cat-arbol-buscar { flex: none; width: 100%; box-sizing: border-box; min-height: var(--toque-raton); font-size: var(--text-sm); margin-bottom: var(--space-2); }
  .cat-arbol-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .cat-arbol-lista, .cat-arbol-lista ul { list-style: none; margin: 0; padding: 0; }
  .cat-arbol-lista li[hidden] { display: none; }
  /* Plegado lo que no se mira: un departamento enseña sus categorías cuando
     es el elegido, o cuando se busca y tiene algo que coincide. */
  .cat-md:not(.cat-buscando) .cat-arbol-dep:not(.is-abierto) > ul { display: none; }
  .cat-arbol-nodo {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: var(--toque-raton); padding: 4px 10px;
    border-radius: var(--radius-md);
    color: var(--color-fg); text-decoration: none;
    font-size: var(--text-sm);
  }
  .cat-arbol-nodo > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-arbol-nodo .cat-cuenta { flex: none; font-variant-numeric: tabular-nums; }
  .cat-arbol-nodo:hover { background: var(--color-surface-muted); }
  .cat-arbol-nodo[aria-current="page"] { background: var(--color-accent-soft); font-weight: var(--weight-semibold); }
  .cat-arbol-n1 { font-weight: var(--weight-semibold); }
  .cat-arbol-n2 { padding-left: 22px; color: var(--color-fg-secondary); }
  .cat-arbol-n3 { padding-left: 38px; }
  .cat-arbol-nada { margin: var(--space-2) 10px; }
  .cat-arbol-nada[hidden] { display: none; }
  /* Lo que queda fuera de lo elegido. Con más peso que el `display: grid`
     de los departamentos (bloque 4), para ganarle. */
  .cat-pantalla .cat-md:not(.cat-buscando) .md-fuera { display: none; }
}

/* ── Avisos de pedido: tabla editable ───────────────────────────────────────
   Cuatro formularios de 1.112 px uno debajo de otro (1.355 px a 1440, y a
   1920 en 1.180 centrados). Aquí, una fila por avería: cuál es · a quién se
   avisa · direcciones · si se avisa · Guardar. Cada fila guarda lo suyo. */
@media (min-width: 1024px) {
  .avp-pantalla .est-pagina { max-width: none; margin: 0; }
  .avp-pantalla .est-pagina > .est-pie { max-width: 72ch; }
  .avp-pantalla form.est-bloque {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(190px, 240px) minmax(220px, 1.4fr) 170px auto;
    column-gap: 16px;
    align-items: end;
    margin: 0; padding: 10px 16px;
    border: 1px solid var(--color-border); border-top: 0;
    background: var(--color-surface-strong);
  }
  .avp-pantalla form.est-bloque:first-of-type { border-top: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: var(--space-4); }
  .avp-pantalla form.est-bloque:last-of-type { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .avp-pantalla form.est-bloque > .est-titulo { grid-column: 1; grid-row: 1; margin: 0; align-self: start; }
  .avp-pantalla form.est-bloque > p:nth-of-type(1) { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
  .avp-pantalla form.est-bloque > .field { grid-row: 1 / span 2; margin: 0; min-width: 0; }
  .avp-pantalla form.est-bloque > .field .field-label .est-pie { display: block; margin: 0; text-transform: none; letter-spacing: 0; font-weight: normal; }
  .avp-pantalla form.est-bloque > .field:last-of-type .field-label { display: flex; align-items: center; gap: 8px; min-height: var(--toque-raton); }
  .avp-pantalla form.est-bloque > .btn { grid-column: 5; grid-row: 1; min-height: var(--toque-raton); }
  .avp-pantalla form.est-bloque > p:nth-of-type(2) { grid-column: 5; grid-row: 2; margin: 2px 0 0; font-size: var(--text-xs); }
  .avp-pantalla form.est-bloque .field-input,
  .avp-pantalla form.est-bloque .field-select { min-height: var(--toque-raton); }
}

/* 1024–1279: la fila de cinco columnas pide ~926 px y el formulario tiene
   700 a 1024 (medido el 2026-10-10 con el scrollWidth de cada formulario:
   se salía 205 px a 1024, 129 a 1100 y 29 a 1200, y la página no lo decía
   porque el contenido lo recortaba). Aquí, en dos filas: la avería arriba,
   sus tres campos en una fila y las acciones debajo. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .avp-pantalla form.est-bloque {
    grid-template-columns: minmax(200px, 1.2fr) minmax(180px, 1.5fr) minmax(130px, .8fr);
    row-gap: 8px;
  }
  .avp-pantalla form.est-bloque > .est-titulo { grid-column: 1 / -1; grid-row: 1; }
  .avp-pantalla form.est-bloque > p:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
  .avp-pantalla form.est-bloque > .field { grid-row: 3; }
  .avp-pantalla form.est-bloque > .btn { grid-column: 1; grid-row: 4; justify-self: start; }
  .avp-pantalla form.est-bloque > p:nth-of-type(2) { grid-column: 2 / -1; grid-row: 4; align-self: center; margin: 0; }
}

/* ═══ DENSIDAD DE ESCRITORIO (restyling, 2026-10-20) ═════════════════════════
 *
 * Victor, con el restyling ya en producción: en un portátil al 100 % «todo se
 * ve sobredimensionado». El logo del menú medía 74 px, cada entrada 46 y el
 * menú del admin no cabía; los desplegables de la ficha, 44 px con letra de
 * 16, y la conversación se quedaba en una franja de un mensaje porque la caja
 * de respuesta se comía el resto. Era la escala de la guía (cuerpo 16, en ABC
 * Social, que abulta más que Helvetica) más tamaños de dedo aplicados a un
 * ratón.
 *
 * Aquí, a partir de 1024 px, la densidad de escritorio: cuerpo 15, menú 15
 * con entradas de 40, logo de unos 44 px de alto, títulos 24 (la ficha, 22),
 * controles y botones de 38, chips de 28. El móvil no pasa por aquí y se
 * queda con la escala de la guía y los 44 px del dedo.
 */
@media (min-width: 1024px) {
  :root {
    --text-base: 15px;
    --text-md:   15px;
    --text-lg:   15px;
    --text-xl:   17px;
    --leading-cuerpo: 22px;
    --control-alto: 38px;
  }
  body { font-size: 15px; line-height: 22px; }

  /* ── El menú lateral: cabe entero en 768 px con «Administración» plegado ── */
  .app-sidebar { padding-top: 14px; padding-bottom: 12px; }
  .app-logo { padding: 2px 8px 12px; margin-bottom: 10px; }
  .app-logo .logo-marca-img { width: 80px; }        /* 44 px de alto */
  .app-sidebar .nav-group-label { padding: 8px 12px 4px; }
  .app-sidebar .nav-item {
    min-height: 40px;
    padding-block: 9px;
    margin-bottom: 2px;
    font-size: 15px;
    line-height: 20px;
  }
  .app-sidebar .nav-item .icon { width: 18px; height: 18px; }

  /* ── Titulares ── */
  .page-title { font-size: 24px; line-height: 30px; }
  .ficha-cabecera .page-title { font-size: 22px; line-height: 28px; }

  /* ── Controles, botones y chips ── */
  .field-input:not(textarea), .field-select,
  .filter-search, .inbox-search input {
    min-height: var(--control-alto);
    padding-block: 6px;
    font-size: 14px;
    line-height: 20px;
  }
  /* Los que no llevan nuestras clases (los desplegables del lateral de la
     ficha, entre otros), con `:where()` para no pisar a ningún control que
     se esconde en 1 px (ver la red de seguridad de style.css). */
  :where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"])) {
    min-height: var(--control-alto);
    font-size: 14px;
  }
  textarea, .field-input { font-size: 14px; }
  .field-label { font-size: 14px; }
  .btn {
    min-height: var(--control-alto);
    padding-block: 8px;
    padding-inline: 16px;
    font-size: 14px;
    line-height: 20px;
  }
  .btn-sm { min-height: 32px; padding-block: 5px; padding-inline: 12px; }
  .chip {
    min-height: 28px;
    padding-block: 3px;
    padding-inline: 10px;
    font-size: 14px;
    line-height: 20px;
  }

  /* ── La ficha del técnico: la conversación se ve ──
     Con la caja de respuesta a su tamaño (textarea de dos líneas y pestañas
     Pública / Nota interna de 32) y un mínimo para los mensajes; si la
     ventana no da para los dos, se desplaza la página, no se aplasta la
     conversación. */
  .ticket-layout { min-height: 460px; }
  .thread-scroll { min-height: 200px; padding: 14px 18px; }
  .ticket-main-header { padding: 10px 18px; }
  .ticket-main .reply-form { padding: 10px 14px; }
  .reply-form .scope-toggle { margin-bottom: 6px; }
  .reply-form .scope-toggle label { padding: 4px 10px; min-height: 32px; }
  .reply-form textarea { min-height: 64px; font-size: 14px; padding: 8px 10px; }
}