/* Design Match App Mode — sólo se activa con html.dm-app-mode. */
:root {
  --dm-motion-instant: 120ms;
  --dm-motion-fast: 180ms;
  --dm-motion-base: 240ms;
  --dm-motion-slow: 300ms;
  --dm-motion-curve: cubic-bezier(.2,.78,.2,1);
  --dm-app-safe-top: env(safe-area-inset-top, 0px);
  --dm-app-safe-right: env(safe-area-inset-right, 0px);
  --dm-app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dm-app-safe-left: env(safe-area-inset-left, 0px);

  --glass-veil: rgba(255,254,250,.68);
  --glass-blur: 22px;
  --glass-saturation: 1.36;
  --glass-brightness: 1.045;
  --glass-contrast: 1.035;
  --glass-top-light: rgba(255,255,255,.82);
  --glass-bottom-edge: rgba(40,39,55,.16);
  --glass-shadow: 0 16px 48px rgba(30,31,48,.13), 0 2px 8px rgba(30,31,48,.08);
  --glass-reflection: rgba(255,255,255,.28);
  --glass-text: #222238;
  --glass-icon: rgba(43,43,66,.66);
  --glass-active: rgba(255,255,255,.48);
}

#dm-app-header[data-glass-context="dark"] {
  --glass-veil: rgba(31,31,48,.58);
  --glass-top-light: rgba(255,255,255,.26);
  --glass-bottom-edge: rgba(0,0,0,.32);
  --glass-shadow: 0 18px 52px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.2);
  --glass-reflection: rgba(255,255,255,.13);
  --glass-text: #fffefa;
  --glass-icon: rgba(255,254,250,.82);
  --glass-active: rgba(255,255,255,.18);
}

#dm-app-header[data-glass-context="color"],
#dm-app-header[data-glass-context="photo"] {
  --glass-veil: rgba(248,247,243,.6);
  --glass-saturation: 1.5;
  --glass-brightness: 1.025;
  --glass-contrast: 1.06;
  --glass-bottom-edge: rgba(22,24,39,.2);
}

html.dm-app-mode {
  min-height: 100%;
  background: var(--c-bg, #f6f3ea);
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

html.dm-app-mode.dm-app-booting body { visibility: hidden !important; }

html.dm-app-mode body {
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: calc(54px + var(--dm-app-safe-top)) !important;
  padding-right: var(--dm-app-safe-right) !important;
  padding-bottom: calc(92px + var(--dm-app-safe-bottom)) !important;
  padding-left: var(--dm-app-safe-left) !important;
  overflow-x: clip !important;
  overscroll-behavior-y: contain;
}

html.dm-app-mode.dm-app-sheet-open body { overflow: hidden !important; }

html.dm-app-mode ::selection { background: rgba(216,204,97,.42); color: #242438; }
html.dm-app-mode :where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid rgba(105,94,14,.72);
  outline-offset: 3px;
}

html.dm-app-mode body > nav:not(#dm-app-bottom-nav),
html.dm-app-mode body > header:not(#dm-app-header),
html.dm-app-mode #dm-topnav,
html.dm-app-mode .site-nav,
html.dm-app-mode .mobile-links,
html.dm-app-mode .navbar,
html.dm-app-mode .topnav,
html.dm-app-mode .sidebar,
html.dm-app-mode body > footer,
html.dm-app-mode .site-footer,
html.dm-app-mode #dm-site-footer { display: none !important; }

html.dm-app-mode .main,
html.dm-app-mode .main-content,
html.dm-app-mode .dashboard-main {
  margin-left: 0 !important;
  width: 100% !important;
  min-height: auto !important;
}

html.dm-app-mode .hero,
html.dm-app-mode .listing-hero,
html.dm-app-mode .blog-hero { padding-top: 0 !important; }

html.dm-app-mode .dm-liquid-glass {
  position: relative;
  isolation: isolate;
  color: var(--glass-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
    var(--glass-veil);
  border-top: 1px solid color-mix(in srgb, var(--glass-top-light) 82%, transparent);
  border-right: 1px solid rgba(255,255,255,.24);
  border-bottom: 1px solid var(--glass-bottom-edge);
  border-left: 1px solid rgba(255,255,255,.3);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter:
    blur(var(--glass-blur)) saturate(var(--glass-saturation))
    brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  backdrop-filter:
    blur(var(--glass-blur)) saturate(var(--glass-saturation))
    brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
}

html.dm-app-mode .dm-liquid-glass::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(85% 38% at 18% -4%, var(--glass-top-light), transparent 72%),
    radial-gradient(48% 58% at 102% 34%, var(--glass-reflection), transparent 68%);
  opacity: .72;
  mix-blend-mode: screen;
}

html.dm-app-mode .dm-liquid-glass::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 12%, var(--glass-reflection) 34%, transparent 53%);
  opacity: .18;
  transform: translateX(-16%);
}

#dm-app-bottom-nav[data-glass-context="dark"] {
  --glass-veil: rgba(28,28,43,.62);
  --glass-top-light: rgba(255,255,255,.3);
  --glass-bottom-edge: rgba(0,0,0,.38);
  --glass-text: #fffefa;
  --glass-icon: rgba(255,254,250,.84);
  --glass-active: rgba(255,255,255,.2);
}

#dm-app-bottom-nav[data-glass-context="color"],
#dm-app-bottom-nav[data-glass-context="photo"] {
  --glass-veil: rgba(247,246,241,.62);
  --glass-saturation: 1.58;
  --glass-brightness: 1.04;
  --glass-contrast: 1.08;
  --glass-bottom-edge: rgba(21,23,37,.25);
}

