/* ═══ PANTALLA DE ENTRADA Y VENTANA «CÓMO INSTALAR TRIA» (24-oct-2026) ══════════════════════════════
   Encargo de Javidan: «que el inicio de sesión se vea bien; al pinchar cómo instalar la app no se ven las letras».
   · Entrada: las etiquetas EMAIL / CONTRASEÑA salían oscuras sobre la tarjeta oscura (la regla del tema claro
     `:root[data-theme="light"] .field > span` ganaba a la de la pantalla de acceso), a 12 px. Ahora claras y a 15 px,
     casillas y botones de 48 px (letra de 16 px: el iPhone no hace zoom), texto alineado a la izquierda, la marca
     de TRIA (triángulo con la punta hacia abajo) y el aviso de error en rojo y JUSTO encima de «Entrar».
   · Ventana de instalar: panel blanco con texto oscuro (antes, texto casi blanco sobre blanco), cabe en la pantalla
     y se desplaza por dentro, con botón de cerrar (×) y pasos numerados por aparato.
   Colores fijos, sin tokens del tema: la tarjeta de entrada es oscura SIEMPRE y el panel, blanco SIEMPRE.
   Esta hoja va antes de tria-base.css (que tiene que ser la última): manda por selector, no por orden. */

/* ── Entrada ─────────────────────────────────────────────────────────────────────────────────────── */
:root .auth-screen .auth-card {
  gap: 20px;
  font-size: 16px;
  line-height: 1.45;
}

:root .auth-screen .auth-card-copy {
  gap: 10px;
  text-align: left;
  justify-items: start;
}

/* La marca de TRIA: el archivo original /icons/icon-source.svg, nunca redibujado (Javidan 24-oct). */
:root .auth-screen .auth-card-copy::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  background: url("/icons/icon-source.svg") center / contain no-repeat;
}

:root .auth-screen .auth-card-copy .drawer-eyebrow {
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #9cc1ff;
}

:root .auth-screen .auth-card-copy h1 {
  color: #ffffff;
}

:root .auth-screen .auth-card-copy p.muted {
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
}

:root .auth-screen .auth-form .field {
  gap: 8px;
}

:root .auth-screen .auth-form .field > span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.92);
}

:root .auth-screen .auth-form .field input {
  min-height: 48px;
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #14171c;
  background: #f4f6f9;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

:root .auth-screen .auth-form .field input::placeholder {
  color: #6b7280;
}

:root .auth-screen .auth-form .field input:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.65);
  outline-offset: 1px;
  border-color: #3b82f6;
}

:root .auth-screen .auth-card .btn {
  min-height: 48px;
  font-size: 16px;
  border-radius: 12px;
}

:root .auth-screen .auth-form .btn.primary {
  color: #ffffff;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: #2563eb;
}

:root .auth-screen .auth-form .btn.primary[disabled] {
  opacity: 0.75;
  cursor: progress;
}

:root .auth-screen .auth-card .btn.ghost {
  color: rgba(255, 255, 255, 0.94);
}

/* El aviso de la entrada va dentro del formulario, encima de «Entrar». Vacío no ocupa sitio. */
:root .auth-screen .auth-status-line {
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
}

:root .auth-screen .auth-status-line:empty {
  display: none;
}

:root .auth-screen .auth-status-line[data-tono="ocupado"] {
  color: #9cc1ff;
}

:root .auth-screen .auth-status-line[data-tono="error"] {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  color: #ffe1e1;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.6);
}

:root .auth-screen .auth-status-line[data-tono="error"]::before {
  content: "!";
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #7f1d1d;
  background: #fca5a5;
}

@media (max-width: 600px) {
  :root .auth-screen .auth-card {
    padding: 22px 18px;
  }

  :root .auth-screen .auth-card-copy h1 {
    font-size: 30px;
    line-height: 1.05;
  }

  :root .auth-screen .auth-card-copy .drawer-eyebrow {
    font-size: 15px;
  }
}

/* ── Ventana «Cómo instalar TRIA» ─────────────────────────────────────────────────────────────────── */
body.instalar-app-abierto {
  overflow: hidden;
}

