/* Pantallas de negocio (tarea 060e): composición de las pantallas con los componentes de la capa
   base. Medidas de los artboards Main, Movil, Comprobante, Recibidos, Secuencias, Certificacion,
   Configuracion, ConfigIntegraciones, ConfigNegocio y ConfigCuenta. Sin colores literales. */

/* ---------- Utilidades de pantalla ---------- */
.dato-fuerte {
  font-weight: 500;
}
.texto-suave {
  color: var(--color-etiqueta);
  font-size: var(--texto-chico);
}
.texto-mono {
  font-size: var(--texto-chico);
}
.nota-pie {
  font-size: var(--texto-chico);
  color: var(--color-secundario);
}
.avisos-pagina {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.avisos-pagina:empty {
  display: none;
}
.pagina__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.tarjeta__titulo--chico {
  font-size: 15px;
}
.tarjeta__cuerpo--columna {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tarjeta__cuerpo--compacta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tarjeta__cuerpo--fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.tarjeta__cuerpo--fila > p {
  max-width: 560px;
}
.tarjeta__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.campo--en-linea {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}
.campo--en-linea .select {
  width: auto;
}
.permiso--si {
  color: var(--color-ok);
}
.permiso--no {
  color: var(--color-etiqueta);
}
.restantes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.restantes__cifra {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.restantes__cifra--alerta {
  color: var(--color-cond);
}
.texto-tipo {
  color: var(--color-texto);
}

/* ---------- Listas (Emitidos, Recibidos) ---------- */
.tarjeta--lista {
  display: flex;
  flex-direction: column;
}
.lista__resultados {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.lista__resultados > .solo-escritorio {
  overflow-x: auto;
}
.lista__resultados .solo-movil {
  display: none;
}
.lista-tarjetas {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarjeta-fila {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: 14px var(--space-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  color: var(--color-tinta);
  text-decoration: none;
  text-align: left;
  font: inherit;
}
.tarjeta-fila--boton {
  cursor: pointer;
}
.tarjeta-fila__linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.tarjeta-fila__encf {
  font-family: var(--fuente-mono);
  font-size: var(--texto-chico);
  font-weight: 500;
  color: var(--color-enlace);
}
.tarjeta-fila__monto {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tarjeta-fila__meta {
  font-size: var(--texto-mini);
  color: var(--color-secundario);
}
.tarjeta-fila .badge {
  height: 22px;
  padding: 0 var(--space-2);
  font-size: 11px;
}

/* ---------- Detalle de un comprobante ---------- */
.comprobante {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.comprobante__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}
.comprobante__titulos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.comprobante__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.titulo-comprobante {
  font-family: var(--fuente-mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.titulo-comprobante:focus {
  outline: none;
}
.comprobante__receptor {
  color: var(--color-tinta);
  font-weight: 500;
}
.comprobante__acciones {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.comprobante__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}
.comprobante__principal {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.comprobante__lateral {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.tarjeta--montos {
  padding: 20px var(--space-6) 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.montos {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) 40px;
  max-width: 360px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.montos__etiqueta {
  color: var(--color-secundario);
}
.montos__valor {
  margin: 0;
  text-align: right;
}
.montos__total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divisor);
  font-weight: 600;
  color: var(--color-tinta);
}
.montos__valor--total {
  font-size: 16px;
}
.tarjeta--lateral {
  padding: 20px var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.archivo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--alto-campo);
  padding: 8px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-control);
  color: var(--color-tinta);
  text-decoration: none;
}
.archivo:hover {
  background: var(--color-superficie-suave);
  color: var(--color-tinta);
}
.archivo__textos {
  display: flex;
  flex-direction: column;
}
.archivo__titulo {
  font-weight: 500;
}
.archivo__descripcion {
  font-size: var(--texto-mini);
  color: var(--color-secundario);
}
.historial {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.historial__paso {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.historial__paso:last-child {
  padding-bottom: 0;
}
.historial__punto {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 5px;
  flex-shrink: 0;
  background: var(--color-punto-neutro);
}
.historial__punto--ok {
  background: var(--color-ok);
}
.historial__punto--cond {
  background: var(--color-cond);
}
.historial__punto--rej {
  background: var(--color-rej);
}
.historial__textos {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.historial__titulo {
  font-weight: 500;
}
.historial__fecha {
  font-size: var(--texto-mini);
  color: var(--color-secundario);
}
.dialogo__campos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Panel de aprobación y formularios en paneles ---------- */
.panel__bloque {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.panel__titulo {
  font-weight: 600;
}
.panel__encf {
  color: var(--color-tinta);
}
.grupo-opciones {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grupo-opciones__leyenda {
  padding: 0 0 10px;
  font-weight: 600;
}
.casilla-fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--texto-chico);
}
.casilla {
  accent-color: var(--color-acento);
}

/* ---------- Certificación ---------- */
.certificacion__estado {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
}
.certificacion__icono {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.certificacion__icono--ok {
  background: var(--color-ok-fondo);
  color: var(--color-ok);
}
.certificacion__icono--neutro {
  background: var(--color-neutro-fondo);
  color: var(--color-neutro);
}
.certificacion__textos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.certificacion__linea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.certificacion__titulo {
  font-size: 20px;
  font-weight: 600;
}
.etapas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--space-6);
}
.etapa {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.etapa__numero {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--texto-chico);
  font-weight: 600;
}
.etapa__numero--hecha {
  background: var(--color-ok-fondo);
  color: var(--color-ok);
}
.etapa__numero--actual {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.etapa__numero--pendiente {
  background: var(--color-neutro-fondo);
  color: var(--color-etiqueta);
}
.etapa__textos {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.etapa__titulo {
  font-weight: 500;
}
.etapa__titulo--actual {
  font-weight: 600;
}
.etapa__descripcion {
  font-size: var(--texto-chico);
  color: var(--color-secundario);
}
.tipos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.tipo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-3) 14px;
  border-radius: var(--radio-control);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie-suave);
  color: var(--color-etiqueta);
}
.tipo--habilitado {
  border-color: var(--color-acento-suave-borde);
  background: var(--color-acento-suave-fondo);
  color: var(--color-tinta);
}
.tipo__icono {
  display: flex;
  color: var(--color-deshabilitado);
}
.tipo--habilitado .tipo__icono {
  color: var(--color-ok);
}
.tipo__codigo {
  font-weight: 500;
}

/* ---------- Configuración ---------- */
.configuracion {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.configuracion__contenido {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.configuracion__contenido > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.configuracion__contenido > :empty {
  display: none;
}
.key-nueva {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-acento-suave-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-acento-suave-fondo);
}
.key-nueva__textos {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.key-nueva__texto {
  font-size: var(--texto-chico);
  color: var(--color-texto);
}
.key-nueva__fila {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.key-nueva__campo {
  flex: 1 1 280px;
  width: auto;
}
.form-linea {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Segundo factor: QR generado en el navegador */
.totp {
  display: flex;
  gap: 32px;
  padding: var(--space-6);
}
.totp__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.totp__marco {
  padding: var(--space-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
}
.qr {
  display: block;
  width: 176px;
  height: 176px;
}
.qr__fondo {
  fill: var(--color-superficie);
}
.qr__modulos {
  fill: var(--color-tinta);
}
.totp__nota {
  font-size: var(--texto-mini);
  color: var(--color-etiqueta);
}
.totp__pasos {
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-grow: 1;
  line-height: 1.5;
}
.totp__clave {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--texto-chico);
  color: var(--color-secundario);
}
.totp__secreto {
  font-size: var(--texto-base);
  color: var(--color-tinta);
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

/* ---------- Móvil (Movil.dc.html, 390 px) ---------- */
@media (max-width: 899px) {
  .lista__resultados .solo-escritorio {
    display: none;
  }
  .lista__resultados .solo-movil {
    display: flex;
  }
  .tarjeta--lista {
    background: transparent;
    border: 0;
  }
  .tarjeta--lista > .filtros {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    padding: var(--space-3);
  }
  .lista__resultados .contenedor-estado--embebido,
  .lista__resultados .pie-lista {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
  }
  .lista-tarjetas {
    padding: var(--space-3) 0;
  }
  .filtros__boton-movil {
    width: 100%;
    justify-content: center;
    height: var(--alto-campo);
  }
  .comprobante__cabecera {
    flex-direction: column;
    gap: var(--space-4);
  }
  .comprobante__acciones {
    flex-wrap: wrap;
  }
  .comprobante__principal,
  .comprobante__lateral {
    grid-column: 1 / -1;
  }
  .titulo-comprobante {
    font-size: 22px;
    overflow-wrap: anywhere;
  }
  .configuracion {
    flex-direction: column;
    gap: var(--space-4);
  }
  .etapas {
    flex-direction: column;
  }
  .tipos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .totp {
    flex-direction: column;
    padding: var(--space-4);
  }
  .tarjeta__cabecera {
    flex-wrap: wrap;
    padding: var(--space-4);
  }
  .certificacion__estado {
    padding: var(--space-4);
    gap: var(--space-4);
  }
  .tarjeta__cuerpo {
    padding: var(--space-4);
  }
  .datos--filas {
    padding: 0 var(--space-4) var(--space-2);
  }
  .datos--filas.datos--2,
  .datos--filas.datos--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel-lateral__cabecera,
  .panel-lateral__cuerpo,
  .panel-lateral__pie {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}