html.dm-app-mode .dm-app-pressable {
  touch-action: manipulation;
  transition:
    transform var(--dm-motion-instant) var(--dm-motion-curve),
    filter var(--dm-motion-instant) ease,
    opacity var(--dm-motion-instant) ease;
}

html.dm-app-mode .dm-app-pressable:active {
  transform: scale(.975);
  filter: brightness(1.045);
}

/* Header contextual */
#dm-app-header {
  position: fixed;
  z-index: 9000;
  inset: 0 0 auto;
  min-height: calc(58px + var(--dm-app-safe-top));
  padding: calc(8px + var(--dm-app-safe-top)) max(14px, var(--dm-app-safe-right)) 8px max(14px, var(--dm-app-safe-left));
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
/* La cabecera no pinta nada: ni fondo, ni radio, ni borde, ni sombra.
   Tenía las cuatro cosas —un radio de 24 px abajo, un velo al 12 %, un
   `border-bottom` y una sombra de 34 px— más dos pseudoelementos que le
   dibujaban un brillo radial arriba y una línea de luz cruzándola. Todo eso
   junto era la cápsula de ancho completo que envolvía el menú, la marca y el
   «+». `app-apple.css` ya la anulaba encima, pero dejarla escrita aquí es
   dejar la barra a un fallo de carga de distancia. */

.dm-app-header-title {
  min-width: 0;
  text-align: center;
  font: 650 15px/1.15 Inter, sans-serif;
  letter-spacing: -.015em;
  color: var(--glass-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dm-app-header-brand { height: 24px; width: auto; max-width: 126px; display: block; margin: auto; }
.dm-app-header-actions { display: flex; align-items: center; gap: 4px; }
.dm-app-header-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--glass-text);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.dm-app-header-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dm-app-header-spacer { width: 44px; height: 44px; }

/* Bottom navigation */
#dm-app-bottom-nav {
  position: fixed;
  z-index: 9000;
  /* ── Primero la versión simple, y sólo después la buena ──────────────────
     `max()` con un `calc()` que lleva `env()` dentro no lo entienden todas las
     versiones de Safari, y una declaración que no se entiende NO deja un valor
     a medias: se tira entera. Un `bottom` tirado deja al dock `fixed` sin
     ninguna referencia, o sea clavado en su posición estática — que durante el
     arranque, con el contenido todavía vacío, es justo debajo de la cabecera.
     Ésa es la barra enorme arriba de la pantalla que se reportó desde iPhone.
     Con la declaración simple delante, lo peor que puede pasar es que el dock
     ignore la zona segura; nunca que se vaya al techo. */
  left: 12px;
  right: 12px;
  bottom: 10px;
  left: max(12px, calc(var(--dm-app-safe-left, 0px) + 8px));
  right: max(12px, calc(var(--dm-app-safe-right, 0px) + 8px));
  bottom: max(10px, calc(var(--dm-app-safe-bottom, 0px) + 8px));
  max-width: 540px;
  height: 68px;
  margin-inline: auto;
  padding: 5px;
  border-radius: 25px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  contain: layout paint;
  display: grid !important;
  border: 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.24),transparent 34%),
    var(--glass-veil);
  background-color: var(--glass-veil);
  box-shadow:
    0 18px 54px rgba(24,25,38,.2),
    0 4px 13px rgba(24,25,38,.1),
    inset 0 1px 0 var(--glass-top-light),
    inset 0 -1px 0 var(--glass-bottom-edge);
  transform: translateY(0);
  transition: transform var(--dm-motion-base) var(--dm-motion-curve), opacity var(--dm-motion-fast) ease;
}

#dm-app-bottom-nav::before {
  background:
    radial-gradient(76% 72% at 18% -12%,var(--glass-top-light),transparent 64%),
    radial-gradient(52% 82% at 96% 34%,var(--glass-reflection),transparent 68%);
  opacity: .8;
}

#dm-app-bottom-nav::after {
  inset: 1px 11% auto;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(108deg,transparent 5%,var(--glass-reflection) 42%,transparent 74%);
  filter: blur(.3px);
  opacity: .34;
  transform: translateX(-9%);
}

