/* ==========================================================================
   NEXECO · Portal del asesor — estilos propios
   --------------------------------------------------------------------------
   Se apoya en nexeco.css (tokens, botones, campos, avisos, tarjetas) y solo
   añade lo que el sitio público no tiene: barra de sesión, pestañas, la lista
   de liquidaciones, la tabla de la cuenta, el marco del contrato y la ficha.

   Ningún color a mano salvo dos excepciones ya justificadas en la marca
   (el ámbar oscuro accesible, igual que en crm.css) y las rgba de sombra.

   Nota de por qué NO se usa .nx-revelar aquí: esa animación la enciende
   nexeco.js con un IntersectionObserver al cargar la página, y en este portal
   casi todo nace dentro de un `hidden`. Un elemento oculto no interseca nada,
   así que se quedaría en opacity:0 y la pantalla saldría en blanco. El portal
   se dibuja sin animación de entrada, a propósito.
   ========================================================================== */

/* El atributo `hidden` es la única forma en que este portal cambia de
   pantalla. La regla [hidden]{display:none} del navegador NO lleva
   !important, así que cualquier display de autor la pisa — y aquí hay varios
   (.nx-boton es inline-flex, .as-barra-sesion y .nx-botonera son flex, las
   pestañas son flex). Sin este refuerzo, la pantalla "oculta" se ve. Le pasó
   al CRM con el hilo y con el botón Salir; no hace falta que vuelva a pasar. */
body [hidden] { display: none !important; }

/* Fondo gris como el CRM: quien entra aquí está detrás del mostrador. El
   sitio público es blanco. */
body.asesor { background: var(--nx-gris-50); }

.as-noscript { padding-block: var(--nx-e-5); }