.instalar-app-fondo {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  background: rgba(12, 15, 22, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.instalar-app-fondo .instalar-app-panel {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  color: #1f2329;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  color-scheme: light;
}

.instalar-app-fondo .instalar-app-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid #e6e8ec;
  flex: 0 0 auto;
}

/* El logo es el archivo original /icons/icon-source.svg (trae su propio fondo redondeado): nunca redibujado (Javidan 24-oct). */
.instalar-app-fondo .instalar-app-marca {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.instalar-app-fondo .instalar-app-titulo {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111318;
}

.instalar-app-fondo .instalar-app-cerrar {
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  font-size: 28px;
  line-height: 1;
  color: #2b2f36;
  background: #f1f3f6;
  cursor: pointer;
}

.instalar-app-fondo .instalar-app-cerrar:hover {
  background: #e4e7ec;
}

.instalar-app-fondo .instalar-app-cerrar:focus-visible,
.instalar-app-fondo .instalar-app-entendido:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
}

.instalar-app-fondo .instalar-app-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 8px;
}

.instalar-app-fondo .instalar-app-intro {
  margin: 0 0 14px;
  font-size: 16px;
  color: #3b4250;
}

.instalar-app-fondo .instalar-app-plataforma {
  margin: 0 0 12px;
  padding: 14px 16px 6px;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  background: #ffffff;
}

.instalar-app-fondo .instalar-app-plataforma.es-el-tuyo {
  border-color: #2563eb;
  background: #f3f7ff;
}

.instalar-app-fondo .instalar-app-plataforma-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: #111318;
}

.instalar-app-fondo .instalar-app-etiqueta {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #2563eb;
}

.instalar-app-fondo .instalar-app-pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.instalar-app-fondo .instalar-app-pasos li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 40px;
  min-height: 28px;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2329;
  counter-increment: paso;
}

.instalar-app-fondo .instalar-app-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #1d4ed8;
  background: #e5edff;
}

.instalar-app-fondo .instalar-app-pie {
  flex: 0 0 auto;
  padding: 12px 20px 16px;
  border-top: 1px solid #e6e8ec;
  background: #ffffff;
}

.instalar-app-fondo .instalar-app-panel .instalar-app-pie .btn.instalar-app-entendido {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border: 1px solid #2563eb;
}