.dm-app-nav-indicator {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 5);
  border-radius: 20px;
  background:
    radial-gradient(78% 50% at 22% 2%, rgba(255,255,255,.74), transparent 72%),
    linear-gradient(180deg, var(--glass-active), rgba(255,255,255,.14));
  border: 0;
  box-shadow:
    0 7px 18px rgba(35,36,52,.11),
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -1px 0 rgba(42,43,60,.16),
    inset 0 0 14px rgba(255,255,255,.13);
  transform: translate3d(calc(var(--dm-app-nav-index, 0) * 100%),0,0) scaleX(var(--dm-app-nav-scale, 1));
  transform-origin: center;
  transition:
    transform var(--dm-motion-base) var(--dm-motion-curve),
    border-radius var(--dm-motion-base) var(--dm-motion-curve),
    filter var(--dm-motion-base) ease;
}

.dm-app-nav-indicator.is-moving { --dm-app-nav-scale: 1.07; border-radius: 23px 18px 23px 18px; filter: brightness(1.04); }
.dm-app-nav-item {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 56px;
  border-radius: 19px;
  color: var(--glass-icon);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 570 9px/1 Inter, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color var(--dm-motion-fast) ease, filter var(--dm-motion-fast) ease;
}
.dm-app-nav-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dm-app-nav-item[aria-current="page"] { color: var(--glass-text); filter: brightness(.88) contrast(1.2); }

html.dm-keyboard-open #dm-app-bottom-nav { transform: translateY(calc(120% + var(--dm-app-safe-bottom))); opacity: 0; pointer-events: none; }

/* Dashboard app shell: utilitario primero, contenido editorial después. */
html.dm-app-mode #page-inicio .hero-banner {
  padding: 18px 18px 12px;
  margin: 0;
  min-height: 144px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
html.dm-app-mode #page-inicio .hero-pro-row { flex-direction: row !important; justify-content: space-between; gap: 12px; align-items: center; }
html.dm-app-mode #page-inicio .hero-title-pro { margin: 0 0 7px; font-size: clamp(28px,8.8vw,36px); line-height: 1.04; letter-spacing: -.03em; }
html.dm-app-mode #page-inicio .hero-pro-sub { margin: 0; font-size: 13px; }
html.dm-app-mode #page-inicio .hero-status { margin: 0 0 12px; padding: 5px 10px; border: 0; background: rgba(216,204,97,.2); color: #5e5713; }
html.dm-app-mode #page-inicio .hero-pro-graphic { width: 70px; height: 70px; animation: none; }
html.dm-app-mode #page-inicio .hero-pro-graphic::before { display: none; }
html.dm-app-mode #page-inicio .main-inner { padding: 0 16px 28px; }
html.dm-app-mode #page-inicio .info-cards { display: none !important; }
html.dm-app-mode #page-inicio .sect-label { display: none; }

html.dm-app-mode #page-inicio .only-pro:has(.psb) { margin: 0 0 14px; }
html.dm-app-mode #page-inicio .psb {
  display: grid;
  grid-template-columns: 1fr;
  gap: 17px;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: 16px;
  background: var(--c-bg-2, #f0ede4);
  box-shadow: 0 9px 24px rgba(43,43,66,.07);
}
html.dm-app-mode #page-inicio .psb-name { font-size: 19px; }
html.dm-app-mode #page-inicio .psb-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
html.dm-app-mode #page-inicio .psb-actions .btn-navy { grid-column: 1 / -1; min-height: 46px; }
html.dm-app-mode #page-inicio .psb-actions .btn-ghost { min-height: 44px; padding: 8px 11px; letter-spacing: .04em; }