/* ---------- Barra de sesión ----------------------------------------------- */
.as-barra-sesion {
  background: var(--nx-blanco);
  border-bottom: var(--nx-borde);
}
.as-barra-sesion .nx-contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nx-e-4);
  min-height: 60px;
  padding-block: var(--nx-e-2);
}
.as-barra-sesion__quien {
  font-size: var(--nx-t-peq); color: var(--nx-texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* ---------- Pantallas ------------------------------------------------------ */
.as-pantalla { padding-block: var(--nx-e-7); }
.as-entrar { max-width: 480px; }
.as-nota-acceso { margin-top: var(--nx-e-4); }
.as-botonera-holgada { margin-top: var(--nx-e-5); }
.as-nota-equipo {
  margin-top: var(--nx-e-6);
  font-size: var(--nx-t-peq); color: var(--nx-texto-3);
}

/* ---------- Crear cuenta ---------------------------------------------------- */
/* Algo más ancha que .as-entrar: son cuatro campos, dos avisos y dos botones de
   pie; a 480px el aviso azul del código se convierte en una columna de nueve
   líneas y la pantalla parece más difícil de lo que es. */
.as-crear { max-width: 540px; }

/* La puerta al registro, debajo del formulario de entrar. La línea de arriba no
   es decoración: separa dos acciones distintas para que quien ya tiene cuenta no
   tropiece con «cree su cuenta» mientras busca dónde escribir su contraseña. */
.as-crear-puerta {
  margin-top: var(--nx-e-5);
  padding-top: var(--nx-e-5);
  border-top: var(--nx-borde);
}
.as-crear-puerta__texto {
  font-size: var(--nx-t-peq); color: var(--nx-texto-3);
  margin-bottom: var(--nx-e-3);
}

/* En rejilla y no en .nx-botonera: son dos botones de bloque, uno debajo del
   otro. En fila, «pedirlo por WhatsApp» quedaría del mismo tamaño que «volver a
   entrar» y compitiendo con él. */
.as-crear-pie {
  display: grid; gap: var(--nx-e-3);
  margin-top: var(--nx-e-5);
}

/* El código se dicta por WhatsApp y se teclea a mano: espaciado y en mayúsculas
   se comprueba carácter por carácter de un vistazo. El text-transform es solo
   apariencia —quien pasa el VALOR a mayúsculas es el JS al escribir—, pero cubre
   el instante entre pegar el texto y que corra el manejador, y lo que rellena el
   navegador por su cuenta. */
.as-campo-codigo {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 650;
}
.as-campo-codigo::placeholder {
  letter-spacing: .09em; font-weight: 500;
  color: var(--nx-texto-3);
}

/* El mismo formulario aparece en «sin ficha» como rescate del registro. Ahí va
   suelto en la página, no dentro de una tarjeta, y sin acotarlo se estiraría a
   todo el ancho del contenedor por un solo campo de trece caracteres. */
.as-forma-codigo { margin: var(--nx-e-5) 0; max-width: 380px; }

/* ---------- Pestañas ------------------------------------------------------- */
.as-pestanas {
  display: flex; gap: var(--nx-e-2);
  border-bottom: var(--nx-borde);
  margin-bottom: var(--nx-e-5);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.as-pestanas [role="tab"] {
  background: none; border: 0; cursor: pointer;
  font-family: var(--nx-fuente); font-size: 0.95rem; font-weight: 650;
  color: var(--nx-texto-2);
  /* 13px arriba y abajo dejan el objetivo en 44px, el mínimo cómodo para el
     dedo. Es el mismo criterio que .nx-boton--peq. */
  padding: 13px 16px; min-height: 44px; white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px; /* pisa la línea del contenedor con la suya */
}
.as-pestanas [role="tab"]:hover { color: var(--nx-azul); }
.as-pestanas [role="tab"][aria-selected="true"] {
  color: var(--nx-azul);
  border-bottom-color: var(--nx-azul);
}
/* El marco de las pestañas recorta el anillo de foco, que se dibuja por
   fuera. Dibujarlo por dentro lo devuelve a la vista del teclado. */
.as-pestanas [role="tab"]:focus-visible { outline-offset: -3px; }

/* ---------- Distintivos de estado ------------------------------------------ */
.as-distintivo {
  display: inline-block;
  font-size: var(--nx-t-micro); font-weight: 700;
  padding: 3px 11px; border-radius: var(--nx-r-pildora);
  background: var(--nx-gris-100); color: var(--nx-texto-2);
  white-space: nowrap;
}
.as-distintivo--azul  { background: var(--nx-azul-suave);  color: var(--nx-azul-700); }
.as-distintivo--verde { background: var(--nx-verde-suave); color: var(--nx-verde-600); }
/* Mismo ámbar oscuro que usa nexeco.css en .nx-aviso--ambar y crm.css en el
   botón de peligro: el token --nx-ambar sobre el fondo suave se queda en
   3:1 y esto es texto pequeño en negrita que hay que poder leer. */
.as-distintivo--ambar { background: var(--nx-ambar-suave); color: #8A5306; }

/* ---------- Lista de liquidaciones ------------------------------------------ */
.as-liquidaciones { display: grid; gap: var(--nx-e-4); }

.as-liquidacion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--nx-e-2) var(--nx-e-5);
  width: 100%; text-align: left; cursor: pointer;
  background: var(--nx-blanco);
  border: var(--nx-borde); border-radius: var(--nx-r-m);
  padding: var(--nx-e-5);
  font-family: inherit; color: var(--nx-texto);
  transition: border-color var(--nx-transicion), box-shadow var(--nx-transicion);
}
.as-liquidacion:hover { border-color: var(--nx-azul); box-shadow: var(--nx-s-2); }
.as-liquidacion__periodo {
  grid-column: 1;
  font-family: var(--nx-fuente-display); font-weight: 800;
  font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2;
}
.as-liquidacion__fechas {
  grid-column: 1;
  font-size: var(--nx-t-peq); color: var(--nx-texto-3);
}
.as-liquidacion__marca { grid-column: 1; }
/* El total ocupa la columna derecha y las tres filas: es lo primero que la
   persona busca al abrir la página. */
.as-liquidacion__total {
  grid-column: 2; grid-row: 1 / 4;
  justify-self: end; align-self: center;
  font-family: var(--nx-fuente-display); font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  letter-spacing: -0.03em; line-height: 1;
  color: var(--nx-tinta);
  font-variant-numeric: tabular-nums;
}

/* ---------- Detalle de una liquidación --------------------------------------- */
.as-detalle__tarjeta { margin-top: var(--nx-e-4); }
.as-detalle__fechas { font-size: var(--nx-t-peq); color: var(--nx-texto-3); }
.as-detalle__estado {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--nx-e-3);
  font-size: var(--nx-t-peq); color: var(--nx-texto-2);
  max-width: none;
}
.as-detalle #detalle-titulo:focus-visible { outline-offset: 4px; }

.as-subtitulo {
  font-size: var(--nx-t-micro); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--nx-texto-3);
  margin: var(--nx-e-6) 0 var(--nx-e-3);
}

