/* ═══════════════════════════════════════════════════════════════════════════
   shell-extra.css
   ───────────────────────────────────────────────────────────────────────────
   El paquete de GUIA-DISENO.md define el ESTILO de .toast (nucleo.css) y la
   animación de #loadBar (@keyframes loadAnim, también en nucleo.css), pero no
   trae la CAJA que los contiene — eso es propio de cada app. Va acá, cargada
   junto con nucleo.css/componentes.css (antes de las hojas por rol), con los
   mismos tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toast: el contenedor que los apila ─────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast-container .toast { pointer-events: auto; }

/* ── Overlay de CARGA: una barra fina arriba, no un spinner de pantalla
   completa — así no bloquea ver el resto del shell mientras algo carga.
   #loadBar mismo (color, altura) va acá; la animación (loadAnim) ya está en
   nucleo.css. ────────────────────────────────────────────────────────────── */
.ovl-carga {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10001;
  background: transparent;
}
#loadBar {
  height: 100%;
  width: 0%;
  background: var(--blue);
  animation: loadAnim 1.1s ease-in-out infinite;
}
/* A los 30s se admite que está tardando (GUIA-DISENO.md §12) — la línea la
   agrega nucleo/app.js con esta clase, no aborta nada. */
.ovl-carga-lenta::after {
  content: 'Esto está tardando más de lo normal…';
  position: fixed;
  top: 10px; left: 50%; transform: translateX(-50%);
  background: var(--navy-2); border: 1px solid var(--border);
  color: var(--text-2); font-size: 12px; padding: 6px 14px;
  border-radius: var(--radius, 8px); box-shadow: var(--sombra);
}

/* ── Transición entre vistas: el logo blanco se revela en el azul, acotada al área de
   #mainContent (la posición/tamaño los calcula nucleo/app.js sobre el rect real, no CSS
   puro, porque depende del layout — sidebar fija vs. barra inferior en mobile).
   El fondo usa --navy-2 (el token de superficie, no un color escrito a mano): en el tema
   oscuro es oscuro y el logo blanco de abajo ya se ve antes de que empiece el barrido; en
   el claro es blanco y el logo blanco queda invisible contra el fondo hasta que el azul lo
   revela — mismo efecto en los dos temas, cada uno con su propio punto de partida. Un
   `background: #fff` fijo acá dejaba un rectángulo blanco liso sobre el topbar y la barra
   lateral oscuros en el tema oscuro (el tema por defecto). ──────────────────────────────── */