.dm-app-quick-actions {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin: 0 0 22px;
  padding: 14px 2px;
  border-top: 1px solid rgba(43,43,66,.09);
  border-bottom: 1px solid rgba(43,43,66,.09);
}
.dm-app-quick-action { min-width: 0; min-height: 58px; color: #35354a; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; font: 570 10px/1.15 Inter,sans-serif; }
.dm-app-quick-action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

/* El carrusel de descubrimiento del armazón y su cabecera de sección se
   fueron con él: hoy Inicio lo pinta la propia página (`.dm-di-*` en
   `dashboard.html`), con los perfiles que devuelve el panel. Ver el motivo
   junto al código que lo quitó, en `app-mode.js`. */

.dm-app-editorial-feature { position: relative; min-height: 224px; margin: 0 0 27px; border-radius: 16px; overflow: hidden; display: flex; align-items: end; color: #fffefa; text-decoration: none; box-shadow: 0 13px 32px rgba(34,32,40,.14); }
.dm-app-editorial-feature::after { content: ""; position: absolute; inset: 28% 0 0; background: linear-gradient(180deg,transparent,rgba(22,20,29,.78)); }
.dm-app-editorial-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dm-app-editorial-feature > span { position: relative; z-index: 1; display: grid; gap: 5px; padding: 20px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.dm-app-editorial-feature strong { max-width: 15ch; font: 520 24px/1.05 Petrona,serif; letter-spacing: -.02em; }
.dm-app-editorial-feature small { max-width: 34ch; color: rgba(255,254,250,.84); font: 450 11px/1.4 Inter,sans-serif; }

html.dm-app-mode #page-inicio .nov-header { margin: 0 0 12px; }
html.dm-app-mode #page-inicio .nov-t { color: var(--c-label, #292940); font: 520 21px/1.15 Petrona,serif; letter-spacing: -.02em; text-transform: none; }
html.dm-app-mode #page-inicio .nov-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(230px,72vw); gap: 10px; margin: 0 -16px; padding: 0 16px 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
html.dm-app-mode #page-inicio .nov-grid::-webkit-scrollbar { display: none; }
html.dm-app-mode #page-inicio .novedad { border: 0; border-radius: 16px; scroll-snap-align: start; box-shadow: 0 7px 20px rgba(43,43,66,.06); }
html.dm-app-mode #page-inicio .nov-desc { -webkit-line-clamp: 2; }

/* El perfil deja de ser una vista web monolítica y se descompone por función. */
html.dm-app-mode #page-mi-perfil .dm-profile-toolbar { display: none; }
html.dm-app-mode #page-mi-perfil .dm-profile-preview { padding: 0 0 28px; }
html.dm-app-mode #page-mi-perfil .dm-client-profile { background: transparent; }
html.dm-app-mode #page-mi-perfil .profile-header { display: grid !important; grid-template-columns: 78px minmax(0,1fr) !important; gap: 15px !important; margin: 0 !important; padding: 22px 18px 16px !important; align-items: center !important; }
html.dm-app-mode #page-mi-perfil .profile-avatar { width: 78px !important; min-width: 78px !important; height: 78px !important; margin: 0 !important; font-size: 21px !important; }
html.dm-app-mode #page-mi-perfil .profile-info { min-width: 0; }
html.dm-app-mode #page-mi-perfil .dm-app-profile-status { width: max-content; margin: 0 0 8px; color: #316645; display: inline-flex; align-items: center; gap: 6px; font: 570 11px/1 Inter,sans-serif; }
html.dm-app-mode #page-mi-perfil .dm-app-profile-status > span { width: 7px; height: 7px; border-radius: 50%; background: #58a873; }
html.dm-app-mode #page-mi-perfil .profile-badge { margin: 0 0 7px; }
html.dm-app-mode #page-mi-perfil .profile-name { margin: 0 0 4px; font-size: 25px; }
html.dm-app-mode #page-mi-perfil .profile-city { margin: 0 0 7px; }
html.dm-app-mode #page-mi-perfil .profile-bio { display: none; }
html.dm-app-mode #page-mi-perfil .tags-row { gap: 4px; }
html.dm-app-mode #page-mi-perfil .contact-card { grid-column: 1 / -1; width: auto; margin: 5px 0 0; padding: 17px 0 0; border: 0; border-top: 1px solid rgba(43,43,66,.1); border-radius: 0; background: transparent; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.dm-app-mode #page-mi-perfil .stat-recom,html.dm-app-mode #page-mi-perfil .stat-conexiones { min-height: 54px; padding: 8px; border: 0; border-radius: 12px; background: #f0ede4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
html.dm-app-mode #page-mi-perfil .stat-recom-number { font-size: 25px; }
html.dm-app-mode #page-mi-perfil .stat-con-number { font: 520 25px/1 Petrona,serif; }
html.dm-app-mode #page-mi-perfil .stat-con-dot { display: none; }
html.dm-app-mode #page-mi-perfil .save-btn,html.dm-app-mode #page-mi-perfil .contact-btn { min-height: 46px; border-radius: 14px; text-transform: none; letter-spacing: 0; font-size: 13px; }
html.dm-app-mode #page-mi-perfil .tabs-row { margin: 0; padding: 0 14px; border-top: 1px solid rgba(43,43,66,.08); border-bottom: 1px solid rgba(43,43,66,.08); gap: 2px; }
html.dm-app-mode #page-mi-perfil .tab-btn { min-height: 48px; padding: 12px 14px; font-family: Inter,sans-serif; font-size: 11px; text-transform: none; letter-spacing: 0; }
html.dm-app-mode #page-mi-perfil .tab-content { padding: 24px 18px 40px; }
html.dm-app-mode #page-mi-perfil .section-title { display: none; }
html.dm-app-mode #page-mi-perfil .projects-grid,html.dm-app-mode #page-mi-perfil .galeria-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }

/* Buscar y Vacantes: el contenido empieza como herramienta, no como landing. */
html.dm-app-mode .cat-hero,html.dm-app-mode .vac-hero { min-height: auto !important; padding: 22px 18px 16px !important; border-radius: 0 !important; text-align: left !important; }
html.dm-app-mode .cat-hero .hero-quote,html.dm-app-mode .vac-hero .hero-quote,html.dm-app-mode .cat-hero .hero-eyebrow,html.dm-app-mode .vac-hero .hero-eyebrow { display: none !important; }
html.dm-app-mode .cat-hero .hero-title,html.dm-app-mode .vac-hero .hero-title { margin: 0 0 8px !important; font-size: clamp(29px,9vw,38px) !important; line-height: 1.02 !important; letter-spacing: -.03em !important; }
html.dm-app-mode .cat-hero .hero-sub,html.dm-app-mode .vac-hero .hero-sub { margin: 0 !important; max-width: 42ch !important; font-size: 13px !important; line-height: 1.48 !important; }
html.dm-app-mode .search-block,html.dm-app-mode .res-hero { padding-inline: 16px !important; }
html.dm-app-mode .search-bar { border-radius: 16px !important; box-shadow: 0 8px 24px rgba(43,43,66,.08) !important; }
html.dm-app-mode .filter-row,html.dm-app-mode .filter-chips-group { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
html.dm-app-mode .cat-num-wrap { display: none !important; }

/* Auth Shell */
html.dm-app-mode.dm-app-auth body { padding: 0 !important; overflow: hidden !important; }
html.dm-app-mode.dm-app-auth body > *:not(#dm-app-auth-shell):not(#_dm_toast) { display: none !important; }
html.dm-app-mode.dm-app-auth #dm-app-header,
html.dm-app-mode.dm-app-auth #dm-app-bottom-nav { display: none !important; }

/* El acceso se monta dentro de cualquier página de la app —la portada web, los
   términos, la 404…— y lo que no declara lo decide la página que lo aloja. La
   404 no tiene `box-sizing:border-box` global: el acceso medía 48 px más que
   la pantalla y se desplazaba. `qa-pwa-arranque.spec.js` («el acceso es el
   mismo en cualquier página») lo mide en todas. */
#dm-app-auth-shell,
#dm-app-auth-shell *,
#dm-app-auth-shell *::before,
#dm-app-auth-shell *::after { box-sizing: border-box; }
/* Un suelo común para lo que el acceso no declara. Las páginas traen reglas
   por etiqueta que se colaban ahí: «restablecer contraseña» pone `button` y
   `label` en versalitas con esquinas de 100 px y márgenes; la 404, `button, a
   {padding:12px 20px}`, que movía el enlace de los Términos al crear cuenta.
   Especificidad (0,0,1) a propósito: empata con una regla por etiqueta de la
   página y le gana por orden —las hojas de la app van siempre al final del
   `<head>` (`alFinalDelHead`)—, y pierde contra cualquier regla del acceso.
   Márgenes y rellenos a cero, que es lo que el acceso daba por hecho sin
   decirlo: el panel, con el que arranca la app, trae `* {margin:0;
   padding:0}`. Lo demás, `revert`: lo que diría el navegador si la página no
   hubiera escrito nada —el subrayado de un enlace, el ancho de un botón—. */
:where(html.dm-app-mode #dm-app-auth-shell) :is(h1, h2, p, a, button, label, input, select, textarea, fieldset, legend, form, nav, span, strong, em, img, picture) {
  margin: 0;
  padding: 0;
  width: revert;
  border-radius: revert;
  text-transform: revert;
  letter-spacing: revert;
  text-decoration: revert;
}

#dm-app-auth-shell {
  position: fixed;
  z-index: 10000;
  inset: 0;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: auto;
  isolation: isolate;
  background: var(--c-bg, #FFFEFA);
  padding: calc(28px + var(--dm-app-safe-top)) max(16px, calc(16px + var(--dm-app-safe-right))) calc(20px + var(--dm-app-safe-bottom)) max(16px, calc(16px + var(--dm-app-safe-left)));
  display: block;
  overscroll-behavior: contain;
}

.dm-app-auth-brand { position: relative; z-index: 2; width: 142px; height: auto; display: block; margin: 4px auto 0; filter: brightness(0) invert(1); }
.dm-app-auth-view {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  margin: 112px auto 18px;
  padding: 27px 22px 23px;
  border-radius: 16px;
  background: #fffefa;
  box-shadow: 0 28px 70px rgba(10,10,20,.35), 0 5px 18px rgba(10,10,20,.18);
  animation: dmAuthIn var(--dm-motion-base) var(--dm-motion-curve) both;
}
.dm-app-auth-view[hidden] { display: none; }
.dm-app-auth-view h1 { max-width: 12ch; margin: 0 0 11px; color: #292940; font: 460 clamp(32px,9vw,42px)/.98 Petrona,serif; letter-spacing: -.035em; text-wrap: balance; }
.dm-app-auth-view h1 em { font-weight: 320; }
.dm-app-auth-copy { max-width: 34ch; margin: 0 0 25px; color: #625f58; font: 420 13.5px/1.55 Inter,sans-serif; }
.dm-app-auth-form { display: grid; gap: 13px; }
.dm-app-field { display: grid; gap: 6px; }
.dm-app-field label { color: #343447; font: 610 11px/1.2 Inter,sans-serif; }
.dm-app-field input,
.dm-app-field select {
  width: 100%;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: #f2efe7;
  color: #242438;
  padding: 13px 15px;
  outline: none;
  font: 400 16px/1.3 Inter,sans-serif;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
  transition: border-color var(--dm-motion-fast) ease, box-shadow var(--dm-motion-fast) ease;
}
.dm-app-field input:focus,
.dm-app-field select:focus { border-color: rgba(86,76,16,.48); box-shadow: 0 0 0 4px rgba(216,204,97,.2); }

/* Material 3 outlined fields, sólo dentro del acceso de la app. */
#dm-app-auth-shell .dm-app-field { position: relative; display: block; padding-top: 7px; }
#dm-app-auth-shell .dm-app-field > label {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 12px;
  padding: 0 5px;
  background: var(--c-elevado, #fffefa);
  color: var(--c-label-2, #5e5a62);
  font-size: 11px;
  line-height: 14px;
  transition: color var(--dm-motion-instant) ease;
}
#dm-app-auth-shell .dm-app-field:focus-within > label { color: #6b103f; }
#dm-app-auth-shell .dm-app-field input,
#dm-app-auth-shell .dm-app-field select {
  min-height: 56px;
  border: 1px solid rgba(43,43,66,.27);
  border-radius: 13px;
  background: rgba(245,242,234,.72);
  padding: 17px 15px 11px;
  box-shadow: none;
}
#dm-app-auth-shell .dm-app-field input:hover,
#dm-app-auth-shell .dm-app-field select:hover { border-color: rgba(43,43,66,.48); }
#dm-app-auth-shell .dm-app-field input:focus,
#dm-app-auth-shell .dm-app-field select:focus { border-width: 2px; border-color: #6b103f; padding-inline: 14px; box-shadow: none; }
.dm-app-password-wrap { position: relative; }
.dm-app-password-wrap input { padding-right: 58px; }
.dm-app-password-toggle { position: absolute; inset: 4px 4px 4px auto; width: 52px; border: 0; background: transparent; color: #5d5960; border-radius: 10px; font: 610 11px Inter,sans-serif; }
.dm-app-auth-link { border: 0; background: none; color: #5f133d; padding: 8px 0; min-height: 44px; font: 570 12.5px Inter,sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dm-app-auth-link.is-right { justify-self: end; margin-top: -8px; }
.dm-app-primary,
.dm-app-secondary {
  min-height: 52px;
  border-radius: 16px;
  padding: 13px 18px;
  border: 0;
  font: 650 14px/1.2 Inter,sans-serif;
  cursor: pointer;
}
.dm-app-primary { position: relative; overflow: hidden; background: #4c072d; color: #fffefa; box-shadow: 0 12px 27px rgba(76,7,45,.22); }
.dm-app-primary::after { content: ""; position: absolute; inset: 0 12% auto; height: 1px; background: rgba(255,255,255,.44); pointer-events: none; }
.dm-app-secondary { background: #292940; color: #fffefa; border: 0; box-shadow: 0 8px 20px rgba(43,43,66,.14); }
.dm-app-primary:disabled,
.dm-app-secondary:disabled { opacity: .52; cursor: default; }
.dm-app-auth-divider { display: flex; align-items: center; gap: 12px; color: var(--c-label-3, #6F6F6F); font: 530 11px Inter,sans-serif; }
.dm-app-auth-divider::before,.dm-app-auth-divider::after { content: ""; height: 1px; flex: 1; background: rgba(43,43,66,.1); }
.dm-app-auth-switch { margin: 18px 0 0; text-align: center; color: #6d6a63; font: 400 13px/1.4 Inter,sans-serif; }
.dm-app-auth-trust { margin: -2px 0 0; color: #77736b; text-align: center; font: 430 11px/1.4 Inter,sans-serif; }
.dm-app-inline-error { min-height: 20px; margin: 0; color: #a33e38; font: 550 12px/1.45 Inter,sans-serif; }
.dm-app-inline-success { color: #286447; font: 550 13px/1.45 Inter,sans-serif; }
.dm-app-check { display: flex; align-items: flex-start; gap: 10px; color: #65625b; font: 400 12px/1.45 Inter,sans-serif; }
.dm-app-check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.dm-app-check a { color: #4f4900; }
.dm-app-auth-back { position: absolute; top: calc(12px + var(--dm-app-safe-top)); left: max(12px,var(--dm-app-safe-left)); }
.dm-app-otp { letter-spacing: .34em; text-align: center; font-variant-numeric: tabular-nums; font-size: 24px !important; }
.dm-app-auth-shell.is-unlocking { animation: dmUnlock var(--dm-motion-base) var(--dm-motion-curve) both; pointer-events: none; }

@media (max-height: 700px) {
  .dm-app-auth-view { margin-top: 72px; }
}

/* Sheets and popovers */
.dm-app-sheet-layer { position: fixed; z-index: 12000; inset: 0; display: grid; align-items: end; }
.dm-app-sheet-layer[hidden] { display: none; }
/* Una capa que ya no se ve no puede seguir comiéndose los toques.
   `close()` quita `is-open` para lanzar la salida y borra la capa 260 ms
   después; en esa ventana el velo seguía a pantalla completa interceptando
   clics, y lo mismo pasaba en el frame de apertura, entre `hidden = false` y
   el `requestAnimationFrame` que añade `is-open`. Medido: abrir y cerrar el
   centro de avisos veinte veces se quedaba colgado —«<button
   class="dm-app-sheet-backdrop"> intercepts pointer events»— y quien tocara la
   campana 300 ms después de cerrar se quedaba sin respuesta. */
.dm-app-sheet-layer:not(.is-open) { pointer-events: none; }
.dm-app-sheet-backdrop { position: absolute; inset: 0; border: 0; background: rgba(24,24,35,.25); opacity: 0; transition: opacity var(--dm-motion-base) ease; }
.dm-app-sheet {
  --glass-veil: rgba(255,254,250,.82);
  --glass-text: #222238;
  --glass-icon: rgba(43,43,66,.66);
  --glass-active: rgba(255,255,255,.56);
  position: relative;
  width: min(100%, 620px);
  max-height: min(78dvh, 760px);
  margin: 0 auto;
  border-radius: 28px 28px 0 0;
  padding: 10px max(18px,var(--dm-app-safe-right)) calc(18px + var(--dm-app-safe-bottom)) max(18px,var(--dm-app-safe-left));
  overflow: auto;
  transform: translateY(104%);
  transition: transform var(--dm-motion-base) var(--dm-motion-curve);
}
.dm-app-sheet-layer.is-open .dm-app-sheet-backdrop { opacity: 1; }
.dm-app-sheet-layer.is-open .dm-app-sheet { transform: translateY(0); }
.dm-app-sheet-handle { width: 38px; height: 5px; margin: 2px auto 18px; border-radius: 99px; background: rgba(43,43,66,.22); }
.dm-app-sheet-close { position: absolute; top: 14px; right: max(14px,var(--dm-app-safe-right)); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.46); color: var(--glass-text); }
.dm-app-sheet-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.dm-app-sheet-title { margin: 0 48px 6px 0; color: var(--glass-text); font: 600 22px/1.1 Petrona,serif; }
.dm-app-sheet-copy { margin: 0 0 18px; color: color-mix(in srgb,var(--glass-text) 66%,transparent); font: 400 13px/1.5 Inter,sans-serif; }
.dm-app-sheet-actions { display: grid; gap: 9px; }
.dm-app-sheet-action { min-height: 50px; border: 0; border-radius: 15px; padding: 12px 14px; background: rgba(255,255,255,.55); color: var(--glass-text); text-align: left; font: 570 14px/1.3 Inter,sans-serif; cursor: pointer; touch-action: manipulation; transition: transform var(--dm-motion-instant) var(--dm-motion-curve), background-color var(--dm-motion-instant) ease; }
.dm-app-sheet-action svg { width: 20px; height: 20px; margin-right: 9px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dm-app-sheet-action:active { transform: scale(.98); background: rgba(255,255,255,.72); }
.dm-app-sheet-action.is-danger { color: #a43c38; }

/* Passkey settings */
.dm-passkey-settings { margin: 0 0 28px; }
.dm-passkey-list { display: grid; gap: 9px; margin: 14px 0; }
.dm-passkey-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 14px; border-radius: 15px; background: rgba(255,255,255,.65); border: 1px solid rgba(43,43,66,.1); }
.dm-passkey-name { color: #2b2b42; font: 620 13px/1.3 Inter,sans-serif; }
.dm-passkey-meta { margin-top: 4px; color: #77736b; font: 400 11px/1.45 Inter,sans-serif; }
.dm-passkey-actions { display: flex; align-items: center; gap: 4px; }
.dm-passkey-actions button { min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; background: rgba(43,43,66,.06); color: #45445a; }

/* Loading, network and toast placement */
.dm-app-skeleton-layer { position: fixed; z-index: 8800; inset: calc(58px + var(--dm-app-safe-top)) 0 calc(80px + var(--dm-app-safe-bottom)); padding: 20px; background: var(--c-bg, #f5f2e9); overflow: hidden; }
.dm-app-skeleton-layer[hidden] { display: none; }
.dm-app-skeleton { height: 112px; margin: 0 0 14px; border-radius: 20px; background: linear-gradient(100deg, rgba(43,43,66,.055) 20%, rgba(255,255,255,.58) 42%, rgba(43,43,66,.055) 64%); background-size: 250% 100%; animation: dmSkeleton 1.35s linear infinite; }
.dm-app-skeleton:first-child { height: 46px; width: 62%; }
.dm-app-offline-banner { position: fixed; z-index: 11000; top: calc(10px + var(--dm-app-safe-top)); left: 50%; translate: -50% -160%; width: max-content; max-width: calc(100vw - 32px); padding: 10px 15px; border-radius: 99px; background: #2b2b42; color: #fffefa; box-shadow: 0 10px 28px rgba(30,30,45,.22); font: 580 12px/1.2 Inter,sans-serif; transition: translate var(--dm-motion-base) var(--dm-motion-curve); }
.dm-app-offline-banner.is-visible { translate: -50% 0; }
html.dm-app-mode #_dm_toast { bottom: calc(98px + var(--dm-app-safe-bottom)) !important; }
html.dm-keyboard-open #_dm_toast { bottom: 18px !important; }
html.dm-app-mode .dm-page-loader { display: none !important; }

/* ── La transición entre pantallas ──────────────────────────────────────────
   La misma superficie y la misma marca que la pantalla de arranque, para que
   el relevo entre el documento que se va y el que llega no se vea: no son dos
   pantallas de carga seguidas, es una sostenida por dos documentos.

   El trazo del isotipo no se dibuja aquí. Lo dibujan las reglas
   `.dm-page-loader-*` que `api.js` inyecta en TODA página —las mismas que usa
   la pantalla de carga de la web—, así que esto sólo pone la superficie, el
   tamaño y la entrada. */
.dm-app-transicion { position: fixed; z-index: 12000; inset: 0; display: flex; align-items: center; justify-content: center; background: #2B2B42; opacity: 0; transition: opacity var(--dm-motion-fast) var(--dm-motion-curve); }
.dm-app-transicion[hidden] { display: none; }
.dm-app-transicion.esta-visible { opacity: 1; }
/* 109 px de caja dibujan 96 px de marca —el trazo ocupa 468 de las 533
   unidades del `viewBox`—, que es exactamente el tamaño al que la pantalla de
   inicio enseña el isotipo. Si no coincidiera, el relevo entre el documento
   que se va y el que llega daría un salto de escala. */
.dm-app-transicion .dm-page-loader-mark { width: 109px; animation: none; transform: scale(.96); transition: transform var(--dm-motion-base) var(--dm-motion-curve); }
.dm-app-transicion.esta-visible .dm-page-loader-mark { transform: none; }
/* Una sola superficie, en claro y en oscuro, porque la pantalla de inicio
   también es una sola. La guía del trazo es azul oscuro sobre blanco en la
   web; sobre el azul de la marca no existiría. */
.dm-app-transicion .dm-page-loader-base { stroke: rgba(255,254,250,.20); }
@media (prefers-reduced-motion: reduce) {
  .dm-app-transicion, .dm-app-transicion .dm-page-loader-mark { transition: none; }
  .dm-app-transicion .dm-page-loader-mark { transform: none; }
}

@keyframes dmAuthIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes dmUnlock { to { opacity: 0; transform: scale(1.015); filter: blur(3px); } }
@keyframes dmSkeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (min-width: 720px) {
  html.dm-app-mode body { max-width: 820px; margin-inline: auto; box-shadow: 0 0 0 1px rgba(43,43,66,.04); }
  #dm-app-header { left: 50%; right: auto; width: min(820px,100%); translate: -50% 0; }
  .dm-app-sheet { border-radius: 28px; margin-bottom: max(12px,var(--dm-app-safe-bottom)); }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  html.dm-app-mode .dm-liquid-glass,
  html.dm-app-mode #dm-app-header:not(.es-marca) { background: rgba(255,254,250,.96); }
}

@media (prefers-reduced-motion: reduce) {
  html.dm-app-mode *,html.dm-app-mode *::before,html.dm-app-mode *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .dm-app-nav-indicator { transform: translate3d(calc(var(--dm-app-nav-index, 0) * 100%),0,0) !important; }
}

/* §32 · La barra «Continuar a…» del editor, por encima del dock.
 *
 * En el navegador esa barra es `position: sticky; bottom: 0` y está bien: no
 * hay nada debajo. En la app instalada sí lo hay —el dock flota a 10 px del
 * borde y mide 68 de alto— y la barra aterrizaba encima, tapando «Guardados»
 * y «Perfil». Medido a 375, 390 y 430: 52 de los 54 px del botón quedaban
 * sobre el dock, el 96 %.
 *
 * El desplazamiento se calcula con los MISMOS números que posiciona el dock
 * —`--dm-app-safe-bottom` incluida—, no con una constante copiada, para que
 * mover el dock mueva las dos cosas. Los 8 px finales son el aire entre las
 * dos barras: pegadas se leen como un solo bloque de controles.
 *
 * La declaración simple va delante por la misma razón que en el dock: un
 * navegador que no entienda `max()` se queda con 76 px, que es correcto en
 * casi todos los aparatos, y nunca con `auto`. */
html.dm-app-mode .edit-continue-wrap {
  bottom: 76px;
  bottom: calc(max(10px, calc(var(--dm-app-safe-bottom, 0px) + 8px)) + 68px + 8px);
}