/* ---------- Tablas ----------------------------------------------------------- */
/* La tabla se desliza dentro de su marco; la página nunca en horizontal. */
.as-tabla-marco {
  border: var(--nx-borde); border-radius: var(--nx-r-m);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--nx-blanco);
}
.as-tabla {
  width: 100%; border-collapse: collapse;
  font-size: var(--nx-t-peq);
  min-width: 700px; /* por debajo de esto las columnas se aplastan ilegibles */
}
.as-tabla caption { text-align: left; }
.as-tabla th {
  text-align: left;
  font-size: var(--nx-t-micro); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--nx-texto-3);
  background: var(--nx-gris-50);
  padding: 10px 14px;
  border-bottom: var(--nx-borde);
  white-space: nowrap;
}
.as-tabla td {
  padding: 12px 14px;
  border-bottom: var(--nx-borde);
  vertical-align: top;
  color: var(--nx-texto);
}
.as-tabla tr:last-child td { border-bottom: 0; }
/* Cifras alineadas a la derecha y con dígitos de ancho fijo: así las columnas
   de pesos se pueden comparar de un vistazo, que es de lo que trata esto. */
.as-tabla .as-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.as-tabla .as-nota-linea {
  display: block; margin-top: 3px;
  font-size: var(--nx-t-micro); color: var(--nx-texto-3);
  white-space: normal;
}
.as-tabla-vacia {
  padding: var(--nx-e-5);
  font-size: var(--nx-t-peq); color: var(--nx-texto-3);
  margin: 0;
}

/* ---------- Totales ----------------------------------------------------------- */
.as-totales {
  margin: var(--nx-e-5) 0 0;
  display: grid; gap: 0;
  max-width: 420px; margin-left: auto;
}
.as-totales > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--nx-e-4);
  padding: 10px 0;
  border-bottom: var(--nx-borde);
}
.as-totales > div:last-child { border-bottom: 0; }
.as-totales dt { font-size: var(--nx-t-peq); color: var(--nx-texto-2); }
.as-totales dd {
  margin: 0; font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--nx-texto);
}
.as-totales .as-total-final {
  border-top: 2px solid var(--nx-gris-300);
  border-bottom: 0;
  margin-top: var(--nx-e-2); padding-top: var(--nx-e-4);
}
.as-totales .as-total-final dt {
  font-weight: 700; color: var(--nx-texto); font-size: var(--nx-t-cuerpo);
}
.as-totales .as-total-final dd {
  font-family: var(--nx-fuente-display); font-weight: 800;
  font-size: 1.7rem; letter-spacing: -0.03em; line-height: 1;
  color: var(--nx-tinta);
}

.as-nota-ajuste { margin-top: var(--nx-e-4); }
.as-forma-reclamo { margin-top: var(--nx-e-5); }