/* En el móvil sube desde abajo, a lo ancho, y respeta la barra de inicio del iPhone. */
@media (max-width: 600px) {
  .instalar-app-fondo {
    align-items: flex-end;
    padding: max(12px, env(safe-area-inset-top, 0px)) 0 0;
  }

  .instalar-app-fondo .instalar-app-panel {
    width: 100%;
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
    border-radius: 18px 18px 0 0;
  }

  .instalar-app-fondo .instalar-app-cuerpo {
    padding: 14px 16px 6px;
  }

  .instalar-app-fondo .instalar-app-pie {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══ DISEÑO NUEVO DE TRIA EN LA ENTRADA Y EN «CÓMO INSTALAR» (24-oct-2026, 2.ª vuelta) ═════════════════════
   Javidan, 11:51: «me falta que mejores el panel de entrada. quiero que adaptes a la nueva versión todo. tampoco
   puede salir entrar en trasnego, sería entrar en tria». La entrada deja la tarjeta oscura y se viste como el panel
   nuevo (tria-base.css): fondo gris claro, tarjeta blanca con borde fino, letra Inter Tria, un solo azul, esquinas
   8 / 11, campos y botones de 40 px en el ordenador y 44 en el móvil, pesos 400 / 500 / 600 y el logo de la barra.
   Solo tokens --t-* de tria-base.css (definidos en :root), nada de colores nuevos.
   Todo cuelga de html[data-diseno="nuevo"] (en la entrada siempre está: sin sesión no hay «sin permiso»).
   Sin el atributo, la tarjeta oscura de arriba sigue tal cual. */

/* Piezas nuevas del marcado (logo y pie): en la tarjeta oscura de antes no se enseñan. */
:root .auth-screen .auth-marca { display: none; }
:root .auth-screen .auth-pie { margin: 0; font-size: 13px; text-align: center; color: rgba(255, 255, 255, 0.55); }

html[data-diseno="nuevo"] body.auth-open,
html[data-diseno="nuevo"] body.auth-open .auth-screen {
  background: var(--t-lateral) !important;
}

html[data-diseno="nuevo"] body.auth-open .auth-screen {
  font-family: var(--t-fuente);
  color: var(--t-texto);
  padding: 32px 16px;
}

html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card {
  width: min(400px, 100%);
  gap: 16px;
  padding: 32px;
  border-radius: var(--t-radio-2);
  background: var(--t-fondo);
  border: 1px solid var(--t-linea);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  font-size: var(--t-fs-sm);
  line-height: 1.45;
  color: var(--t-texto);
}

/* Cabecera: logo + «TRIA», título y una línea de explicación. */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card-copy { gap: 8px; }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card-copy::before { content: none; display: none; }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card-copy .drawer-eyebrow { display: none; }

html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: var(--t-fs-lg);
  font-weight: 600;
  color: var(--t-texto);
}
/* El mismo logo que la barra lateral (tria-base.css, .t-logo), un poco mayor. */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-logo {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
}
/* El logo es el archivo original /icons/icon-source.svg (trae su propio fondo redondeado): nunca redibujado (Javidan 24-oct). */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-logo img { width: 32px; height: 32px; display: block; }

html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card-copy h1 {
  font-family: var(--t-fuente);
  font-size: var(--t-fs-t);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--t-texto);
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card-copy p.muted {
  font-size: var(--t-fs-sm);
  line-height: 1.5;
  color: var(--t-texto-2);
}

/* Campos: etiqueta en frase normal (500, gris 2) y casilla blanca con borde fino, como en el panel. */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form { gap: 12px; }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .field { gap: 6px; }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .field > span {
  font-size: var(--t-fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-texto-2);
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .field input {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--t-linea-2) !important;
  border-radius: var(--t-radio-1);
  background: var(--t-fondo) !important;
  color: var(--t-texto) !important;
  font-family: var(--t-fuente);
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .field input::placeholder { color: var(--t-texto-3) !important; opacity: 1; }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .field input:focus { border-color: var(--t-azul) !important; box-shadow: none !important; }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .field input:focus-visible { outline: 2px solid var(--t-azul); outline-offset: 0; }

/* Botones: primario azul a lo ancho; los otros dos, secundario blanco con borde y fantasma. */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card .btn {
  min-height: 40px;
  padding: 4px 12px;
  border-radius: var(--t-radio-1);
  font-family: var(--t-fuente);
  font-size: var(--t-fs-sm);
  font-weight: 500;
  line-height: 1.25;
  box-shadow: none;
  filter: none;
  transition: background-color var(--t-dur-0) ease-out, border-color var(--t-dur-0) ease-out, transform var(--t-dur-0) ease-out;
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card .btn:hover { transform: none; filter: none; }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card .btn:active:not(:disabled) { transform: scale(.97); }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card .btn:focus-visible { outline: 2px solid var(--t-azul); outline-offset: 2px; }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .btn.primary {
  margin-top: 4px;
  background: var(--t-azul) !important;
  border: 1px solid var(--t-azul) !important;
  color: var(--t-sobre-azul) !important;
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .btn.primary:hover:not(:disabled) {
  background: var(--t-azul-hover) !important;
  border-color: var(--t-azul-hover) !important;
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .btn.primary[disabled] { opacity: .7; cursor: progress; border-style: solid; }
/* «Cómo instalar app»: secundario (blanco con borde). */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card .btn.ghost.install-app-button {
  background: var(--t-fondo);
  color: var(--t-texto);
  border: 1px solid var(--t-linea-2);
}
/* «Usar código o enlace de recuperación»: fantasma (sin borde), en azul de enlace. */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card .btn.ghost:not(.install-app-button) {
  background: transparent;
  color: var(--t-azul);
  border: 1px solid transparent;
}
@media (hover: hover) {
  html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card .btn.ghost:hover:not(:disabled) { background: var(--t-hover); }
}
/* Los dos secundarios, juntos y separados del formulario por una línea fina. */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card #open-recovery-dialog {
  margin-top: 4px;
  position: relative;
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card #open-recovery-dialog::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  border-top: 1px solid var(--t-linea);
}

/* Avisos: neutro en gris; ocupado en azul; error en rojo suave con su «!»; hecho («Sesión cerrada.») en verde. */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-status-line {
  margin: 0;
  font-size: var(--t-fs-xs);
  line-height: 1.45;
  color: var(--t-texto-2);
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-status-line[data-tono="ocupado"] { color: var(--t-azul); }
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-status-line:is([data-tono="error"], [data-tono="hecho"]) {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: var(--t-radio-1);
  font-size: var(--t-fs-sm);
  font-weight: 500;
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-status-line[data-tono="error"] {
  color: var(--t-ko);
  background: var(--t-ko-bg);
  border: 1px solid var(--t-ko-bd);
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-status-line[data-tono="error"]::before {
  content: "!";
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--t-fs-2xs);
  font-weight: 600;
  color: var(--t-sobre-azul);
  background: var(--t-ko);
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-status-line[data-tono="hecho"] {
  color: var(--t-ok);
  background: var(--t-ok-bg);
  border: 1px solid var(--t-ok-bd);
}
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-status-line[data-tono="hecho"]::before {
  content: "✓";
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--t-fs-2xs);
  font-weight: 600;
  color: var(--t-sobre-azul);
  background: var(--t-ok);
}

/* Pie: la empresa, en pequeño. */
html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-pie {
  margin: 4px 0 0;
  font-size: var(--t-fs-2xs);
  text-align: center;
  color: var(--t-texto-3);
}

/* Móvil y dedo: 44 px (como el panel), la tarjeta arriba y sin sombra, a lo ancho con 16 px de margen. */
@media (max-width: 768px), (pointer: coarse) {
  html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-form .field input { height: 44px; min-height: 44px; }
  html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card .btn { min-height: 44px; }
}
@media (max-width: 600px) {
  html[data-diseno="nuevo"] body.auth-open .auth-screen {
    align-items: start !important;
    padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }
  html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card {
    padding: 24px 20px;
    box-shadow: none;
  }
  html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card-copy h1 { font-size: var(--t-fs-t); line-height: 1.2; }
}
@media (max-width: 360px) {
  html[data-diseno="nuevo"] body.auth-open .auth-screen { padding-left: 12px !important; padding-right: 12px !important; }
  html[data-diseno="nuevo"] body.auth-open .auth-screen .auth-card { padding: 20px 16px; }
}

/* ── «Cómo instalar TRIA» con el diseño nuevo: Inter Tria, el azul de la casa, esquinas 8 / 11 y pesos ≤ 600. ── */
html[data-diseno="nuevo"] .instalar-app-fondo { background: rgba(16, 24, 40, .45); }
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-panel {
  font-family: var(--t-fuente);
  font-size: var(--t-fs-md);
  color: var(--t-texto);
  border-radius: var(--t-radio-2);
  border: 1px solid var(--t-linea);
  box-shadow: var(--t-sombra-flota);
  width: min(520px, 100%);
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-cabecera { padding: 12px 12px 12px 20px; border-bottom-color: var(--t-linea); }
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-marca {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-titulo {
  font-size: var(--t-fs-xl);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--t-texto);
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-cerrar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: var(--t-radio-1);
  font-size: 22px;
  color: var(--t-texto-2);
  background: transparent;
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-cerrar:hover { background: var(--t-hover); color: var(--t-texto); }
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-cerrar:focus-visible,
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-entendido:focus-visible { outline: 2px solid var(--t-azul); outline-offset: 2px; }
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-intro { font-size: var(--t-fs-md); color: var(--t-texto-2); }
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-plataforma {
  padding: 12px 16px 4px;
  border-color: var(--t-linea);
  border-radius: var(--t-radio-2);
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-plataforma.es-el-tuyo {
  border-color: var(--t-in-bd);
  background: var(--t-in-bg);
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-plataforma-titulo {
  font-size: var(--t-fs-lg);
  font-weight: 600;
  color: var(--t-texto);
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-etiqueta {
  padding: 1px 8px;
  border-radius: var(--t-radio-1);
  font-size: var(--t-fs-2xs);
  font-weight: 500;
  color: var(--t-sobre-azul);
  background: var(--t-azul);
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-pasos li {
  padding-left: 34px;
  font-size: var(--t-fs-md);
  color: var(--t-texto);
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-pasos li::before {
  width: 24px;
  height: 24px;
  top: 1px;
  font-size: var(--t-fs-xs);
  font-weight: 600;
  color: var(--t-azul);
  background: var(--t-azul-suave);
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-pie { border-top-color: var(--t-linea); }
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-panel .instalar-app-pie .btn.instalar-app-entendido {
  min-height: 40px;
  border-radius: var(--t-radio-1);
  font-family: var(--t-fuente);
  font-size: var(--t-fs-sm);
  font-weight: 500;
  color: var(--t-sobre-azul) !important;
  background: var(--t-azul) !important;
  border: 1px solid var(--t-azul) !important;
  box-shadow: none;
}
html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-panel .instalar-app-pie .btn.instalar-app-entendido:hover { background: var(--t-azul-hover) !important; }
@media (max-width: 768px), (pointer: coarse) {
  html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-cerrar { width: 44px; height: 44px; flex-basis: 44px; }
  html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-panel .instalar-app-pie .btn.instalar-app-entendido { min-height: 44px; }
}
@media (max-width: 600px) {
  html[data-diseno="nuevo"] .instalar-app-fondo .instalar-app-panel { border-radius: var(--t-radio-2) var(--t-radio-2) 0 0; border-bottom: 0; }
}