/* ==========================================================================
   BUZÓN COSAPI · Vistas
   Inicio editorial (§28) · Historial (§34-35) · Correo (§26-27) ·
   Empresas (§38) · Automatización (§39) · Configuración (§43, §61) ·
   Onboarding (§47)
   --------------------------------------------------------------------------
   Regla que gobierna el inicio: NO se encierra cada dato en una tarjeta.
   Los datos se leen como un texto compuesto, con espacio negativo.
   ========================================================================== */

/* ================================================================= INICIO = */

/* Rejilla de dos columnas. Antes la vista entera estaba topada a 900 px sobre
   un lienzo útil de ~1390 px: quedaba una franja muerta de casi 500 px a la
   derecha de TODO, y ése era el «se siente vacío». La medida de lectura se
   controla ahora bloque a bloque, no encogiendo el contenedor. */
.inicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: var(--space-2xl);
  align-items: start;
}
.inicio__saludo-bloque,
.inicio__contexto,
.inicio__titular,
.cifras { grid-column: 1 / -1; }

/* Saludo por franja horaria. Es lo primero que se lee y le da carácter a la
   pantalla; el veredicto operativo va justo debajo, así que la jerarquía
   editorial no le quita sitio a la respuesta de «¿hubo algo?». */
.inicio__saludo-bloque { margin-bottom: var(--space-lg); max-width: 62ch; }

.inicio__saludo {
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.inicio__detalle-saludo {
  margin-top: var(--space-2xs);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}
/* La frase cambia con un desvanecido corto: nunca un salto seco. */
.inicio__saludo,
.inicio__detalle-saludo { transition: opacity var(--motion-base) var(--easing); }
.inicio__saludo--cambiando,
.inicio__detalle-saludo--cambiando { opacity: 0; }

/* Primer arranque: se pregunta el nombre una sola vez y desaparece. */
.saludo-nombre {
  display: flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-sm); flex-wrap: wrap;
}
.saludo-nombre__etiqueta { font-size: var(--text-sm); color: var(--color-text-secondary); }
.saludo-nombre__campo { width: 200px; }