.ovl-vista {
  position: fixed;
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.ovl-vista.visible {
  opacity: 1;
  visibility: visible;
}
.ovl-vista-logo {
  position: relative;
  width: min(280px, 68vw);
  aspect-ratio: 20 / 3;
}
.ovl-vista-logo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ovl-vista-logo img:last-child {
  clip-path: inset(0 100% 0 0);
  filter: brightness(1.9);
}
.ovl-vista.visible .ovl-vista-logo img:last-child {
  animation: logoCarga .4s ease-in-out forwards;
}
@keyframes logoCarga {
  to { clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ovl-vista, .ovl-vista-logo img:last-child { transition: none; animation-duration: .01ms; }
}

/* ── Overlay de ERROR: nodo propio, independiente del de carga (GUIA-DISENO.md
   §12) — reusar uno solo para los dos deja toda carga posterior mostrando el
   error viejo mientras los datos llegan bien por detrás. ──────────────────── */
.ovl-error {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ovl-error-caja {
  background: var(--navy-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  padding: 22px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: var(--sombra);
}
.ovl-error-texto {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* El rol actual, junto al nombre de la app en el membrete — pedido explícito: la info de
   #userInfo (a la derecha del todo) se puede perder de vista en pantallas angostas. */
/* ⚠ El coral puro (#FF5959) sobre el azul del topbar (#003A70) da 3,71:1: no llega a 4,5:1 para
   texto. Se aclara un 25 % hacia el papel (≈4,65:1) solo para la LETRA; la línea bajo el topbar
   sigue siendo el coral de marca. */
#logoRol::before { content: " · "; }
/* El respaldo #ff8383 es la misma mezcla con los valores de marca (coral #ff5959 + 25 % de #fff): 4,8:1 sobre
   #003A70. Va como respaldo de var() para que un analizador que no resuelve color-mix() mida un color que cumple. */
:root { --mx-coral-letra: color-mix(in srgb, var(--mx-coral, #ff5959) 75%, var(--mx-paper, #fff)); }
#logoRol { color: var(--mx-coral-letra, #ff8383); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — el sistema de diseño original apunta a 1366px de escritorio
   (ver GUIA-DISENO.md: "es el notebook real de la oficina"). Esta app la usan
   mecánicos en una tablet o el teléfono, en terreno, así que hace falta una
   capa mobile que el paquete no traía. Todo lo de acá es ADITIVO: ninguna
   regla de styles.css se toca, así que el escritorio queda exactamente igual.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-date { display: none; } /* no hay espacio, y no es información crítica */
  #userInfo { display: none; }    /* ya está resumido en #logoRol junto al logo */
  .logo-sub { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo-img { width: 118px; height: auto; }
  /* ⚠ A 360 px el membrete (logo + "Mantenimiento · <rol>") y el bloque derecho (tema + Salir) no
     caben juntos y empujaban el botón "Salir" 12 px fuera de la pantalla: scroll horizontal en
     TODAS las vistas (informe QA v8, N-01). El membrete cede (el rol se recorta con «…») y el
     bloque derecho no se encoge nunca, así que "Salir" siempre queda a la vista. */
  .logo { min-width: 0; flex: 1 1 auto; }
  /* Con el logo y los controles de la derecha no hay lugar para «Mantenimiento · <rol>»: en
     pantallas angostas se deja solo el rol, que es lo que identifica quién está operando
     (#userInfo, con el nombre, está oculto en móvil). */
  @media (max-width: 400px) {
    .logo-app { display: none; }
    #logoRol::before { content: none; }
    .logo { gap: 6px; }
    .logo-img { width: 96px; }
    /* `.logo .logo-sub` le gana a la regla de escritorio `.logo-sub` (más abajo en la hoja) sin !important. */
    .logo .logo-sub { padding-left: 8px; margin-left: 0; }
  }
  .topbar-right { flex: none; gap: 10px; }

  /* La barra lateral pasa de riel vertical a barra de pestañas fija abajo —
     el patrón que cualquiera reconoce en una app de teléfono. Se sobreescribe
     con reglas propias en vez de tocar .sidebar/.expandida de styles.css: esa
     animación de abrir/cerrar tiene media página de comentarios documentando
     bugs ya resueltos, y no hace falta romper nada de eso para esto. */
  .shell { flex-direction: column; height: auto; min-height: calc(100vh - 60px); }
  /* El nav de abajo es `sticky`, no `fixed` — no reserva espacio solo: si el contenido de
     .main es más alto que la pantalla, al hacer scroll el nav se pega abajo TAPANDO lo
     último que hay (el botón de enviar de un formulario largo, por ejemplo). Este padding
     le deja lugar de sobra (alto real del nav ~54px + el "safe area" del celular).
     El padding de arriba/costados y el gap entre el título y la tarjeta de abajo son los
     de escritorio (28px/24px) sin achicar — en una pantalla angosta se leen como espacio
     de sobra, no como aire a propósito. */
  :root { --mx-nav-alto: 64px; } /* alto de la barra de abajo: la usan también las barras fijas de los formularios */
  .main {
    order: 1;
    padding: 16px 16px calc(var(--mx-nav-alto) + 14px + env(safe-area-inset-bottom, 0px));
    gap: 14px;
    /* ⚠ `.main` trae `overflow: auto` (styles.css). En el teléfono la que scrollea es la página, no
       .main: un `position: sticky` busca su ancestro que scrollea, encuentra .main (que no se mueve)
       y NUNCA se pega — la barra de acción y el progreso del reporte quedaban al final del contenido.
       `clip` en x recorta lo que se desborde sin crear un contenedor de scroll. */
    overflow-x: clip; overflow-y: visible;
  }
  .sidebar,
  .sidebar.expandida {
    order: 2;
    width: 100%; min-width: 0; height: auto;
    flex-direction: row; align-items: stretch; justify-content: space-around;
    gap: 0; padding: 4px 2px;
    overflow-x: auto; overflow-y: hidden;
    position: sticky; bottom: 0; top: auto; z-index: 200;
    border-right: none; border-top: 1px solid var(--border);
  }
  .sidebar-toggle { display: none; } /* ya está siempre "abierta" a lo ancho, no hay qué contraer */
  .sidebar .nav-label { display: none; } /* el rótulo de grupo no cabe en una barra horizontal */
  .sidebar .nav-item {
    flex: 1 1 0; flex-direction: column; justify-content: center;
    gap: 2px;
    min-height: calc(var(--mx-nav-alto) - 8px);
    text-align: center; white-space: nowrap;
  }
  /* Todo lo que se toca llega a 44 px, el mínimo para un dedo. */
  .btn { min-height: 44px; }
  .sidebar .nav-icon { width: auto; }
  /* Tamaño de toque del menú de abajo. styles.css achica el riel colapsado con
     `.sidebar:not(.expandida) .nav-item` / `.nav-icon` (especificidad 0,3,0): estos selectores la
     igualan y, por estar después en el orden de hojas, ganan sin !important. Solo van aquí las
     propiedades que deben ganar: el `gap: 0` del riel colapsado se conserva como estaba. */
  .sidebar .nav-item,
  .sidebar:not(.expandida) .nav-item { padding: 6px 4px; font-size: 10.5px; }
  .sidebar .nav-icon,
  .sidebar:not(.expandida) .nav-icon { font-size: 19px; }

  /* Formularios: en 1366px .card-body input tiene max-width:480px a propósito
     (que no se estiren en una pantalla ancha) — en un teléfono ESE límite es
     el que sobra, porque el propio viewport ya mide menos que eso. */
  .card-body input, .card-body select, .card-body textarea,
  .modal-body input, .modal-body select, .modal-body textarea,
  .card-body .mxsel-btn, .modal-body .mxsel-btn { max-width: none; }

  .page-header { flex-wrap: wrap; gap: 8px; }

  /* Los botones de Prioridad (Baja/Media/Alta) se hicieron angostos y de ancho fijo a
     propósito para el escritorio — en una pantalla de celular esos 3 anchos fijos más los
     espacios entre ellos no entran, y "Alta" queda cortado fuera de la tarjeta en vez de
     acomodarse. Acá vuelven a repartirse el ancho disponible en partes iguales, que es
     justamente lo que un botón angosto de ancho fijo no puede garantizar en cualquier
     pantalla. */
  .mec-prioridad .mec-prio, .sup-prioridad .sup-prio, .jc-prioridad .jc-prio {
    flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px;
  }

  /* Las pestañas de la Bandeja (Por habilitar/Habilitadas/.../Cerradas) no entran de lado a lado
     en un celular — antes se cortaban en seco ("Cerradas" desaparecía sin aviso). Ahora se
     puede deslizar el dedo para ver el resto, como cualquier carrusel de pestañas. */
  /* Deslizar para ver "Cerradas" no convencía — se pierde de vista que existe. Se
     acomodan solas en más de una línea en vez de eso, todas visibles de una. */
  .sup-tabs, .jc-tabs, .mec-tabs, .ges-tabs {
    display: flex;
    flex-wrap: wrap;
  }
  .sup-tab, .jc-tab, .mec-tab, .ges-tab { flex: 1 1 auto; }

  /* Las tablas de Gestión (Personal, Solicitudes, Actividad) tienen columnas de sobra para
     una pantalla angosta — con scroll horizontal se leían a los tumbos, con columnas
     cortadas a mitad de palabra sin ningún aviso de que había más para el costado. Se
     convierten en tarjetas apiladas, mismo patrón de lista que ya usa el resto de la app
     en celular (Equipos, Bitácora, etc.) — cada fila se convierte en una tarjeta, cada
     celda en una línea con su propio rótulo (viene del atributo `data-label` que ya
     traían las filas, no hizo falta tocar el marcado). */
  .ges-table-wrap { overflow-x: visible; border: none; background: none; }
  .ges-table, .ges-table thead, .ges-table tbody, .ges-table th, .ges-table td, .ges-table tr {
    display: block;
  }
  .ges-table thead { display: none; }
  .ges-table tr {
    background: var(--navy-3); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 8px; padding: 4px 14px;
  }
  .ges-table td {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .ges-table td:last-child { border-bottom: none; }
  .ges-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; font-weight: 600; color: var(--text-3);
    letter-spacing: .5px; text-transform: uppercase;
    margin-bottom: 3px;
  }
}

/* ── Campos de formulario dentro de .card-body / .modal-body ────────────────────────────
   El sistema de diseño no trae una regla genérica para label/input sueltos — cada vista de
   la app original los envolvía en su propia clase (.us-field, .rp-field). Como esta app
   tiene 20+ formularios repartidos en 4 apps, conviene una regla compartida en vez de
   repetir la envoltura en cada hoja por apartado. */
.card-body label,
.modal-body label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 16px 0 6px;
}
.card-body label:first-child,
.modal-body label:first-child { margin-top: 0; }
.card-body input,
.card-body select,
.card-body textarea,
.modal-body input,
.modal-body select,
.modal-body textarea {
  display: block;
  width: 100%;
  max-width: 480px;
  background: var(--navy-3);
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 9px 11px;
  border-radius: 6px;
  font-size: 14.5px;
  font-family: var(--font);
}
.card-body input:focus,
.card-body select:focus,
.card-body textarea:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: var(--blue-light);
}
/* select-propio.js reemplaza el <select> por un botón (.mxsel-btn) que hereda las clases
   del original — como el original no tenía una clase propia, esto le da el mismo ancho. */
.card-body .mxsel-btn,
.modal-body .mxsel-btn { display: flex; width: 100%; max-width: 480px; }

/* El botón visible del desplegable propio (select-propio.js) tiene SU PROPIO tamaño de
   letra en styles-extra.css (12px) — separado del <select> real, que queda oculto. Subir
   el tamaño de los <select>/<input> de arriba no cambia nada a la vista si no se sube
   también esto, porque lo que el usuario ve y lee es el botón, no el select oculto. */
.mxsel-btn { font-size: 14.5px; padding: 9px 11px; }
.mxsel-item { font-size: 14px; padding: 8px 10px; }
.mxdp-campo { font-size: 14.5px; }

/* Botones: la hoja base (styles.css, no se toca — es el sistema) los deja en 13px. */
.btn { font-size: 14.5px; }

/* "Mantenimiento", junto al logo — la hoja base lo deja en 11px, un poco chico. */
.logo-sub { font-size: 12.5px; border-left: 1px solid var(--border-2); padding-left: 12px; margin-left: 2px; } /* antes en línea (data-u de index.html) */

/* Un <label> que envuelve un checkbox (no un campo de texto) no debe heredar el estilo de
   etiqueta de formulario (bloque, mayúsculas, margen de 16px arriba) — necesita estar en
   línea con su propio checkbox. Sin esto, cada checkbox de una fila (ej. "Tipo de
   intervención": Reparación/Mantención/Inspección) termina con SU PROPIO margen individual
   en vez de compartir el mismo, y quedan desalineados entre sí — el primero además "gana"
   `.card-body label:first-child{margin-top:0}` (que en verdad apunta al primer hijo de SU
   padre inmediato, no del card completo) y queda más arriba que el resto. `:has()` le da
   más especificidad que la regla genérica de arriba, así que gana sin depender del orden
   de las hojas. */
.card-body label:has(input[type="checkbox"]),
.modal-body label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  cursor: pointer;
}
.card-body label:has(input[type="checkbox"]) input,
.modal-body label:has(input[type="checkbox"]) input {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 1.5px solid var(--border-2);
  background: var(--navy-3);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.card-body label:has(input[type="checkbox"]) input:hover,
.modal-body label:has(input[type="checkbox"]) input:hover {
  border-color: var(--blue-light, #60a5fa);
}
.card-body label:has(input[type="checkbox"]) input:active,
.modal-body label:has(input[type="checkbox"]) input:active {
  transform: scale(.92);
}
.card-body label:has(input[type="checkbox"]) input:checked,
.modal-body label:has(input[type="checkbox"]) input:checked {
  background: var(--blue);
  border-color: var(--blue);
}
/* La tilde no es una imagen ni un ícono aparte — son dos bordes de un cuadrado invisible
   rotados 45°, así queda nítida en cualquier tamaño de pantalla sin pedir un archivo más. */
.card-body label:has(input[type="checkbox"]) input:checked::after,
.modal-body label:has(input[type="checkbox"]) input:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.card-body label:has(input[type="checkbox"]) input:focus-visible,
.modal-body label:has(input[type="checkbox"]) input:focus-visible {
  outline: 2px solid var(--blue-light, #60a5fa);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .card-body label:has(input[type="checkbox"]) input,
  .modal-body label:has(input[type="checkbox"]) input { transition: none; }
}

/* ── Selector de fotos (ver crearSelectorFotos en nucleo/app.js) ────────────────────── */
.selfoto-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* Se ven parecidos a "Cancelar"/"Enviar" (mismo .btn.btn-ghost) y son cosas muy distintas
   — uno adjunta algo, el otro decide qué pasa con todo el formulario. El borde punteado
   los marca como "acción secundaria, para agregar algo", no como parte del cierre. */
.selfoto-botones button {
  border-style: dashed;
  color: var(--text-2);
  font-size: 13px;
  padding: 7px 14px;
}
/* La fila de Cancelar/Enviar (o cualquier cierre de formulario parecido) se separa con una
   línea — deja claro que ya no se está completando el formulario, se está decidiendo. */
.acciones-form {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 18px;
}
.selfoto-miniaturas {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.selfoto-miniaturas:empty { margin-top: 0; }
.selfoto-mini {
  position: relative; width: 76px; height: 76px;
  border-radius: 6px; overflow: hidden; border: 1px solid var(--border-2);
  background: var(--navy-4);
}
.selfoto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.selfoto-quitar {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; border: none;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.selfoto-quitar:hover { background: rgba(0,0,0,.85); }

/* ── Globo con el nombre del apartado, al pasar el cursor por un ícono de la barra
   colapsada — NO expande ni mueve nada (ver el motivo largo en styles.css: expandir con
   el hover corría el ícono bajo el cursor y el clic caía en otro lado). El ícono se queda
   fijo en su lugar; solo aparece una etiqueta flotante al costado.

   ⚠ `position: fixed`, calculado por JavaScript (ver activarTooltipsSidebar en
   nucleo/app.js) — NO `position: absolute` colgado del ítem. `.sidebar` tiene
   `overflow-y: auto`, y eso recorta en los dos ejes (la regla de CSS: si un eje es
   'auto' y el otro 'visible', el navegador fuerza el 'visible' a 'auto' también) —
   un globo `absolute` que se sale de los 62px de ancho de la barra colapsada queda
   cortado a la mitad, invisible, aunque su `opacity` calculada dé 1. Es el mismo
   motivo por el que el panel del selector de fecha y el de opciones ya usan `fixed`. ── */
#navTooltip {
  position: fixed;
  z-index: 10010;
  background: var(--navy-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease; /* 30% más rápido que el original (.14s), a pedido */
}
#navTooltip.mostrado { opacity: 1; }
#navTooltip::before {
  content: "";
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--navy-2);
}
@media (prefers-reduced-motion: reduce) {
  #navTooltip { transition: none; }
}

/* Cabecera de usuario mejorada.
   ⚠ #userInfo vive DENTRO de .topbar, que es el membrete corporativo — no sigue al tema
   (estilo-corporativo.css §"El marco"). Por eso el texto y el círculo de iniciales usan
   los tokens --mx-marco-* (siempre blancos sobre el azul de marca) y NO --text/--text-3:
   esos sí siguen al tema y ya causaron el bug medido en estilo-corporativo.css ("nombre
   casi blanco sobre membrete blanco" en oscuro, "nombre oscuro sobre membrete azul" en
   claro). Mismo defecto, mismo lugar — usar los tokens del marco lo evita de raíz. */
#userInfo{display:flex;align-items:center;gap:9px;min-width:0}
.mx-user-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mx-marco-hueco);border:1px solid var(--mx-marco-tenue);color:var(--mx-marco-tinta);font-size:10px;font-weight:800;flex:none}
.mx-user-copy{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.mx-user-copy strong{font-size:11px;color:var(--mx-marco-tinta);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.mx-user-copy small{font-size:9px;color:var(--mx-marco-suave);margin-top:3px;white-space:nowrap}
@media(max-width:680px){#userInfo{display:none}}

/* La ventana del modal es un <dialog> (accesibilidad nativa). Siempre lleva `open`: la muestra u
   oculta `.modal-overlay.open`, como antes. Se anulan los estilos del navegador para <dialog>
   (posición absoluta, margen automático, relleno, color de sistema) para que se vea igual que el
   <div class="modal"> anterior; el resto lo pone `.modal` en styles.css. */
dialog.modal {
  position: static;
  inset: auto;
  margin: 0;
  padding: 0;
  color: inherit;
  height: auto;
}