/* NOIR — flujo de acceso.
   Vive dentro del <dialog> que ya existe en index.html, así que hereda su
   fondo, borde y sombra de landing.css. Acá solo van las piezas nuevas.

   El diálogo original mide 500px; el flujo de acceso necesita más aire para
   las credenciales y la lista de códigos, por eso lo ensancha cuando está
   mostrando el panel de acceso y no el aviso viejo. */

/* El diálogo original define max-height pero no desplazamiento: como el aviso
   que tenía antes entraba siempre, nunca hizo falta. El flujo de acceso es más
   largo —credenciales, ocho códigos, lista de dispositivos— y sin esto el
   contenido de abajo queda recortado y fuera de alcance. */
dialog:has(#authRoot) {
  box-sizing: border-box;
  max-height: calc(100dvh - 32px);
  margin: auto;
  background: #f5f2e9;
  color: #171914;
  border: 1px solid #a98a5066;
  border-radius: 16px;
  box-shadow: 0 24px 100px #08110c66;
  font-family: Manrope, sans-serif;
  width: min(600px, calc(100% - 32px));
  padding: 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Fuera del flujo: la × no reduce el ancho del contenido de ningún paso. */
dialog:has(#authRoot) .dialog-close { position: absolute; float: none; top: 32px; right: 28px; margin: 0; }
dialog:has(#authRoot) h2 { font: 600 34px/1.2 Manrope, system-ui, sans-serif; letter-spacing: -.025em; margin: 0 0 6px; overflow-wrap: anywhere; }
dialog:has(#authRoot) h2 em { font-family: inherit; font-style: normal; font-weight: inherit; }
dialog:has(#authRoot)::backdrop { background: #080e0bd9; backdrop-filter: blur(8px); }
dialog:has(#authRoot) .dialog-close { width: 44px; height: 44px; border: 1px dashed #a98a5077; border-radius: 50%; background: #d5b4770d; color: #484f40; font-size: 28px; cursor: pointer; }
#authRoot .tag { font: 600 10px/1.5 Manrope, sans-serif; letter-spacing: .16em; color: #73775f; margin: 0 0 16px; }
#authRoot :focus-visible { outline: 2px solid #a98a50; outline-offset: 4px; }
.auth-identidad { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; margin: 18px 0 6px; }
.auth-panel .auth-lista { padding: 0; }

#authRoot { display: flex; flex-direction: column; gap: 0; }

/* ── acceso al dashboard desde el header ──
   El header es un grid de tres columnas y el botón de ingresar ocupa la
   tercera. Envolver ambos en un contenedor mantiene esa estructura intacta.
   El enlace nace oculto: auth-client.js lo muestra solo si hay sesión, para
   no ofrecerle a un visitante anónimo un destino que no puede usar. */
.header-acciones { justify-self: end; display: flex; align-items: center; gap: 10px; }
.header-dash {
  border: 1px solid #a98a5088; border-radius: 3px; padding: 10px 12px;
  font-size: 10px; letter-spacing: .1em; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #263323; color: #f2f0ea; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.header-dash:hover, .header-dash:focus-visible { background: #1b241a; border-color: #d5b477; }
.header-dash[hidden] { display: none; }
/* La landing conserva un único punto de entrada. */
header .header-dash { display: none !important; }

/* Acciones del encabezado: una navegación de producto, no botones aislados. */
.header-acciones { gap: 8px; padding: 4px; border: 1px solid #ffffff14; border-radius: 999px; background: #0f1b14a8; box-shadow: inset 0 1px #ffffff0b, 0 10px 22px #08110c1f; }
.header-dash { min-height: 40px; padding: 0 14px; border-color: transparent; border-radius: 999px; background: transparent; color: #e9ede5; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.header-dash span { display: grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; border: 1px solid #d5b47755; border-radius: 50%; color: #d5b477; font-size: 11px; }
.header-dash:hover, .header-dash:focus-visible { background: #ffffff0d; border-color: #d5b47755; }
header .header-access { min-height: 40px; padding: 0 7px 0 15px; border: 1px solid #e4c78f; border-radius: 999px; background: #e4c78f; color: #18271d; box-shadow: none; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
header .header-access::before, header .header-access::after { display: none; }
header .header-access > span { width: 26px; height: 26px; margin-left: 11px; border: 0; background: #1d3426; color: #f6e5bb; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { header .header-access:hover { transform: translateY(-1px); background: #f2db9f; border-color: #f2db9f; box-shadow: 0 8px 18px #0003; } }
@media (max-width: 760px) { .header-acciones { gap: 5px; padding: 3px; } .header-dash { padding: 0 11px; } header .header-access { padding-left: 12px; } }

/* El encabezado necesita aire: idioma, navegación y cuenta no son un grupo. */
header .header-acciones { gap: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
header .header-acciones .noir-language { width: 40px; min-height: 40px; justify-content: center; padding: 0; border-color: #d5b47755; border-radius: 12px; background: #ffffff08; }
header .header-acciones .noir-language svg { width: 16px; height: 16px; }
header .header-acciones .noir-language-trigger { width: 0; min-height: 40px; padding: 0; overflow: hidden; }
header .header-acciones .noir-language-trigger span,
header .header-acciones .noir-language-trigger i { display: none; }
header .header-acciones .header-dash { position: relative; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #f0f2ec; font-size: 9px; letter-spacing: .14em; }
header .header-acciones .header-dash::after { content: ''; position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; background: #d5b477; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
header .header-acciones .header-dash span { width: 17px; height: 17px; border-color: #d5b47755; }
header .header-acciones .header-dash:hover, header .header-acciones .header-dash:focus-visible { border: 0; background: transparent; }
header .header-acciones .header-dash:hover::after, header .header-acciones .header-dash:focus-visible::after { transform: scaleX(1); }
header .header-acciones .header-access { min-height: 42px; padding: 0 8px 0 16px; border-radius: 11px; }
@media (max-width: 760px) { header .header-acciones { gap: 8px; } header .header-acciones .noir-language { width: 38px; } header .header-acciones .header-dash { padding: 0; } }

/* Orden visual y área táctil: cada pieza ocupa exactamente su propia columna. */
header .header-acciones { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
header .header-acciones .noir-language { flex: 0 0 40px; }
header .header-acciones .noir-language svg { pointer-events: none; }
header .header-acciones .noir-language-trigger { position: absolute; inset: 0; z-index: 1; width: 100%; min-height: 100%; }
header .header-acciones .header-dash { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
header .header-acciones .header-access { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
header .header-acciones .header-access[hidden] { display: none; }
header .header-acciones .noir-language-menu { z-index: 100; }
@media (max-width: 760px) {
  header .header-acciones { display: contents; }
  .header-acciones .noir-language { grid-column: 2; grid-row: 1; justify-self: end; }
  header .header-acciones .header-dash { grid-column: 1; grid-row: 2; justify-self: start; }
  header .header-acciones .header-access { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (max-width: 760px) {
  /* En móvil el header ya viene apretado: el enlace queda sin el rótulo. */
  .header-dash { padding: 10px; font-size: 9px; }
}

/* ── encabezado de cada paso ── */
.auth-paso > .tag { margin: 0 0 14px; }
.auth-paso > .tag, .auth-paso > h2 { padding-right: 44px; }
.auth-lede {
  font-size: 14px; line-height: 1.7; color: #626b5b; margin: 14px 0 26px;
}
.auth-lede strong { color: #171914; }

/* ── botones ── */
.auth-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.auth-acciones.fila { flex-direction: row; flex-wrap: wrap; }
.auth-acciones.fila > * { flex: 1 1 auto; }

.auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 12px/1 Manrope, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  padding: 17px 22px; border-radius: 10px; cursor: pointer; text-align: center;
  border: 1px solid transparent; transition: background .2s, border-color .2s, transform .12s, color .2s;
  /* Algunos .auth-btn son <a> (el salto al dashboard), que llegan subrayados. */
  text-decoration: none;
}
.auth-btn:active { transform: scale(.985); }
.auth-btn[disabled] { opacity: .5; cursor: not-allowed; }

.auth-btn.primario { background: #263323; color: #f2f0ea; border-color: #a98a5088; }
.auth-btn.primario:hover:not([disabled]), .auth-btn.primario:focus-visible { background: #1b241a; border-color: #d5b477; }

.auth-btn.secundario { background: #d5b4770d; color: #484f40; border: 1px solid #bfbda9; }
.auth-btn.secundario:hover:not([disabled]), .auth-btn.secundario:focus-visible { background: #d5b47726; border-color: #a98a50; }

/* El acceso es una bienvenida: tiene una composición propia, sin afectar los
   formularios ni los pasos posteriores del diálogo. */
.auth-inicio {
  padding: 6px 0 2px;
}
.auth-inicio > .tag {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8c6b35;
}
.auth-inicio > .tag::after {
  content: '';
  width: 30px;
  height: 1px;
  background: #a98a5080;
}
dialog:has(#authRoot) .auth-inicio h2 {
  max-width: 390px;
  margin: 0;
  font-size: clamp(38px, 6vw, 48px);
  line-height: .98;
  letter-spacing: -.06em;
}
.auth-inicio h2 em {
  display: block;
  margin-top: 3px;
  color: #8f7445;
}
.auth-inicio .auth-lede {
  max-width: 430px;
  margin: 20px 0 14px;
  font-size: 13px;
  line-height: 1.75;
}
.auth-inicio-garantia {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 25px;
  color: #707664;
  font: 600 9px/1.4 Manrope, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.auth-inicio-garantia span {
  color: #ad8d51;
  font-size: 8px;
}
.auth-inicio .auth-acciones { gap: 9px; margin: 0; }
.auth-inicio .auth-btn { min-height: 54px; }
.auth-inicio .auth-btn.primario {
  position: relative;
  justify-content: center;
  padding: 8px 10px 8px 22px;
  box-shadow: inset 0 0 0 1px #ffffff0b, 0 9px 18px #1a25171f;
}
.auth-inicio .auth-btn.primario::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #d5b4772b;
  border-radius: 7px;
  pointer-events: none;
}
.auth-btn-flecha {
  display: grid;
  position: absolute;
  right: 10px;
  z-index: 1;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #d9ba7a;
  color: #223022;
  font-size: 15px;
  letter-spacing: 0;
}
.auth-inicio .auth-btn.secundario {
  border-color: #c9c1ae;
  background: transparent;
  color: #3f493d;
}

/* La vuelta a la mesa comparte el tono del acceso, pero prioriza que las
   credenciales se lean y se completen sin ruido. */
.auth-ingreso { padding-top: 6px; }
.auth-ingreso > .tag {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8c6b35;
}
.auth-ingreso > .tag::after {
  content: '';
  width: 30px;
  height: 1px;
  background: #a98a5080;
}
dialog:has(#authRoot) .auth-ingreso h2 {
  margin: 0 0 25px;
  font-size: clamp(36px, 5.4vw, 44px);
  line-height: .99;
  letter-spacing: -.055em;
}
.auth-ingreso h2 em {
  display: block;
  margin-top: 3px;
  color: #8f7445;
}
.auth-ingreso-campos {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #a98a5033;
  border-radius: 13px;
  background: linear-gradient(135deg, #fffdf7a8, #e6ddca38);
}
.auth-ingreso .auth-campo { margin: 0; }
.auth-ingreso .auth-campo > span { margin: 0 0 7px; color: #8c6b35; }
.auth-ingreso .auth-campo input {
  min-height: 50px;
  padding: 12px 14px;
  border-color: #c8c0ad;
  border-radius: 8px;
  background: #fffdf9;
  box-shadow: inset 0 1px 2px #35291008;
}
.auth-ingreso .auth-campo input:focus-visible {
  border-color: #9b7940;
  box-shadow: 0 0 0 3px #a98a501a;
}
.auth-ingreso .auth-acciones { gap: 10px; margin-top: 16px; }
.auth-ingreso .auth-btn.primario {
  position: relative;
  min-height: 54px;
  justify-content: center;
  padding: 8px 10px 8px 22px;
  box-shadow: inset 0 0 0 1px #ffffff0b, 0 9px 18px #1a25171f;
}
.auth-ingreso .auth-btn.primario::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #d5b4772b;
  border-radius: 7px;
  pointer-events: none;
}
.auth-ingreso .auth-btn.secundario {
  min-height: 48px;
  border-color: #c9c1ae;
  background: transparent;
  color: #3f493d;
}
.auth-ingreso-alternativa {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7a7c6c;
  font: 600 9px/1 Manrope, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.auth-ingreso-alternativa::before,
.auth-ingreso-alternativa::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #a98a5033;
}
.auth-ingreso .auth-btn.sutil { margin-top: 1px; color: #6e725f; }

.auth-btn.sutil {
  min-height: 44px; background: #faf7ef; border: 1px solid #c6bba4; color: #4c5b49; text-transform: none; letter-spacing: 0;
  font-size: 12px; line-height: 1.35; font-weight: 500; padding: 11px 16px; text-decoration: none;
}
.auth-btn.sutil:hover:not(:disabled), .auth-btn.sutil:focus-visible { color: #263c2c; border-color: #a98a50; background: #f0e8d8; }

.auth-btn.peligro { background: none; border: 1px solid #8c3b3255; color: #8c3b32; }
.auth-btn.peligro:hover, .auth-btn.peligro:focus-visible { background: #8c3b3211; border-color: #8c3b32; }

/* Panel de cuenta compacto; no altera los pasos de alta y recuperación. */
dialog:has(#authRoot [data-panel-cuenta]) { width: min(520px, calc(100% - 32px)); padding: 30px; }
dialog:has(#authRoot [data-panel-cuenta]) .dialog-close {
  position: absolute; float: none; top: 24px; right: 24px; margin: 0;
}
#authRoot .auth-cuenta-cab .tag { color: #927139; margin: 0 0 5px; }
dialog:has(#authRoot) .auth-cuenta-cab h2 { font-size: 26px; }
.auth-cuenta-cab { margin-bottom: 22px; padding-right: 38px; }
.auth-perfil { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.auth-perfil > div { min-width: 0; }
.auth-avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #1c3227; color: #d5b477; border: 1px solid #a98a50; }
.auth-perfil .auth-identidad { margin: 0 0 4px; font-size: 14px; }
.auth-perfil-meta { margin: 0; color: #626b5b; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.auth-cuenta-seccion { padding: 20px 0; border-top: 1px solid #a98a5033; }
#authRoot .auth-cuenta-seccion h3 { font: 600 14px/1.5 Manrope, sans-serif; margin: 0; letter-spacing: 0; color: #171914; }
.auth-seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.auth-seguridad-estado { font-size: 10px; color: #865d27; background: #9c6f2e12; padding: 4px 8px; border-radius: 5px; }
.auth-seguridad-estado.protegida { color: #3d6147; background: #4f7d5a1f; }
.auth-cuenta-nota { margin: 8px 0 0; font-size: 12px; color: #626b5b; }
#authRoot [data-aviso-blindaje] > .auth-cuenta-nota { text-align: center; }
.auth-referido {
  position: relative; margin: 0 0 4px; padding: 18px;
  border: 1px solid #a98a5066; border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, #d5b4771c, transparent 45%),
    linear-gradient(145deg, #f9f7ef, #f1eee1);
  overflow: hidden;
}
.auth-referido::after {
  content: "◆"; position: absolute; right: 14px; bottom: -18px;
  color: #a98a5014; font-size: 72px; line-height: 1; pointer-events: none;
}
.auth-referido > * { position: relative; z-index: 1; }
.auth-referido-kicker { margin: 0 0 3px; color: #927139; font: 600 9px/1 Manrope, sans-serif; letter-spacing: .16em; }
.auth-referido-codigo {
  max-width: 58%; padding: 7px 10px; border: 1px solid #a98a5055; border-radius: 7px;
  background: #fff9; color: #1c3227; font: 700 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .08em; overflow-wrap: anywhere;
}
.auth-referido-valores {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 15px; padding: 12px 0; border-block: 1px solid #a98a5033;
}
.auth-referido-valores div { min-width: 0; padding: 0 10px; border-right: 1px solid #a98a5033; }
.auth-referido-valores div:first-child { padding-left: 0; }
.auth-referido-valores div:last-child { padding-right: 0; border-right: 0; }
.auth-referido-valores span { display: block; color: #626b5b; font-size: 9px; line-height: 1.3; }
.auth-referido-valores b { display: block; margin-top: 4px; color: #171914; font: 600 12px/1.3 Manrope, sans-serif; }
.auth-referido-valores .neto b { color: #3d6147; }
.auth-referido-acumulado {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #a98a5033;
}
.auth-referido-acumulado div { min-width: 0; }
.auth-referido-acumulado span { display: block; color: #626b5b; font-size: 9px; line-height: 1.3; }
.auth-referido-acumulado b { display: block; margin-top: 4px; color: #171914; font: 600 13px/1.3 Manrope, sans-serif; }
.auth-referido-acumulado div:last-child b { color: #3d6147; }
.auth-referido-acciones, .auth-referido-form-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.auth-referido-acciones .auth-btn, .auth-referido-form-acciones .auth-btn {
  flex: 1 1 110px; padding: 11px 12px; font-size: 10px; letter-spacing: .04em; text-transform: none;
}
.auth-referido-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid #a98a5033; }
.auth-referido-form[hidden] { display: none; }
.auth-referido-form .auth-campo { margin-bottom: 0; }
.auth-referido-error { color: #8c3b32; font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.auth-retiro-form { margin-top: 14px; }
.auth-retiro-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.auth-retiro-grid .auth-campo { margin: 0; }
.auth-retiro-grid select { width: 100%; min-height: 42px; }
.auth-retiro-historial { margin-top: 16px; padding-top: 14px; border-top: 1px solid #a98a5033; }
.auth-retiro-historial > span { color: #626b5b; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.auth-retiro-historial div { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; font-size: 11px; }
.auth-retiro-historial div span { color: #626b5b; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 420px) { .auth-retiro-grid { grid-template-columns: 1fr; } }
.auth-panel .auth-estado { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 18px 0; }
.auth-panel .auth-estado div { padding: 0 8px; border: 0; border-right: 1px solid #a98a5033; border-radius: 0; background: none; }
.auth-panel .auth-estado div:last-child { border-right: 0; }
.auth-panel .auth-estado b { font-size: 20px; }
.auth-panel .auth-estado span { font-size: 9px; letter-spacing: 0; overflow-wrap: anywhere; }
.auth-gestionar { width: 100%; padding: 13px 16px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.auth-panel .auth-lista { margin: 8px 0 0; }
.auth-panel .auth-lista .det { overflow-wrap: anywhere; }
.auth-cuenta-pie { margin-top: 0; padding-top: 18px; border-top: 1px solid #a98a5033; }
.auth-cuenta-pie .auth-btn { padding: 14px; text-transform: none; letter-spacing: 0; }

/* ── campos ── */
.auth-campo { display: block; margin-bottom: 16px; }
.auth-campo > span {
  display: block; font: 600 10px/1 Manrope, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: #a98a50; margin-bottom: 8px;
}
.auth-campo input {
  width: 100%; padding: 15px 16px; border-radius: 9px;
  border: 1px solid #bfbda9; background: #fff; color: #171914;
  font: 400 15px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.auth-campo input:focus-visible { outline: 2px solid #a98a50; outline-offset: 1px; border-color: #a98a50; }
.auth-campo input::placeholder { color: #9aa093; font-family: Manrope, sans-serif; }

/* ── credenciales entregadas una sola vez ── */
.cred-caja {
  background: #1b241a; border: 1px solid #a98a5055; border-radius: 12px;
  padding: 24px; margin: 4px 0 18px;
}
.cred-fila + .cred-fila { margin-top: 18px; padding-top: 18px; border-top: 1px solid #ffffff1a; }
.cred-fila > span {
  display: block; font: 600 10px/1 Manrope, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: #d5b477; margin-bottom: 8px;
}
.cred-valor {
  font: 400 16px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #f2f0ea; word-break: break-word; user-select: all;
}
.cred-valor.grande { font-size: 18px; }

/* ── códigos de recuperación ── */
.codigos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px;
  margin: 4px 0 18px; padding: 20px; border-radius: 12px;
  background: #d5b4770d; border: 1px dashed #a98a5055;
}
.codigos li {
  list-style: none; font: 400 13px/1.7 ui-monospace, Menlo, Consolas, monospace;
  color: #171914; user-select: all;
}

/* ── avisos ── */
.auth-aviso {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 10px; margin: 0 0 20px;
  font-size: 13px; line-height: 1.65;
}
.auth-aviso b { display: block; margin-bottom: 3px; }
.auth-aviso.auth-alerta { background: #8c3b320f; border: 1px solid #8c3b3233; color: #7a3a32; }
.auth-aviso.auth-info   { background: #d5b4770f; border: 1px solid #a98a5033; color: #5c5540; }
.auth-aviso.auth-bien   { background: #4f7d5a12; border: 1px solid #4f7d5a33; color: #3d6147; }

/* ── confirmación de guardado ── */
.auth-check {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  font-size: 13px; line-height: 1.6; color: #484f40; margin: 4px 0 20px;
  padding: 14px 16px; border-radius: 10px; border: 1px solid #bfbda9; background: #fff;
}
.auth-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #263323; flex: none; }
.auth-check:has(input:checked) { border-color: #4f7d5a66; background: #4f7d5a0a; }

/* Sacudida al intentar cerrar sin haber confirmado que guardó las credenciales.
   Es el único momento del flujo donde cerrar cuesta la cuenta entera. */
.auth-check.sacudir { animation: auth-sacudir .45s ease; border-color: #8c3b32; background: #8c3b320a; }
@keyframes auth-sacudir {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin desplazamiento, pero el cambio de color se mantiene: es la señal. */
  .auth-check.sacudir { animation: none; }
}

/* ── estado de la cuenta ── */
.auth-estado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; }
.auth-estado div {
  padding: 16px 14px; border-radius: 10px; border: 1px solid #bfbda9; background: #fff; text-align: center;
}
.auth-estado b { display: block; font: 600 24px/1.2 Manrope, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #171914; }
.auth-estado span {
  display: block; margin-top: 6px; font: 600 9px/1.3 Manrope, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: #626b5b;
}

/* ── listas (dispositivos, actividad) ── */
.auth-lista { margin: 0 0 20px; }
.auth-lista li {
  list-style: none; display: flex; gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid #11120f1a; font-size: 13px;
}
.auth-lista li:last-child { border-bottom: none; }
.auth-lista .det { flex: 1; min-width: 0; }
.auth-lista .det b { display: block; font-weight: 600; color: #171914; }
.auth-lista .det span { color: #626b5b; font-size: 11.5px; }
.auth-lista .marca {
  font: 600 9px/1 Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 5px; background: #4f7d5a1f; color: #3d6147; white-space: nowrap;
}

/* ── carga ── */
.auth-cargando { display: flex; align-items: center; gap: 12px; color: #626b5b; font-size: 13px; padding: 30px 0; }
.auth-spinner {
  width: 6px; height: 6px; margin: 0 18px 0 4px; border-radius: 50%; flex: none;
  background: #a98a50; color: #a98a50;
  box-shadow: 9px 0 #a98a5099, 18px 0 #a98a5044;
  animation: auth-pulso 1s ease-in-out infinite;
}
@keyframes auth-pulso { 50% { opacity: .42; transform: scale(.8); } }

.auth-error { color: #8c3b32; font-size: 13px; line-height: 1.6; margin: 0 0 16px; }

@media (max-width: 620px) {
  dialog:has(#authRoot) { padding: 32px 22px; }
  dialog:has(#authRoot) .dialog-close { top: 24px; right: 16px; }
  dialog:has(#authRoot [data-panel-cuenta]) { padding: 28px 18px; }
  dialog:has(#authRoot [data-panel-cuenta]) .dialog-close { top: 22px; right: 16px; }
  .auth-panel .auth-estado div { padding: 0 2px; }
  .auth-panel .auth-estado span { font-size: 8px; }
  dialog:has(#authRoot) h2 { font-size: 28px; }
  .codigos, .auth-estado { grid-template-columns: 1fr; }
  .auth-acciones.fila { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-btn, .auth-spinner { transition: none; animation: none; }
}