.inicio__contexto {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.inicio__contexto strong { font-weight: var(--weight-semibold); }
.inicio__alerta { color: var(--color-warning); }

/* Titular: el veredicto a la izquierda, la acción a la derecha, en la misma
   línea base. Contesta «¿hubo algo?» y «¿qué hago?» sin bajar la vista. */
.inicio__titular {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-top: var(--space-sm);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.inicio__veredicto {
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 34ch;
}
/* Times New Roman sólo tiene dos pesos reales, así que el estado se distingue
   por color y por un filete a la izquierda, no por una gradación de grosor. */
.inicio__veredicto--atencion,
.inicio__veredicto--peligro,
.inicio__veredicto--exito,
.inicio__veredicto--info { padding-left: var(--space-sm); border-left: 3px solid; }
.inicio__veredicto--atencion { border-color: var(--color-brand); }
.inicio__veredicto--peligro { border-color: var(--color-danger); }
.inicio__veredicto--exito { border-color: var(--color-success); }
.inicio__veredicto--info { border-color: var(--color-primary); }
.inicio__veredicto--neutro { color: var(--color-text-secondary); }

/* Las dos columnas se colocan solas, en el orden del DOM: la izquierda ocupa la
   columna 1 de la fila siguiente y el lateral cae a su derecha.
   NO fijar aquí `grid-row`. Al hacerlo, el lateral reservaba una fila que la
   banda de cifras —que cruza las dos columnas— ya no podía ocupar: las cifras
   bajaban una fila y la celda izquierda quedaba vacía con la altura entera del
   lateral. Eso era el hueco blanco de media pantalla. */
.inicio__columna { grid-column: 1; min-width: 0; }
.inicio__lateral { grid-column: 2; display: flex; flex-direction: column;
  gap: var(--space-lg); margin-top: var(--space-xl); }

/* Bloques de la columna derecha. */
.tarjeta-lateral {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-sm);
}
.tarjeta-lateral__titulo {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.tarjeta-lateral__cuerpo { margin-top: var(--space-xs); }
.tarjeta-lateral__vacio {
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.revision {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xs) var(--space-sm);
  width: 100%;
  padding: var(--space-xs) var(--space-2xs);
  border: 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.revision:hover { background: var(--color-surface-hover); }
.revision:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.revision__fecha { font-size: var(--text-sm); color: var(--color-text); }
.revision__cifra {
  grid-row: 1; grid-column: 2;
  font-family: var(--font-editorial); font-size: var(--text-md);
}
.revision__periodo { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.revision__estado { grid-column: 2; justify-self: end; }

/* Nombre propio: .estado-linea ya es el componente del panel lateral. */
.sistema-linea {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm); padding: var(--space-2xs) 0;
}
.sistema-linea__etiqueta { font-size: var(--text-sm); color: var(--color-text-secondary); }
.sistema-linea__valor { flex: none; }

@media (max-width: 1280px) {
  .inicio { grid-template-columns: minmax(0, 1fr); }
  .inicio__columna, .inicio__lateral { grid-column: 1; }
  .inicio__lateral { grid-row: auto; }
}

/* Datos en línea, separados por reglas horizontales finas. Sin cards.
   El ancho se acota: un par etiqueta-valor estirado a 1400 px deja la etiqueta
   y su dato en extremos opuestos de la pantalla y se lee como un hueco. */
.hechos { margin-top: var(--space-xl); max-width: 760px;
  border-top: var(--border-width) solid var(--color-border); }

.hecho {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.hecho__etiqueta {
  flex: 0 0 148px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.hecho__valor { flex: 1 1 auto; min-width: 0; font-size: var(--text-md); }
.hecho__valor strong { font-weight: var(--weight-semibold); }
.hecho__nota { display: block; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* Cifras destacadas: la única licencia para la serif fuera de los títulos. */
/* Cifras sin caja: una caja blanca sobre el lienzo beige se leía como un
   parche pegado. Aquí sólo hay dos filetes horizontales y separación entre
   columnas; el fondo es el de la página. */
/* Rejilla FIJA de cinco celdas, no flex elástico. Con `flex: 1 1 0` y sólo una
   cifra distinta de cero —el caso corriente— esa única celda se estiraba sobre
   los 700 px enmarcados y dejaba medio bloque de hueco con filetes alrededor.
   Ahora las cinco celdas existen siempre y todas llevan dato real. */
.cifras {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border);
}
.cifra { padding: var(--space-md) var(--space-lg) var(--space-md) 0; min-width: 0; }
.cifra + .cifra { padding-left: var(--space-lg);
  border-left: var(--border-width) solid var(--color-border-subtle); }

@media (max-width: 1180px) {
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cifra__valor {
  font-family: var(--font-editorial);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.cifra__valor--atencion { color: var(--color-danger); }
.cifra__valor--exito { color: var(--color-success); }
/* Un cero es información, no un error: se atenúa sin desaparecer. */
.cifra__valor--cero { color: var(--color-text-tertiary); }
.cifra__etiqueta {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.inicio__acciones { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  justify-content: flex-end; flex: none; }

/* Bitácora. Siempre presente: en marcha muestra el avance en vivo, en reposo el
   registro reciente. Antes se ocultaba fuera de una revisión y ahí quedaba
   media pantalla en blanco. */
.ejecucion { margin-top: var(--space-xl); }
.ejecucion__cabecera { display: flex; align-items: center; gap: var(--space-sm); }
.ejecucion__rotulo {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.ejecucion__cabecera .btn { margin-left: auto; }
.ejecucion__registro {
  margin-top: var(--space-sm);
  /* Alto mínimo: el bloque sostiene la columna y no salta de tamaño cada vez
     que cambia el número de líneas. */
  min-height: 240px;
  max-height: 420px;
  overflow-y: auto;
  border-top: var(--border-width) solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}
.ejecucion__vacio {
  padding: var(--space-lg) 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.ejecucion__linea {
  display: flex;
  gap: var(--space-sm);
  padding: 2px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}
.ejecucion__hora { flex: none; color: var(--color-text-tertiary); }
.ejecucion__codigo { flex: 0 0 108px; color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; }
.ejecucion__mensaje { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.ejecucion__linea--aviso .ejecucion__mensaje { color: var(--color-warning); }
.ejecucion__linea--error .ejecucion__mensaje { color: var(--color-danger); }

/* Imagen corporativa: se usa como cierre visual, optimizada y responsiva. */

/* ============================================================== HISTORIAL = */

.historial__tabla td:first-child { white-space: nowrap; }
.historial__periodo { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.historial__estados { display: flex; flex-direction: column; gap: var(--space-3xs); align-items: flex-start; }
.historial__cifras { display: flex; gap: var(--space-sm); font-variant-numeric: tabular-nums; }
.historial__cifra { font-size: var(--text-xs); color: var(--color-text-secondary); }
.historial__cifra strong { font-weight: var(--weight-semibold); color: var(--color-text); }

.paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-text-secondary); }

/* Detalle de una consulta */
.detalle-consulta__cifras { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.detalle-consulta__grupo { margin-top: var(--space-lg); }
.detalle-consulta__grupo-titulo { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-editorial); font-size: var(--text-lg); }
.comunicacion {
  padding: var(--space-sm) 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}
.comunicacion--prioritaria { border-left: 3px solid var(--color-danger); padding-left: var(--space-sm); }
.comunicacion__asunto { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.comunicacion__meta { margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-text-tertiary); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.comunicacion__resumen { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-text-secondary); }
.comunicacion__documentos { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }

.documento {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
}
.documento:hover { border-color: var(--color-primary-border); background: var(--color-primary-soft); }
.documento--pdf { border-color: var(--color-success-border); }
.documento__icono { width: 13px; height: 13px; flex: none; color: var(--color-text-tertiary); }
.documento--pdf .documento__icono { color: var(--color-success); }
.documento__peso { color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }

/* Visor de documento embebido */
.visor { width: 100%; height: min(72vh, 760px); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-sunken); }

/* ================================================================= CORREO = */

.correo__resumen { display: flex; flex-wrap: wrap; gap: var(--space-2xl); }
.vista-previa__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md); }
.vista-previa__marco {
  width: 100%;
  height: min(60vh, 620px);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.destinatarios-elegidos { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.ficha-destinatario {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 2px var(--space-2xs) 2px var(--space-xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
}
.ficha-destinatario button { color: var(--color-text-tertiary); display: inline-flex; }
.ficha-destinatario button:hover { color: var(--color-danger); }

/* Bloques de distribución: lectura clara antes de enviar. */
.correo-bloques__barra { margin-bottom: var(--space-md); }
.correo-bloques { display: flex; flex-direction: column; border-top: var(--border-width) solid var(--color-border); }
.correo-bloque { padding: var(--space-lg) 0; border-bottom: var(--border-width) solid var(--color-border); }
.correo-bloque--inactivo { opacity: .62; }
.correo-bloque__cabecera { display: flex; align-items: flex-start; gap: var(--space-md); }
.correo-bloque__titulo { font-family: var(--font-editorial); font-size: var(--text-xl); line-height: var(--leading-tight); }
.correo-bloque__meta { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.correo-bloque__cuerpo { margin-top: var(--space-md); display: grid; gap: var(--space-xs); max-width: 1040px; }
.correo-bloque__linea { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.correo-bloque__etiqueta { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.correo-bloque__valor { min-width: 0; font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; }
.correo-bloque__alerta { margin-left: 108px; padding-left: var(--space-sm); border-left: 2px solid var(--color-warning); font-size: var(--text-xs); color: var(--color-warning); }

.correo-empresas-selector { max-height: 230px; overflow-y: auto; border-top: var(--border-width) solid var(--color-border); }
.correo-empresa-opcion { display: flex; align-items: flex-start; gap: var(--space-sm); padding: 10px var(--space-2xs); border-bottom: var(--border-width) solid var(--color-border-subtle); cursor: pointer; }
.correo-empresa-opcion:hover { background: var(--color-surface-hover); }
.correo-empresa-opcion input { margin-top: 3px; }
.correo-empresa-opcion__alerta { margin-top: 2px; color: var(--color-warning); }

.correo-roles { border-top: var(--border-width) solid var(--color-border); }
.correo-rol { display: flex; align-items: center; gap: var(--space-md); padding: 10px var(--space-2xs); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.correo-rol__nombre { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.correo-rol__correo { margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.correo-rol__selector { width: 130px; flex: none; }

@media (max-width: 760px) {
  .correo-bloque__linea { grid-template-columns: 1fr; gap: 2px; }
  .correo-bloque__alerta { margin-left: 0; }
  .correo-rol { align-items: flex-start; }
  .correo-rol__selector { width: 112px; }
}

/* =============================================================== EMPRESAS = */

.empresa__nombre { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.empresa__codigo { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.empresa__ruc { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.empresa__grupos { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

/* ========================================================= AUTOMATIZACIÓN = */

.automatizacion__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) 0 var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border);
}
.automatizacion__resumen { font-family: var(--font-editorial); font-size: var(--text-xl); }
.dias-semana { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.dia-semana {
  width: 42px;
  padding: var(--space-2xs) 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
}
.dia-semana[aria-pressed="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}

/* ========================================================== CONFIGURACIÓN = */

.config__nav { display: flex; flex-direction: column; gap: 1px; }
.config__nav-item {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: left;
}
.config__nav-item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.config__nav-item[aria-current="true"] { background: var(--color-surface-active); color: var(--color-text); font-weight: var(--weight-medium); }

.config__cuerpo { display: grid; grid-template-columns: 190px 1fr; gap: var(--space-2xl); align-items: start; }
@media (max-width: 980px) {
  .config__cuerpo { grid-template-columns: 1fr; gap: var(--space-lg); }
  .config__nav { flex-direction: row; flex-wrap: wrap; }
}

/* Barras de almacenamiento */
.almacen__fila { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.almacen__etiqueta { flex: 0 0 150px; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.almacen__barra { flex: 1 1 auto; height: 5px; border-radius: var(--radius-pill); background: var(--color-border-subtle); overflow: hidden; }
.almacen__valor { height: 100%; background: var(--color-primary); }
.almacen__valor--limpiable { background: var(--color-warning); }
.almacen__texto { flex: 0 0 90px; text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* Filas de diagnóstico */
.diagnostico__fila { display: flex; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); font-size: var(--text-sm); }
.diagnostico__clave { flex: 0 0 220px; color: var(--color-text-tertiary); }
.diagnostico__valor { flex: 1 1 auto; min-width: 0; word-break: break-word; font-family: var(--font-mono); font-size: var(--text-xs); }

/* ============================================================= ONBOARDING = */

.onboarding { max-width: 620px; margin: 0 auto; padding: var(--space-2xl) 0; }
.onboarding__titulo { font-family: var(--font-editorial); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
.onboarding__intro { margin-top: var(--space-sm); font-size: var(--text-md); color: var(--color-text-secondary); }
.pasos { margin-top: var(--space-xl); border-top: var(--border-width) solid var(--color-border); }

.paso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}
.paso__numero {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
}
.paso--hecho .paso__numero { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success); }
.paso--actual .paso__numero { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.paso__titulo { font-size: var(--text-md); font-weight: var(--weight-medium); }
.paso__texto { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-text-secondary); }
.paso__accion { margin-top: var(--space-xs); }

/* ================================================== BLOQUEO DE LA BÓVEDA = */

.bloqueo {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-lg);
  background: var(--color-bg);
}
.bloqueo__caja { width: 100%; max-width: 380px; }
.bloqueo__marca { display: flex; align-items: center; gap: var(--space-xs); }
.bloqueo__titulo { margin-top: var(--space-lg); font-family: var(--font-editorial); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.bloqueo__texto { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-secondary); }
.bloqueo__formulario { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }

/* ========================================= SETUP v1.1.0 — PÁGINA SEPARADA = */
.setup-body { min-height: 100vh; background: var(--color-bg); }
.setup-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
}
.setup-panel { width: min(100%, 430px); }
.setup-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 42px; }
.setup-brand__mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-primary);
}
.setup-brand__mark svg { width: 20px; height: 20px; }
.setup-title {
  margin: 8px 0 0; font-family: var(--font-editorial); font-size: clamp(32px, 4vw, 42px);
  line-height: 1.06; letter-spacing: var(--tracking-tight); font-weight: var(--weight-medium);
}
.setup-copy { margin: 14px 0 0; color: var(--color-text-secondary); font-size: var(--text-md); line-height: 1.65; }
.setup-form { margin-top: 32px; display: grid; gap: 16px; }
.setup-form .entrada { min-height: 46px; }
.setup-form .btn { margin-top: 2px; width: 100%; justify-content: center; }
.setup-isolation { margin-top: 28px; color: var(--color-text-tertiary); font-size: var(--text-xs); line-height: 1.55; }
.setup-success {
  margin-top: 30px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 0;
  border-top: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.55;
}
.setup-success strong { color: var(--color-text); font-weight: var(--weight-medium); }
.setup-success__dot {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-success-soft); color: var(--color-success); font-weight: 700;
}

/* ================================ BUZÓN COSAPI V1.1.0 · IDENTIDAD VISUAL ============ */
.sidebar__logo--img { object-fit: contain; border-radius: 7px; }
.setup-brand__mark { border: 0; background: transparent; }
.setup-brand__mark img { width: 34px; height: 34px; object-fit: contain; display: block; }

/* Carga inicial integrada: nunca se monta una capa blanca sobre la aplicación. */
.arranque-inline {
  min-height: 220px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  color: var(--color-text-secondary);
}
.arranque-inline__logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: none;
}
.arranque-inline__titulo {
  font-family: var(--font-editorial);
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.arranque-inline__texto { margin-top: 4px; font-size: var(--text-sm); }

/* Vista previa del correo de Comprobantes (`ui/js/vista-dbnet.js`). El motor
   devuelve el HTML ya armado y se pinta aislado en un iframe con `srcdoc`:
   ese correo trae sus propios estilos —tabla, membrete, firma— y soltarlos en
   el documento del panel pisaría la tipografía de COSAPI. */
.vista-correo {
  width: 100%;
  height: 420px;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}