/* ---------- Reclamos ----------------------------------------------------------- */
.as-reclamo {
  border-left: 3px solid var(--nx-gris-300);
  padding-left: var(--nx-e-4);
  margin-top: var(--nx-e-4);
}
.as-reclamo__cabecera {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-e-3);
  margin-bottom: var(--nx-e-2);
}
.as-reclamo__fecha { font-size: var(--nx-t-micro); color: var(--nx-texto-3); }
/* Lo escribió una persona: se respetan sus saltos de línea y nunca desborda. */
.as-reclamo__texto {
  font-size: var(--nx-t-peq); color: var(--nx-texto);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.as-reclamo__respuesta {
  margin-top: var(--nx-e-3);
  background: var(--nx-gris-50); border-radius: var(--nx-r-s);
  padding: var(--nx-e-3) var(--nx-e-4);
  font-size: var(--nx-t-peq); color: var(--nx-texto-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.as-reclamo__respuesta strong { display: block; margin-bottom: 2px; }

/* ---------- Tablas de comisión --------------------------------------------------- */
.as-nota-transparencia { margin-bottom: var(--nx-e-5); }
.as-tabla-comision {
  background: var(--nx-blanco);
  border: var(--nx-borde); border-radius: var(--nx-r-m);
  padding: var(--nx-e-5);
  margin-bottom: var(--nx-e-5);
}
.as-tabla-comision h3 { margin-bottom: var(--nx-e-2); }
.as-vigencia {
  font-size: var(--nx-t-peq); color: var(--nx-texto-3);
  margin-bottom: var(--nx-e-3);
}
.as-tabla-comision .nx-aviso { margin-bottom: var(--nx-e-4); }
.as-tabla-comision .as-tabla-marco { margin-top: var(--nx-e-4); }

/* ---------- Ficha del asesor ------------------------------------------------------ */
.as-ficha {
  background: var(--nx-blanco);
  border: var(--nx-borde); border-radius: var(--nx-r-m);
  padding: var(--nx-e-2) var(--nx-e-5);
  margin: 0 0 var(--nx-e-5);
}
.as-ficha > div {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--nx-e-4);
  padding: var(--nx-e-4) 0;
  border-bottom: var(--nx-borde);
}
.as-ficha > div:last-child { border-bottom: 0; }
.as-ficha dt {
  font-size: var(--nx-t-micro); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--nx-texto-3);
}
.as-ficha dd { margin: 0; color: var(--nx-texto); overflow-wrap: anywhere; }

/* ---------- Contrato ---------------------------------------------------------------- */
.as-contrato-marco {
  background: var(--nx-blanco);
  border: var(--nx-borde); border-radius: var(--nx-r-m);
  padding: var(--nx-e-5);
  /* Alto acotado con desplazamiento propio: el contrato es largo y así el
     botón de aceptar no se va a kilómetros de distancia. */
  max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.as-contrato-marco:empty { display: none; }
.as-contrato-marco:focus-visible { outline-offset: 2px; }
/* El contrato viene de su propia página y trae sus propias secciones. Aquí
   dentro se lee, no se maqueta: se le baja el tamaño a los títulos para que
   no compitan con el h2 de la pantalla. */
.as-contrato__texto h3 { font-size: 1.2rem; margin-top: var(--nx-e-5); }
.as-contrato__texto h4 { font-size: 1.02rem; margin-top: var(--nx-e-5); }
.as-contrato__texto h5, .as-contrato__texto h6 {
  font-family: var(--nx-fuente-display); font-weight: 700;
  font-size: 0.95rem; margin: var(--nx-e-4) 0 var(--nx-e-2);
}
.as-contrato__texto p,
.as-contrato__texto li { font-size: 0.95rem; }
/* La cabecera del contrato conserva su título — es el nombre del documento que
   la persona está firmando y esconderlo sería raro — pero pierde el fondo
   oscuro: dentro del marco de lectura sería una banda negra en mitad del
   texto. La miga sí se va: es navegación del sitio y aquí no lleva a ninguna
   parte. */
.as-contrato__texto .nx-cabecera-pagina {
  background: none; color: inherit; padding-block: 0;
}
.as-contrato__texto .nx-cabecera-pagina::before { display: none; }
.as-contrato__texto .nx-cabecera-pagina h3,
.as-contrato__texto .nx-cabecera-pagina h4 { color: var(--nx-texto); }
.as-contrato__texto .nx-etiqueta--clara { color: var(--nx-azul); }
.as-contrato__texto .nx-bajada { color: var(--nx-texto-2); font-size: 1rem; }
.as-contrato__texto .nx-miga { display: none; }
.as-contrato__texto .nx-seccion { padding-block: var(--nx-e-4); }
.as-contrato__texto .nx-contenedor { padding-inline: 0; max-width: none; }

.as-contrato-pie { margin-top: var(--nx-e-5); }
.as-contrato-version {
  font-size: var(--nx-t-micro); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--nx-texto-3);
}
.as-casilla-contrato { margin-top: var(--nx-e-4); }

/* ---------- Responsive ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .as-liquidacion { grid-template-columns: 1fr; }
  .as-liquidacion__total {
    grid-column: 1; grid-row: auto;
    justify-self: start; margin-top: var(--nx-e-2);
  }
  .as-totales { max-width: none; }
  .as-ficha > div { grid-template-columns: 1fr; gap: var(--nx-e-1); }
  .as-barra-sesion .nx-contenedor { min-height: 56px; }
  .as-contrato-marco { max-height: 55vh; padding: var(--nx-e-4); }
}